RxJS Data Composition

component.html

<div *ngIf="product$ | async as products">
   <ul>
     <li *ngFor="let product of products">
       {{ product.name }}
     </li>
  </ul>
</div>

component.ts

@Component({
  selector: 'my-data',
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class MyDataComponent
  implements OnInit {
    
  products$ = this.service.product$
    .pipe(
      catchError(error => {
        this.errorMessage = error;
        return of(null)
      })
    );
}

service.ts

@Injectable({
  provideIn: 'root'
})
export class SomeService {
  private someAPIUrl = '/api/'

  product$ = this.http.get<Product[]>(this.someAPIUrl)
      .pipe(
        tap(console.log),
        catchError(this.erroHandler)
      );
    
  constructor(
    private http: HttpClient  
  ) {}
}