@Component({ selector: 'app-products', template: ` <button (click)="loadProducts()">Load Products</button> <ng-container *ngIf="isLoading"> Loading... </ng-container> <ng-container *ngIf="!isLoading"> <ng-container *ngFor="let product of products"> <app-product [product]="product"></app-product> </ng-container> </ng-container> ` }) class MyComponent { products: Product[]; isLoading = false; ngOnInit() { this.loadProducts(); } loadProducts() { this.isLoading = true; this.http.get('/api/products').subscribe((products) => { this.products = products; this.isLoading = false; }) } }