// app.component.html <div *ngIf="products$ | async as products"> <button *ngFor='let product of products'> {{ product.name }} </button> </div> // app.component.ts products$ = this.productService.products$; // product.service.ts private categorySubject = new Subject<number>(); categorySelectedAction$ = this.categorySubject.asObservable(); products$ = this.categorySelectedAction$.pipe( switchMap( catId => this.http.get<Product[]>(this.url+'?cat='+catId)) .pipe( tap(console.log), catchError(this.handleError) ) ); selectedCategoryChanged(categoryId: number): void{ this.categorySUbject.next(categoryId); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter