javascript - Cum să capturezi progresul unui apel API și să-l afișezi într-o bară MAT-Progress cu un mesaj text personalizat?

Îmi cer scuze, dacă cineva a pus deja aceeași întrebare.

Mulțumesc.

chat.service.ts

initiateDemoRequest(clientReqId): Observable < any > {
    return this.httpClient.post('https://my-endpoint-goes-here',
        clientReqId,
        {
            reportProgress: true,
            observe: 'events'
        }).pipe(catchError(this.handleError));

}

createRequest.component.ts

indicator = 0;
progress = 0;

this.myservice.initiateDemoRequest(clientReqId).subscribe( data => {
    if (data.type === HttpEventType.Sent) { // am assuming SENT is used to when api call started requesting to server
        this.progress += Math.round(100 * data.loaded / data.total);
        console.log('what is progerss', this.progress);
      } else  if (data.type === HttpEventType.Response) { // am assuming rESPONSE is used to when getting reponse from server        
        this.progress += Math.round(100 * data.loaded / data.total);
        console.log('this.progress', this.progress);
      }

      // window.open('https://trying-to-open-url-in-another-page.com', '_blank')
});


<mat-progress-bar mode="determinate" *ngIf="indicator"  value="indicator"></mat-progress-bar>

O altă încercare de a folosi interceptorul după ce am vizionat videoclipul YouTube

Am creat serviciul de încărcare și interceptorul astfel:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  public isLoading: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false) ;
  constructor() { }
}

interceptor.ts

constructor(public loaderService: LoaderService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          console.log('event ?', event.type);
        }
        return event;
      }),
    );
  }

<mat-progress-bar *ngIf="loaderService.isLoading | async" mode="determinate" value="connectionProgress"></mat-progress-bar>

Notă: Nu văd nicio eroare în implementarea de mai sus, dar nu am niciun indiciu despre cum să capturez evenimentul HTTP și să îl înregistrez.

Ce vreau să realizez?

Vreau să afișez bara de progres cu un mesaj personalizat ca mai jos

• dacă progresul cererii este finalizat 50% - afișează 'Conexiunea ta este în curs'.
• dacă progresul cererii este finalizat 100% - afișează 'Acum ești conectat cu serviciul clienți Secure. începe să porți conversația'. Apoi redirecționează către o fereastră nouă pentru chat

Cum se întâmplă?

Am o masă, fiecare rând are opțiunea de a declanșa popup-ul connectWithRepresentative() (nu există probleme aici, pot să declanșez popup-ul).

Afișarea butonului connect pentru a iniția cererea mea. Va dura ceva timp. Între timp, încerc să arăt mesajul de mai sus clientului pentru a mă asigura că sunt pregătiți să discute, altfel va apărea un mesaj de eroare.

Îmi pare rău că nu am împărtășit codul minim reproductibil stackblitz. În prezent nu pot accesa plunker. stackblitz dintr-un anumit motiv. Nu știu de ce.

Am nevoie de ajutorul vostru.