Close the `loader` here if I need to use the Real-time feature as well as an `async` pipe on the tem-CodePudding

Can you tell me how to close the loader here if I need to use the Real-time feature as well as an async pipe on the template?

Since it has a real-time feature it doesn't work with finalize operator i.e. never completes. So any clue here, please.

component.ts

 private getAlerts(loader: HTMLIonLoadingElement): void {
    this.alertsChanged$ = this.alertsService.getAlerts().pipe(
      finalize(() => {
        this.loadingService.dismissLoader(loader); // here is the problem
      }),
      map((res) => res)     
    );
  }

service.ts

 getAlerts(): Observable<AlertModel[]> {
    return this.angularFireDatabase
      .list<AlertModel>(`groups/${this.groupId}/alerts`)
      .valueChanges();
  }

.html

 <app-alerts
      [alerts]="alertsChanged$ | async"
  ></app-alerts>

CodePudding user response：

If finalize doesn't work then use tap. See below.

private getAlerts(loader: HTMLIonLoadingElement): void {
    this.alertsChanged$ = this.alertsService.getAlerts().pipe(
        tap(() => {
            this.loadingService.dismissLoader(loader);
        }),
        map((res) => res)     
    );
}

See here for details: https://rxjs.dev/api/operators/tap