Provide data to Custom Error component angular-CodePudding

I am using angular 13 and I have a custom error component, I am handling the httpresponse error in my interceptor like if any error happens I will invoke the error component with :

        error: (err: HttpErrorResponse) => {
          if (err.status === <whichever> && err.statusText === '<text>') {
            this.router.navigate(['error']);

In my router I have defined the route as below:

{
    path: 'error',
    component: ErrorComponent,
  }

In the ErrorComponent I have a variable msg, and in the template I am showing it like this:

<div *ngIf="msg">
        <div >{{ msg }}</div>
 </div>

How can I pass data to this component from the interceptor? I would like to pass the err.message from httperror response.

CodePudding user response：

Since you want to communicate from an Interceptor to your routed component, I would use a service with a subject.

Here is a StackBlitz demo. This demo showcases component communication with an intermediary service, but you would use that service in the exact same way to communicate between your interceptor and your component.