How to route to error page without leaving the current page in Angular

I have running Angular 9 application and as per the correct implementation, if any unhandled exception occurs, I am routing to error page.

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
   handleError(errorObj) {
      router.navigate(['/error'], { queryParams: { error: JSON.stringify(errorDetails) } })
   }
}

I am using ErrorHandler class and want to display error page as overlay , where in error page will be displayed on top of the current page and in background the current page should still be shown.

How to route to error page without leaving the current page in Angular

Good Question 0Comment Collection Report

0 Answer

flashgirl_xm 注册会员
2023-01-25 23:01

I recommend you to use the dialog from Angular Material

Imports:

import { MatDialog } from '@angular/material';

Constructor:

constructor(
  private dialog: MatDialog,
) { }

Function to display the dialog:

error() {
 const dialogRef = this.dialog.open(CustomErrorHandler, {
   width: '70%', // Make this as big as you want
   data: { error: this.errorType } //Put here the data you want to display one the error page. If you dont need it just delete the line and the ,
 });
}

You can find more info here