@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;
    })
  }
}