@Component({
  selector: 'app-products',
  template: `
  <button (click)="loadProducts()">Load Products</button>
  
  <ng-container *ngIf="productsData.state === 'loading'">
    Loading...
  </ng-container>
  
  <ng-container *ngIf="productsData.state === 'error'">
    Ouch, Got an error during loading of products.
  </ng-container>
  
  <ng-container *ngIf="productsData.state === 'success'">    
    <ng-container *ngFor="let product of productsData.value">
      <app-product [product]="product"></app-product>
    </ng-container>
  </ng-container>
  `
})
class MyComponent {
  productsData: RemoteData<Product[]>;
  
  ngOnInit() {
    this.loadProducts();
  }
  
  loadProducts() {
    this.productsData = loadingState();
    this.http.get('/api/products').subscribe(
      (response) => {
        this.productsData = successState(response);
      },
      (error) => {
        this.productsData = errorState(error);
      }
    )
  }
}