Rename SpinnerComponent to NgHttpLoaderComponent and rename component selector to 'ng-http-loader'

Author: mpalourdio

README.md

@@ -23,7 +23,7 @@ $ npm install ng-http-loader --save / yarn add ng-http-loader
 
 ## What does it do ?
 
-This package provides an HTTP Interceptor, and a spinner component (All from [SpinKit](https://github.com/tobiasahlin/SpinKit) at the moment).
+This package provides an HTTP Interceptor, and some spinner components (All from [SpinKit](https://github.com/tobiasahlin/SpinKit) at the moment).
 The HTTP interceptor listens to all HTTP requests and shows a spinner / loader indicator during pending http requests.
 
 ## Angular 4 / Angular 5 / Angular 6
@@ -74,19 +74,19 @@ export class AppModule { }
 
 In your app.component.html, simply add:
 ```xml
-<spinner></spinner>
+<ng-http-loader></ng-http-loader>
 ```
 
 ## Customizing the spinner
 
 You can customize the **background-color**, the **spinner type**, the **debounce delay** (ie. after how many milliseconds the spinner will be visible, if needed), the **minimum duration** (ie. how many milliseconds should the spinner be visible at least):
 ```xml
-<spinner 
+<ng-http-loader 
     [backgroundColor]="'#ff0000'"
     [spinner]="spinkit.skWave"
     [debounceDelay]="100"
     [minDuration]="300">
-</spinner>
+</ng-http-loader>
 ```
 
 **_To use this syntax, you must reference the ``Spinkit`` const as a public property in your app.component.ts_**:
@@ -110,7 +110,7 @@ The different spinners available are referenced in [this class](src/lib/spinkits
 **_Otherwise, you can simply reference the chosen spinner as a simple string_**:
 
 ```xml
-<spinner backgroundColor="#ff0000" spinner="sk-wave"></spinner>
+<ng-http-loader backgroundColor="#ff0000" spinner="sk-wave"></ng-http-loader>
 ```
 
 ## Defining your own spinner
@@ -120,9 +120,9 @@ You can define your own loader component in place of the built-in ones. The need
 - Create your component
 - Add it to the [entryComponent](https://angular.io/guide/ngmodule-faq#what-is-an-entry-component) definition in your module definition
 - Reference your component in a public property in your ``app.component.ts``
-- Reference the property in the spinner component like this:
+- Reference the property in the ng-http-loader component like this:
 ```xml
-<spinner [entryComponent]="myAwesomeComponent"></spinner>
+<ng-http-loader [entryComponent]="myAwesomeComponent"></ng-http-loader>
 ```
 
 You can find some short examples [here](https://gist.github.com/mpalourdio/2c0bec03d610b24ff49db649fbb69a48) and [here](https://gist.github.com/mpalourdio/e05b4495de2abeeecfcf92d70e4ef93e).
@@ -131,22 +131,22 @@ You can find some short examples [here](https://gist.github.com/mpalourdio/2c0be
 
 You can filter the http requests that shouldn't be caught by the interceptor by providing **an array of regex patterns**:
 ```xml
-<spinner [filteredUrlPatterns]="['\\d', '[a-zA-Z]', 'my-api']"></spinner>
+<ng-http-loader [filteredUrlPatterns]="['\\d', '[a-zA-Z]', 'my-api']"></ng-http-loader>
 ```
 
 You can filter the http requests by providing **an array of HTTP methods** (case insensitive):
 ```xml
-<spinner [filteredMethods]="['gEt', 'POST', 'PuT']"></spinner>
+<ng-http-loader [filteredMethods]="['gEt', 'POST', 'PuT']"></ng-http-loader>
 ```
 
 You can also filter the http requests by providing **an array of HTTP headers** (case insensitive):
 ```xml
-<spinner [filteredHeaders]="['hEaDeR', 'AnoTheR-HeAdEr']"></spinner>
+<ng-http-loader [filteredHeaders]="['hEaDeR', 'AnoTheR-HeAdEr']"></ng-http-loader>
 ```
 
 ## Manually show and hide the spinner
 
-You can manually show and hide the spinner component if needed. You must use the ``SpinnerVisibilityService`` for this purpose.  
+You can manually show and hide the spinner if needed. You must use the ``SpinnerVisibilityService`` for this purpose.  
 
 Sometimes, when manually showing the spinner, an http request could be performed in background, and when finished, the spinner would automagically disappear.  
 

…components/spinner/spinner.component.css …/components/ng-http-loader.component.csssrc/lib/components/spinner/spinner.component.css renamed to src/lib/components/ng-http-loader.component.css src/lib/components/spinner/spinner.component.css renamed to src/lib/components/ng-http-loader.component.css

@@ -10,16 +10,16 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { EMPTY, merge, Observable, Subscription, timer } from 'rxjs';
 import { debounce, delayWhen } from 'rxjs/operators';
-import { PendingInterceptorService } from '../../services/pending-interceptor.service';
-import { SpinnerVisibilityService } from '../../services/spinner-visibility.service';
-import { Spinkit } from '../../spinkits';
+import { PendingInterceptorService } from '../services/pending-interceptor.service';
+import { SpinnerVisibilityService } from '../services/spinner-visibility.service';
+import { Spinkit } from '../spinkits';
 
 @Component({
-    selector: 'spinner',
-    templateUrl: './spinner.component.html',
-    styleUrls: ['./spinner.component.css']
+    selector: 'ng-http-loader',
+    templateUrl: './ng-http-loader.component.html',
+    styleUrls: ['./ng-http-loader.component.css']
 })
-export class SpinnerComponent implements OnDestroy, OnInit {
+export class NgHttpLoaderComponent implements OnDestroy, OnInit {
     public isSpinnerVisible: boolean;
     public spinkit = Spinkit;
     private subscriptions: Subscription;

…omponents/spinner/spinner.component.html …components/ng-http-loader.component.htmlsrc/lib/components/spinner/spinner.component.html renamed to src/lib/components/ng-http-loader.component.html src/lib/components/spinner/spinner.component.html renamed to src/lib/components/ng-http-loader.component.html

@@ -10,21 +10,21 @@
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-import { SpinnerComponent } from './components/spinner/spinner.component';
+import { NgHttpLoaderComponent } from './components/ng-http-loader.component';
 import { PendingInterceptorServiceInterceptor } from './services/pending-interceptor.service';
 import { SPINKIT_COMPONENTS } from './spinkits';
 
 @NgModule({
     declarations: [
-        SpinnerComponent,
+        NgHttpLoaderComponent,
         SPINKIT_COMPONENTS,
     ],
     imports: [
         CommonModule,
         HttpClientModule,
     ],
     exports: [
-        SpinnerComponent,
+        NgHttpLoaderComponent,
         SPINKIT_COMPONENTS,
     ],
     providers: [

…/components/spinner/spinner.component.ts …b/components/ng-http-loader.component.tssrc/lib/components/spinner/spinner.component.ts renamed to src/lib/components/ng-http-loader.component.ts src/lib/components/spinner/spinner.component.ts renamed to src/lib/components/ng-http-loader.component.ts

@@ -11,18 +11,18 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
-import { SkThreeBounceComponent } from '../../../lib/components/sk-three-bounce/sk-three-bounce.component';
-import { SpinnerComponent } from '../../../lib/components/spinner/spinner.component';
-import { PendingInterceptorServiceInterceptor } from '../../../lib/services/pending-interceptor.service';
-import { SPINKIT_COMPONENTS } from '../../../lib/spinkits';
+import { NgHttpLoaderComponent } from '../../lib/components/ng-http-loader.component';
+import { SkThreeBounceComponent } from '../../lib/components/sk-three-bounce/sk-three-bounce.component';
+import { PendingInterceptorServiceInterceptor } from '../../lib/services/pending-interceptor.service';
+import { SPINKIT_COMPONENTS } from '../../lib/spinkits';
 
-describe('SpinnerComponentOutlet', () => {
-    let component: SpinnerComponent;
-    let fixture: ComponentFixture<SpinnerComponent>;
+describe('NgHttpLoaderComponentOutlet', () => {
+    let component: NgHttpLoaderComponent;
+    let fixture: ComponentFixture<NgHttpLoaderComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [SpinnerComponent, SPINKIT_COMPONENTS],
+            declarations: [NgHttpLoaderComponent, SPINKIT_COMPONENTS],
             imports: [HttpClientTestingModule],
             providers: [PendingInterceptorServiceInterceptor]
         })
@@ -33,7 +33,7 @@ describe('SpinnerComponentOutlet', () => {
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(SpinnerComponent);
+        fixture = TestBed.createComponent(NgHttpLoaderComponent);
         component = fixture.componentInstance;
     });
 

src/lib/ng-http-loader.module.ts

@@ -12,34 +12,34 @@ import { HttpClientTestingModule, HttpTestingController } from '@angular/common/
 import { async, ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { forkJoin, Observable } from 'rxjs';
-import { SpinnerComponent } from '../../../lib/components/spinner/spinner.component';
-import { PendingInterceptorServiceInterceptor } from '../../../lib/services/pending-interceptor.service';
-import { SpinnerVisibilityService } from '../../../lib/services/spinner-visibility.service';
-import { Spinkit, SPINKIT_COMPONENTS } from '../../../lib/spinkits';
+import { NgHttpLoaderComponent } from '../../lib/components/ng-http-loader.component';
+import { PendingInterceptorServiceInterceptor } from '../../lib/services/pending-interceptor.service';
+import { SpinnerVisibilityService } from '../../lib/services/spinner-visibility.service';
+import { Spinkit, SPINKIT_COMPONENTS } from '../../lib/spinkits';
 
-describe('SpinnerComponent', () => {
-    let component: SpinnerComponent;
-    let fixture: ComponentFixture<SpinnerComponent>;
+describe('NgHttpLoaderComponent', () => {
+    let component: NgHttpLoaderComponent;
+    let fixture: ComponentFixture<NgHttpLoaderComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [SpinnerComponent, SPINKIT_COMPONENTS],
+            declarations: [NgHttpLoaderComponent, SPINKIT_COMPONENTS],
             imports: [HttpClientTestingModule],
             providers: [PendingInterceptorServiceInterceptor]
         })
             .compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(SpinnerComponent);
+        fixture = TestBed.createComponent(NgHttpLoaderComponent);
         component = fixture.componentInstance;
     });
 
-    it('should create the spinner component', () => {
+    it('should create the ng-http-loader component', () => {
         expect(component).toBeTruthy();
     });
 
-    it('should create the spinner component with default values', () => {
+    it('should create the ng-http-loader component with default values', () => {
         component.isSpinnerVisible = true;
         fixture.detectChanges();
 
@@ -123,7 +123,7 @@ describe('SpinnerComponent', () => {
         }
     )));
 
-    it('should hide and show a the spinner for a single HTTP request', fakeAsync(inject(
+    it('should hide and show the spinner for a single HTTP request', fakeAsync(inject(
         [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
             http.get('/fake').subscribe();
 
@@ -279,7 +279,7 @@ describe('SpinnerComponent', () => {
         [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
             http.get('/fake').subscribe();
 
-            const newFixture = TestBed.createComponent(SpinnerComponent);
+            const newFixture = TestBed.createComponent(NgHttpLoaderComponent);
             const newComponent = newFixture.componentInstance;
 
             tick();