// 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