ngx-loading-spinner is following simplistic approach to showcase your asychronous events in latest Angular Framework.
npm install ngx-loading-spinnerngx-loading-spinner is following simplistic approach to showcase your asychronous events in latest Angular Framework.
Also provides custom templating & loading text inputs.

![license]()
npm i ngx-loading-spinner --save
> You can override the css for your customized spinner.
> You can also configure your own threshold to show spinner only for more expensive processes!
> Supports All Major Angular Versions
> #loading-spinner-text / .loading-spinner-text : Both id and class attributes given to spinner text component to customize the loading text css
> [timeout] The time after which spinner will be hidden. Default is 5000 ms
> Resolved issues related to templates and loading text.
> Import module to your application master module
``javascript
import { NgxLoadingSpinnerModule } from 'ngx-loading-spinner';
@NgModule({
declarations: [
...
],
imports: [
NgxLoadingSpinnerModule.forRoot()
],
exports: [
NgxLoadingSpinnerComponent
]
})
`
> Include spinner component to your root level component.
`html
`
> Import NgxLoadingSpinnerService to the component where you want to show the spinner.
`javascript
import { NgxLoadingSpinnerService } from 'ngx-loading-spinner';
`
> Inject dependancy
`javascript
constructor(
private spinnerService: NgxLoadingSpinnerService
) { }
`
> Use show() method to display the loading spinner.
`javascript
this.spinnerService.show();
`
> Use hide() method to hide the loading spinner once the processing is done.
`javascript
this.spinnerService.hide();
`
`javascript
this.spinnerService.show();
this.http.get(GLOBAL['CONFIG_URL'])
.subscribe(data => {
this.spinnerService.hide();
});
`
> [template] : Accepts HTML which generates the loading spinner. You can apply additional css to design your own spinner, or can just pass *.gif image to show the loading spinner.
> [loadingText] : Accepts a string to display the text while the loading process.
> [zIndex] : Accepts a z-index css property for loading text.
> [threshold] : Accepts time in milliseconds for threshold through which you can conditionally show the spinner only for expensive calls. Default is 500 ms.
> [timeout] : Accepts time in milliseconds to hide the spinner automatically. Default is 5000 ms.
> default [loadingText] text would be blank.
> app.component.html : both are optional if not provided default would be shown.
`html
`
> [threshold]="2000" : This will show the loading bar for the only processes which will take time more 2 secs.
> app.component.ts
`javascript
template: string =
``
MIT © Amit Mahida