Skip to content

Instantly share code, notes, and snippets.

@DmitryEfimenko
Last active July 1, 2022 09:37
@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);
}
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment