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