javascriptangulartypescriptangular-materialhttpinterceptor

Show modal dialog from HttpInterceptor


@Injectable()
export class MyInterceptor implements HttpInterceptor
{
    intercept(req : HttpRequest<any>, next : HttpHandler) : Observable<HttpEvent<any>>
    {
//show a modal dialog to hold the request until user respond/close the dialog
        if(ShowModalDialog())
        {
            return next.handle(req);
        }
        else
        {
//route to login
        }
    }
}

I have tried to show an angular material dialog, but it does not block the request and it continues executing next line.

I need to know how to show a modal dialog from interceptor when a request error response appears, show user some options and resume execution after dialog is closed.

Is it possible to stop/hold a request with such dialog?


Solution

  • You can do this with an angular material dialog:

    @Injectable()
    export class MyInterceptor implements HttpInterceptor {
      constructor(private dialog: MatDialog, private router: Router) {}
      
      intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if(ShowModalDialog()) {
          return this.dialog.open(DialogModalComponent).afterClosed().pipe(
            concatMap(() => next.handle(req))
          );
        } else {
          return next.handle(req);
        }
      }
    }