RxJS - Tell observable to wait for other observable to emit non null value

Question

I've got this setter which assigns a class member observable systemAreasOptions$. I do it there because it needs to wait for mappedItem$ to have had an emission which is not null. I originially had systemAreasOptions$ assigned at the class level, but it did not wait for mappedItem$. For some reason I couldn't even get the HTML to rerender when using the asyncPipe. How do I tell an observable (systemAreasOptions$ to wait for another observable (mappedItem$), instead of just assigning it where the other one emits?

public set mappedItem(mappedItem: IPermissionsMappedItem) {
    mappedItem.hydrate$Permissions().then(_ => {
        this.mappedItem$.next(mappedItem);
        this.systemAreasOptions$ = from(
            this.lookupService.SYSTEM_AREAS.toNestedLookup()
                .$promise as unknown as Observable<IPermissmissionsLookup[]>
        ).pipe(
            map(systemAreas => orderBy(systemAreas,systemArea => systemArea?.label?.toLowerCase())),
            map(systemAreas => systemAreas.map(area => ({
                ...area,
                permissions: this.getPermissionsForArea(area.id)
            }))),
            shareReplay(1),
            tap(console.log)
        );

        this._subscriptions.add(
            this.systemAreasOptions$.subscribe(
                this.systemAreasOptionsBehaviourSubject$)
        );
    });
}

Answer 1

You can combine the observables:

• Create an observable that only emits mappedItems that aren't null
• Emit both values only when it emits

I beleave you are looking for withLatestFrom:

higherOrder$ = mappedItemThatIsNotNull$.pipe(
  withLatestFrom(systemAreasOptions$)
) 

In your template:

higherOrder$ | async

This will yield [mappedItem, systemAreaOptions]