-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?

Flimzy
  • 68,325
  • 15
  • 126
  • 165
claudioz
  • 871
  • 4
  • 11
  • 23
  • 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
  • 5,615
  • 4
  • 24
  • 39