title: ionic 3 angular 4 http interceptor to show loading on every request
body: <p>I'm trying to make a custom http interceptor which will be used to handle loading and other additional functions. (handling loading for each request manually significantly increasing the amount of code).</p>
  
  <p><strong>The problem is:</strong> Loader is getting activated on each request, but <code>loading.dismiss()</code> is not working.(Loading spinner keeps being active, no errors)</p>
  
  <p><strong>My config:</strong> </p>
  
  <p><strong>http interceptor:</strong></p>
  
  <pre><code>@Injectable()
  export class MyHttpWrapper extends Http {
    private loading: any;
  
    constructor(connectionBackend: ConnectionBackend, requestOptions: RequestOptions,private loadingCtrl: LoadingController) {
      super(connectionBackend, requestOptions);
    }
  
    public get(url: string, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
      this.showLoader();
  
      return super.get(url, this.getRequestOptionArgs(options))
        .finally&lt;Response&gt;(() =&gt; {
          this.hideLoader();
        });
    }
  
    public post(url: string, body: string, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
        return super.post(url, body, options);
    }
  
    public put(url: string, body: string, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
      return super.put(url, body, options);
    }
  
    public delete(url: string, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
      return super.delete(url, options);
    }
  
  
    private getRequestOptionArgs(options?: RequestOptionsArgs) : RequestOptionsArgs {
      if (options == null) {
        options = new RequestOptions();
      }
      if (options.headers == null) {
        options.headers = new Headers();
      }
      options.headers.append('Content-Type', 'application/json');
  
      return options;
    }
  
  
    private showLoader() {
      if(!this.loading){
        this.loading = this.loadingCtrl.create({
          dismissOnPageChange: true
        });
      }
      this.loading.present();
      console.log('show loader')
    }
    private hideLoader() {
      console.log('hide loader')
      console.log(this.loading)
      this.loading.dismiss();
    }
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>export function httpInterceptorFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions, loadingCtrl: LoadingController) {
    return new MyHttpWrapper(xhrBackend, requestOptions, loadingCtrl);
  }
      @NgModule({
        declarations: [
          MyApp
        ],
        imports: [
          BrowserModule,
          HttpModule,
          IonicModule.forRoot(MyApp),
          IonicStorageModule.forRoot()
        ],
        bootstrap: [IonicApp],
        entryComponents: [
          MyApp
        ],
        providers: [
          StatusBar,
          SplashScreen,
          {provide: ErrorHandler, useClass: IonicErrorHandler},
          {provide: APP_CONFIG, useValue: AppConfig},
          {
            provide: Http,
            useFactory: httpInterceptorFactory,
            deps: [XHRBackend, RequestOptions, LoadingController]
          }
        ]
      })
      export class AppModule {}
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>tried to add simple service(and use it in <code>MyHttpWrapper</code>), doesn't change anything, same problem.</p>
  
  <pre><code>@Injectable()
  export class LoadingService {
    private loading:any;
  
    constructor(private loadingCtrl: LoadingController) {
  
    }
  
    show() {
      if(!this.loading){
        this.loading = this.loadingCtrl.create({
          dismissOnPageChange: true
        });
      }
      this.loading.present();
    }
    hide() {
      if (this.loading) {
        this.loading.dismiss();
      }
    }
  }
  </code></pre>