Angular Make Connect Between Interceptor and Other Component

As you know, interceptor is one of best solution to listen to all HTTP request also handle global error like 500 and connection errors depends on all of the requests in project, without need to write code and handle inside any services,One of the challenges we have been inside interceptors of angular is, we can’t have direct control of other components, also we haven’t use viewChild inside interceptors like other components, that’s why we must use this way to solve this problem:

First of all, we must make a service to work likes a bridge for us, in this service we should use a Subject form RXJS lib that helps us to make an event with management for dispatch with next method, next method get a parameter as once argument by type boolean, we use a function named showError to serve our needed data form interceptor to this service.

Now, you can easily check all request error (in this example) in all of your Components and show message or error bar for errors has happened.

In conclusion, Interceptor with connector help you’re to make a global error or event manager as a layer above of your direct request, and with connector trick, you can easily use and check it in all Components.