Add http interceptor

t-ho · t-ho · commit cd5c719960db · 2018-05-24T05:19:09.000+10:00
diff --git a/README.md b/README.md
@@ -31,14 +31,15 @@ Available spinners:
 - [Custom Configuration](#configuration)
 - [Input options](#input_options)
 - [Automatically show loader for router events](#router_events)
+- [Automatically show loader for http requests](#http_requests)
 - [Changelog](#changelog)
 - [Credits](#credits)
 - [License](#license)
 
 
 <a name="demo"></a>
 
-## Demo <a name="demo"></a>
+## Demo
 
 Live demo [here](https://ngx-ui-loader-demo.stackblitz.io).
 
@@ -59,7 +60,7 @@ npm install --save ngx-ui-loader
 
 <a name="getting_started"></a>
 
-## Getting started <a name="getting_started"></a>
+## Getting started
 
 Import the `NgxUiLoaderModule` in your root application module `AppModule`:
 
@@ -91,7 +92,7 @@ export class AppModule { }
 
 <a name="usage"></a>
 
-## Usage <a name="usage"></a>
+## Usage
 
 After importing the `NgxUiLoaderModule`, use `ngx-ui-loader` component in your root app template:
 
@@ -134,7 +135,7 @@ export class AppComponent implements OnInit {
 
 <a name="api_service"></a>
 
-## API - NgxUiLoaderService <a name="api_service"></a>
+## API - NgxUiLoaderService
 
 * `NgxUiLoaderService.start([id]='default')` Starts a foreground loader with progress bar. Users cannot interact with the page when the loader is showed.
 * `NgxUiLoaderService.stop([id]='default')` Stops a foreground loader with progress bar.
@@ -147,7 +148,7 @@ export class AppComponent implements OnInit {
 
 <a name="configuration"></a>
 
-## Custom Configuration <a name="configuration"></a>
+## Custom Configuration
 
 You can configure `ngx-ui-loader` in the template as below:
 
@@ -194,7 +195,7 @@ export class AppModule { }
 
 <a name="input_options"></a>
 
-## Input Options <a name="input_options"></a>
+## Input Options
 
 |   Attribute      |  Type     | Required |     Default        |                                       Description                                               |
 | ---------------- | --------- | -------- | ------------------ | ----------------------------------------------------------------------------------------------- |
@@ -228,7 +229,7 @@ export class AppModule { }
 
 <a name="router_events"></a>
 
-## Automatically show loader for router events <a name="router_events"></a>
+## Automatically show loader for router events
 
 If you want the loader to start automatically for navigating between your app routes:
 
@@ -259,6 +260,41 @@ export class AppModule { }
 
 ```
 
+<a name="http_requests"></a>
+
+## Automatically show loader for Http requests
+
+If you want the loader to start automatically for http requests:
+
+```typescript
+
+import { BrowserModule } from  '@angular/platform-browser';
+import { NgModule } from  '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+
+import { AppComponent } from './app.component';
+
+import { NgxUiLoaderModule, NgxUiLoaderHttpModule } from  'ngx-ui-loader';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    NgxUiLoaderModule, // import NgxUiLoaderModule
+    NgxUiLoaderHttpModule, // import NgxUiLoaderHttpModule. By default, it will show background loader.
+    // If you need to show foreground spinner, do as follow:
+    // NgxUiLoaderHttpModule.forRoot({ showForeground: true })
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+
+```
+
 NOTE: And in you root app template, do not forget to include `ngx-ui-loader` component:
 
 ```html
@@ -268,7 +304,10 @@ NOTE: And in you root app template, do not forget to include `ngx-ui-loader` com
 
 <a name="changelog"></a>
 
-## Changelog <a name="changelog"></a>
+## Changelog
+
+### v.1.1.5
+* Be able to show loader automatically for http requests - Http interceptor
 
 ### v.1.1.2
 * Add more spinner types (total 22 spinners)
@@ -309,7 +348,7 @@ NOTE: And in you root app template, do not forget to include `ngx-ui-loader` com
 
 <a name="credits"></a>
 
-## Credits <a name="credits"></a>
+## Credits
 
 * Tobias Ahlin - [CSS spinkit](https://github.com/tobiasahlin/SpinKit)
 * Daniel Cardoso - [Load awesome](https://github.com/danielcardoso/load-awesome)
@@ -318,7 +357,7 @@ NOTE: And in you root app template, do not forget to include `ngx-ui-loader` com
 
 <a name="license"></a>
 
-## License <a name="license"></a>
+## License
 
 MIT &copy; [t-ho](mailto:toan.hmt@gmail.com)
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-ui-loader-app",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
diff --git a/projects/ngx-ui-loader/package.json b/projects/ngx-ui-loader/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ngx-ui-loader",
   "description": "An all-in-one and fully customizable loader/spinner for Angular 5+ (5+ and 6+ are tested) applications. It supports foreground, background spinner/loader and indicative progress bar.",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/t-ho/ngx-ui-loader.git"
diff --git a/projects/ngx-ui-loader/src/lib/http/ngx-ui-loader-http-config.token.ts b/projects/ngx-ui-loader/src/lib/http/ngx-ui-loader-http-config.token.ts
@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+import { NgxUiLoaderHttpConfig } from './ngx-ui-loader-http-config';
+
+/**
+ * Injection token for ngx-ui-loader-http configuration
+ */
+export const NGX_UI_LOADER_HTTP_CONFIG_TOKEN = new InjectionToken<NgxUiLoaderHttpConfig>('ngxUiLoaderHttpDefault.config');
diff --git a/projects/ngx-ui-loader/src/lib/http/ngx-ui-loader-http-config.ts b/projects/ngx-ui-loader/src/lib/http/ngx-ui-loader-http-config.ts
@@ -0,0 +1,6 @@
+/**
+ * The interface of ngx-ui-loader configuration
+ */
+export interface NgxUiLoaderHttpConfig {
+  showForeground?: boolean;
+}
diff --git a/projects/ngx-ui-loader/src/lib/http/ngx-ui-loader-http.interceptor.ts b/projects/ngx-ui-loader/src/lib/http/ngx-ui-loader-http.interceptor.ts
@@ -0,0 +1,47 @@
+import { Injectable, Inject, Optional } from '@angular/core';
+import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { finalize } from 'rxjs/operators';
+import { NgxUiLoaderService } from '../core/ngx-ui-loader.service';
+import { NGX_UI_LOADER_HTTP_CONFIG_TOKEN } from './ngx-ui-loader-http-config.token';
+import { NgxUiLoaderHttpConfig } from './ngx-ui-loader-http-config';
+
+@Injectable()
+export class NgxUiLoaderHttpInterceptor implements HttpInterceptor {
+
+  private count: number;
+  private defaultConfig: NgxUiLoaderHttpConfig;
+
+  constructor(@Inject(NGX_UI_LOADER_HTTP_CONFIG_TOKEN) @Optional() config: NgxUiLoaderHttpConfig,
+    private ngxUiLoaderService: NgxUiLoaderService) {
+
+    this.count = 0;
+    this.defaultConfig = {
+      showForeground: false
+    };
+
+    if (config) {
+      Object.assign(this.defaultConfig, config);
+    }
+  }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    this.count++;
+    if (this.defaultConfig.showForeground) {
+      this.ngxUiLoaderService.start('$_http-loader');
+    } else {
+      this.ngxUiLoaderService.startBackground('$_http-loader');
+    }
+
+    return next.handle(req).pipe(finalize(() => {
+      this.count--;
+      if (this.count === 0) {
+        if (this.defaultConfig.showForeground) {
+          this.ngxUiLoaderService.stop('$_http-loader');
+        } else {
+          this.ngxUiLoaderService.stopBackground('$_http-loader');
+        }
+      }
+    }));
+  }
+}
diff --git a/projects/ngx-ui-loader/src/lib/http/ngx-ui-loader-http.module.ts b/projects/ngx-ui-loader/src/lib/http/ngx-ui-loader-http.module.ts
@@ -0,0 +1,35 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+
+import { NgxUiLoaderHttpInterceptor } from './ngx-ui-loader-http.interceptor';
+import { NgxUiLoaderHttpConfig } from './ngx-ui-loader-http-config';
+import { NGX_UI_LOADER_HTTP_CONFIG_TOKEN } from './ngx-ui-loader-http-config.token';
+
+@NgModule({
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: NgxUiLoaderHttpInterceptor,
+      multi: true
+    }
+  ],
+})
+export class NgxUiLoaderHttpModule {
+
+  /**
+   * forRoot
+   * @param httpConfig Configuration
+   * @returns A module with its provider dependencies
+   */
+  static forRoot(httpConfig: NgxUiLoaderHttpConfig): ModuleWithProviders {
+    return {
+      ngModule: NgxUiLoaderHttpModule,
+      providers: [
+        {
+          provide: NGX_UI_LOADER_HTTP_CONFIG_TOKEN,
+          useValue: httpConfig
+        }
+      ]
+    };
+  }
+}
diff --git a/projects/ngx-ui-loader/src/lib/router/ngx-ui-loader-router.module.ts b/projects/ngx-ui-loader/src/lib/router/ngx-ui-loader-router.module.ts
@@ -26,16 +26,16 @@ export class NgxUiLoaderRouterModule {
   }
 
   constructor(
-    @Optional() @Inject(NGX_UI_LOADER_ROUTER_CONFIG_TOKEN) defaultConfig: NgxUiLoaderRouterConfig,
+    @Optional() @Inject(NGX_UI_LOADER_ROUTER_CONFIG_TOKEN) config: NgxUiLoaderRouterConfig,
     router: Router,
     ngxUiLoaderService: NgxUiLoaderService) {
 
-    let config: NgxUiLoaderRouterConfig = {
+    let defaultConfig: NgxUiLoaderRouterConfig = {
       showForeground: true
     };
 
-    if (defaultConfig) {
-      config = Object.assign(config, defaultConfig);
+    if (config) {
+      defaultConfig = Object.assign(defaultConfig, config);
     }
 
     router.events
diff --git a/projects/ngx-ui-loader/src/public_api.ts b/projects/ngx-ui-loader/src/public_api.ts
@@ -8,3 +8,5 @@ export { NgxUiLoaderConfig } from './lib/core/ngx-ui-loader-config';
 export { SPINNER_TYPES, NGX_POSITIONS, PB_DIRECTIONS } from './lib/core/ngx-ui-loader.contants';
 export { NgxUiLoaderRouterModule } from './lib/router/ngx-ui-loader-router.module';
 export { NgxUiLoaderRouterConfig } from './lib/router/ngx-ui-loader-router-config';
+export { NgxUiLoaderHttpModule } from './lib/http/ngx-ui-loader-http.module';
+export { NgxUiLoaderHttpConfig } from './lib/http/ngx-ui-loader-http-config';
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -2,14 +2,16 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HttpClientModule } from '@angular/common/http';
 
 import { MatToolbarModule, MatButtonModule, MatIconModule, MatInputModule,
          MatSelectModule, MatSlideToggleModule, MatSliderModule,
          MatCheckboxModule, MatListModule } from '@angular/material';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ColorPickerModule } from 'ngx-color-picker';
 
-import { NgxUiLoaderModule, NgxUiLoaderConfig, SPINNER_TYPES, NGX_POSITIONS, PB_DIRECTIONS, NgxUiLoaderRouterModule } from 'ngx-ui-loader';
+import { NgxUiLoaderModule, NgxUiLoaderConfig, SPINNER_TYPES, NGX_POSITIONS,
+  PB_DIRECTIONS, NgxUiLoaderRouterModule, NgxUiLoaderHttpModule } from 'ngx-ui-loader';
 
 import { AppComponent } from './app.component';
 import { FormsModule } from '@angular/forms';
@@ -69,9 +71,11 @@ const routes: Routes = [
     MatCheckboxModule,
     MatListModule,
     RouterModule.forRoot(routes),
+    HttpClientModule,
 
     NgxUiLoaderModule.forRoot(ngxUiLoaderConfig),
-    NgxUiLoaderRouterModule // import this module for showing loader automatically when navigating between app routes
+    NgxUiLoaderRouterModule, // import this module for showing loader automatically when navigating between app routes
+    NgxUiLoaderHttpModule,
   ],
   providers: [NgxUiLoaderDemoService],
   bootstrap: [AppComponent]
diff --git a/src/app/ngx-ui-loader-demo.component.html b/src/app/ngx-ui-loader-demo.component.html
@@ -170,6 +170,7 @@
     <div fxFlex="100" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="24px">
       <a mat-raised-button color="accent" [routerLink]="'/spinners'">Available Spinners</a>
       <button mat-raised-button color="primary" (click)="reset()">Reset Configuration</button>
+      <button mat-raised-button (click)="getPhotos()" [disabled]="disabled">Http request with loader</button>
     </div>
     <!-- Background }}}-->
   </div>
diff --git a/src/app/ngx-ui-loader-demo.component.ts b/src/app/ngx-ui-loader-demo.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { NgxUiLoaderService, NgxUiLoaderConfig, SPINNER_TYPES, NGX_POSITIONS, PB_DIRECTIONS } from 'ngx-ui-loader';
 import { Subscription } from 'rxjs';
 import { NgxUiLoaderDemoService } from './ngx-ui-loader-demo.service';
+import { HttpClient } from '@angular/common/http';
 
 const LOGO_URL = 'assets/angular.png';
 
@@ -21,13 +22,16 @@ export class NgxUiLoaderDemoComponent implements OnDestroy, OnInit {
   onStartWatcher: Subscription;
   onStopWatcher: Subscription;
 
+  disabled: boolean;
+
   /**
    * Constructor
    * @param ngxUiLoaderService
    * @param demoService
    */
   constructor(private ngxUiLoaderService: NgxUiLoaderService,
-    public demoService: NgxUiLoaderDemoService) {
+    public demoService: NgxUiLoaderDemoService,
+    private http: HttpClient) {
   }
 
   /**
@@ -38,6 +42,8 @@ export class NgxUiLoaderDemoComponent implements OnDestroy, OnInit {
     this.positions = Object.keys(NGX_POSITIONS).map(key => NGX_POSITIONS[key]);
     this.directions = Object.keys(PB_DIRECTIONS).map(key => PB_DIRECTIONS[key]);
 
+    this.disabled = false;
+
     this.getStatus();
 
     this.onStopWatcher = this.ngxUiLoaderService.onStop
@@ -129,6 +135,16 @@ export class NgxUiLoaderDemoComponent implements OnDestroy, OnInit {
     this.demoService.config = this.ngxUiLoaderService.getDefaultConfig();
   }
 
+  getPhotos() {
+    this.disabled = true;
+    this.http.get('https://jsonplaceholder.typicode.com/photos').subscribe(res => {
+      console.log(res);
+      setTimeout(() => {
+        this.disabled = false;
+      }, 1100);
+    });
+  }
+
   /**
    * On destroy
    */

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ngx-ui-loader-app",`
`3`		`- "version": "1.1.4",`
	`3`	`+ "version": "1.1.5",`
`4`	`4`	`"scripts": {`
`5`	`5`	`"ng": "ng",`
`6`	`6`	`"start": "ng serve",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ngx-ui-loader",`
`3`	`3`	`"description": "An all-in-one and fully customizable loader/spinner for Angular 5+ (5+ and 6+ are tested) applications. It supports foreground, background spinner/loader and indicative progress bar.",`
`4`		`- "version": "1.1.4",`
	`4`	`+ "version": "1.1.5",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
`7`	`7`	`"url": "https://github.com/t-ho/ngx-ui-loader.git"`