Search code examples
angularfirebaseionic-frameworkfirebase-realtime-databaseangularfire

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


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>

Solution

  • 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