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