Показывать загрузочную панель на запросе CRUD для Firebase в Angular

Question

Я прочитал, что есть ngx-progressbar, чтобы автоматически показывать прогресс-бар при любом http-запросе. Интересно, есть ли в Angular какая-либо библиотека или способ показа индикатора выполнения при создании, чтении, обновлении или удалении данных из firebase.

Я уже показывал индикатор загрузки, но он чувствует себя не совсем хорошо. Я просто задаю условие true метке индикатора при запуске процесса crud и даю значение false, если процесс завершен или завершился неудачей. И иногда индикатор пропадает, когда данные не полностью отображаются на странице.

Есть подсказка?

Answer 1

Лучший способ реализовать панель загрузки - использовать INTERCEPTOR.

app.module.ts

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { LoaderInterceptorService } from './_services/loader-interceptor.service';
...
providers: [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: LoaderInterceptorService,
    multi: true
  }
]

LoaderInterceptorService

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable, pipe } from 'rxjs';
import { tap } from 'rxjs/operators';
import { LoaderService } from '../_services/loader.service';
@Injectable({
  providedIn: 'root'
})
export class LoaderInterceptorService implements HttpInterceptor {
  constructor(private loaderService: LoaderService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.showLoader();
    return next.handle(req).pipe(tap((event: HttpEvent<any>) => { 
      if (event instanceof HttpResponse) {
        this.onEnd();
      }
    },
      (err: any) => {
        this.onEnd();
    }));
  }
  private onEnd(): void {
    this.hideLoader();
  }
  private showLoader(): void {
    this.loaderService.show();
  }
  private hideLoader(): void {
    this.loaderService.hide();
  }
}

Documentaion Читать дальше