Preview:
// 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)
  ));

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