javascript - כיצד ללכוד את התקדמות קריאת ה-API ולהציג אותה ב-MAT-Progress bar עם הודעת טקסט מותאמת?

סליחה, אם מישהו כבר שאל את אותו השאלה.

תודה.

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>

ניסיון נוסף להשתמש במיירט אחרי צפייה בוידאו ב-YouTube

יצרתי שירות לודר ואינטרספטור כפי שמוצג למטה

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>

הערה: אני לא רואה שום שגיאה במימוש שלמעלה. אבל אין לי מושג איך ללכוד את האירועים של HTTP ולרשום אותם.

מה אני רוצה להשיג?

אני רוצה להציג סרגל התקדמות עם הודעה מותאמת אישית כמו למטה

• אם התקדמות הבקשה הושלמה ב-50% - הצג 'הקשר שלך בתהליך'.
• אם התקדמות הבקשה הושלמה ב-100% - הצג 'כעת אתה מחובר לשירות הלקוחות המאובטח. התחל לשוחח'. ואז הפנה לחלון חדש לצ'אט

איך זה קורה?

יש לי טבלה, כל שורה כוללת אפשרות להפעיל חלון קופץ connectWithRepresentative() (אין בעיות כאן, אני מצליח להפעיל את החלון הקופץ).

מציג את כפתור connect כדי להתחיל את הבקשה שלי. זה ייקח קצת זמן. במהלך זה אני מנסה להראות את ההודעה למעלה ללקוח כדי לוודא שהם מוכנים לשוחח אחרת תופיע הודעת שגיאה.

סליחה על שלא שיתפתי קוד stackblitz מינימלי שניתן לשחזר. כרגע אני לא יכול לגשת ל-plunker. stackblitz מסיבה כלשהי. אני לא יודע למה.

צריך את העזרה שלכם.