-1

I'm developing a web application using Angular 6. I created an interceptor service (using the interface HttpInterceptor) which intercepts some types of HTTP calls. The class works perfectly (I can intercept all the HTTP calls that I want). In this application there are several graphic components. What is the way to show a graphic component (for example a spinner or a modal window) using code written in the interceptor?

An example:

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler ) {

        let updateReq;

        updateReq = req.clone({
            setParams: {
                responseType: 'no-type'
            }
        }
        );

        console.log(updateReq);

        return next.handle(updateReq).pipe(tap(
            event => console.log(event),
            err => console.log(err)
        ));
    }

}

For example I would like to test if req has some properties, then I make a graphic component appear. How do I do this throughout my application?

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
claudioz
  • 1,121
  • 4
  • 14
  • 25
  • 1
    Possible duplicate of [How to Show spinner for every HTTP requests in angular 5?](https://stackoverflow.com/questions/50100380/how-to-show-spinner-for-every-http-requests-in-angular-5) – SiddAjmera Nov 06 '18 at 13:24

1 Answers1

0
  1. create a spinner-component with a flag that shows / hide the spinner
  2. create a new service "spinnerservice" wich toggles a flag and emit an event if the spinner is toggled.
  3. inject you service in your spinner-component and your intercepter
  4. call the "spinnerservice" from the intercepter
  5. listen for the event from you service in your spinnercomponent and adjust your spinner state.
enno.void
  • 6,242
  • 4
  • 25
  • 42