1

I have many components in angular and I am trying to display static error banner on all pages in case of GET API error related with that component. Through Interceptor I am able to get the API error but not sure how I can display banner throughout the application. I want to keep the router URL as it is on whichever page user is there.

Created Interceptor and It is working fine but next step is display error banner for all pages

CBP
  • 33
  • 6

1 Answers1

2

You can create an ErrorMessageService to establish a connection between your interceptor class and your application's base component (e.g. your AppComponent). The latter would eventually display the error-messages.

ErrorMessageService

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ErrorMessageService {
  errorMessage: string;
  isErrorMsgVisible = false;

  displayError(errorMessage) {
    this.errorMessage = errorMessage;
    this.isErrorMsgVisible = true;
  }

  hideError() {
    this.errorMessage = '';
    this.isErrorMsgVisible = false;
  }
}

In your Http Interceptor you have to import the ErrorMessageService and call displayError():

  constructor(private errorMessageSvc: ErrorMessageService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error) => {

        const errorMessage = error.error;
        this.errorMessageSvc.displayError(errorMessage);

        // ....
        // Code omitted for brevity
      })
    );
  }

In your Base Component TS (e.g. your AppComponent.ts) you have to import the ErrorMessageService:

constructor(public errorMessageSvc: ErrorMessageService) {}

In the upper part of your Base Component HTML (e.g. in AppComponent.html) you could eventually display an error-message whenever somewhere in your application an error occurs:

<div *ngIf="errorMessageSvc.isErrorMsgVisible">
  <p>{{ errorMessageSvc.errorMessage }}</p>
  <button (click)="errorMessageSvc.hideError()">Close</button>
</div>
kellermat
  • 2,859
  • 2
  • 4
  • 21
  • Thanks for the response. It worked. But I don't want to add close button to hide error. If all api are 200 than only want to hide it on navigation or tab click. How i can check if all api are 200? @kellermat – CBP Feb 14 '23 at 16:47
  • I mentioned my issue here, if you can help. @kellermat https://stackoverflow.com/questions/75451925/hide-error-banner-if-all-apis-are-success-using-interceptor – CBP Feb 14 '23 at 18:34
  • I think it would be overly complicated / nearly impossible for the interceptor to find out itself if "all" requests have been resolved with a status 200, since the interceptor basically processes request by request and doesn't know which request is the last of a series of requests. – kellermat Feb 14 '23 at 21:33
  • I would suggest to try a pragmatic solution: Alternative A): The active component uses the ErrorMessageService to programmatically hide the error-banner whenever the user clicks a ui-element which triggers a new request. Alternative B): The banner automatically disappears after a certain amount of seconds (I think this can even be done via CSS). – kellermat Feb 14 '23 at 21:33
  • I'm curious to see whether you get a helpful answer to your follow-up question, but I suppose you first have to narrow down the scope of your question and provide a concrete code-example. – kellermat Feb 14 '23 at 21:42
  • 1
    yes you are correct, I try to debug the interceptor and it's processing request by request so not able to find what will be the last request. One another option, I am trying it with NgRx effect. I need that point whenever user click or navigate to anywhere. If I can find that new state here. Not sure it's just trial and error. Otherwise only option is as you suggested to add ErrorMessageService to all component and it will be huge work. Thanks for all suggestion and inputs. I really appreciate your time. – CBP Feb 15 '23 at 14:12