// app.component.html <div *ngIf="selectedProduct$ | async as product"> {{ product.name }} </button> </div> // app.component.ts selectedProduct$ = this.productService.selectedProduct$; // product.service.ts products$ = this.categorySelectedAction$.pipe( switchMap( catId => this.http.get<Product[]>(this.url+'?cat='+catId)) .pipe(...); private productSelectedSubject = new Subject<number>(); productSelectedAction$ = this.productSelectedSubject.asObservable(); selectedProduct$ = combineLatest([ this.products$, this.productSelectedAction ]).pipe( map(([products, selectedProductId]) => products.find(product => product.id === selectedProductId) ));
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