RxJS operator equivalent of ((observableX | async) || (observableY | async)) in template

Question

I have the following code in my component template

<mat-spinner *ngIf="((facade.user.data$.isLoading | async) || (facade.product.data$.isLoading | async))"></mat-spinner>

I want to move this union to the component class as a single property and refer to it from the component template, like so

<mat-spinner *ngIf="detailLoading | async"></mat-spinner>

However, I cannot find which RxJS union operator to use to property represent the condition in the observables

(facade.user.data$.isLoading | async) || (facade.product.data$.isLoading | async)

Which of the RxJS operators could I use to represent the above in my component class?

Answer 1

If you need operator in template (pipe), you can create your own.

I think it should look something like this:

public detailLoading$: Observable<boolean> = this.facade.user.data$.pipe(
    combineLatestWith(this.facade.product.data$),
    map(data => data[0].isLoading || data[1].isLoading )
)