@Component({ selector: 'app-products', template: ` <button (click)="loadProducts()">Load Products</button> <ng-container *ngIf="isLoading else doneLoading"> Loading... </ng-container> <ng-template #doneLoading> <ng-container *ngIf="error else noError"> Ouch, Got an error during loading of products. </ng-container> <ng-template #noError> <ng-container *ngFor="let product of products"> <app-product [product]="product"></app-product> </ng-container> </ng-template> </ng-container> ` }) class MyComponent { products: Product[] | null; isLoading = false; error: any; ngOnInit() { this.loadProducts(); } loadProducts() { this.isLoading = true; this.error = null; this.products = null; this.http.get('/api/products').subscribe( (products) => { this.products = products; this.isLoading = false; }, (error) => { this.error = error; this.isLoading = false; } ) } }