How to close opened popups on error redirection?

Question

In interceptor I have mechanism for redirecting page when error happens. The problem is that if there are popups already opened they will not close. Error page will appear behind them.

This is code for redirection:

return next.handle(request).pipe(
    (error: any) => {
        if (error.status === BAD_REQUEST) { 
        }else{
            this.router.navigate(['/error/']);
        }
    });

Answer 1

One way to close the popups would be to use a service that will have a subject which will emit values. For this case, you could subscribe to that subject and on every value received, close those popups;

// http-errors.service.ts
private _errorReceived$ = new Subject();
errorReceived$ = this._errorReceived$.asObservable();

handleError () {
    // We're not particularly interested in the error message
    this._errorReceived$.next();
}


// component-which-holds-popups.component.ts
this.httpErrorsService.errorReceived$
    .subscribe(() => {
        this.shouldHidePopups = true;
    });

// interceptor
return next.handle(req)
    .pipe(
        catchError(err => {
            if (err instanceof HttpErrorResponse && err.status === YOUR_ERR_STATUS) {
                this.httpErrorsService.handleError();

                this.redirectToErrPage();
            }

            return throwError(err);
        })
    )

<!-- component-which-holds-popups.component.html -->
<!-- ... -->

<app-popup *ngIf="!shouldHidePopups"></app-popup>

<!-- ... -->