javascript - Angular 4 show a loading gif for each http request -

i'm quite new angular 4 need show spinner each time when http request done. have many components:

<component-one></component-one> <component-two></component-two> <component-three></component-three> <component-n></component-n> 

each 1 has http request or save data when hppt request made want show <loading></loading> component suppose not practice injecting loading component in each other component http request. can add filter or angular allows me load <loading> component automatically in each component has http request ?

also when http request done want show message "done" or someting.

if can provide me solution i'll appreciate, ty.

upd: plunker. take @ app.ts. sorry having in single file.

in angular 4.3 there new httpclientmodule supports interceptors. main idea have this:

@injectable() export class loadingindicatorservice {      private _loading: boolean = false;      loading(): boolean {         return this._loading;     }      onrequeststarted(): void {         this._loading = true;     }      onrequestfinished(): void {         this._loading = false;     } } 

and apply logic christopher's answer httpinterceptor.

the thing should aware of simultaneous request. can solved example generating unique identifier each request , storing somewhere until request finished.

then can have global loadingindicator component injects loadingindicatorservice.

for more details on httpclientmodule: https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b