Ng7Loader

Angular 7 custom async loader with two simple methods for your asychronous calls. Custom loading template & loading text inputs are also available.

Installation

npm i ng7-loader --save

Description

Supports latest Angular cli v7.x

Usage

Usage

Import module to your application master module

import { Ng7LoaderModule } from 'ng7-loader';

Make an import entry as shown below

imports: [ Ng7LoaderModule ]

Include spinner component to your root level component.

<lib-ng7-loader> </lib-ng7-loader>

Import Ng7LoaderService to the component where you want to show the spinner.

import { Ng7LoaderService } from 'ng7-loader';

Import module to your application master module

include spinner component to your root level component.

Inject dependancy

constructor(
    private spinnerService: Ng7LoaderService
) { }

> Use `show()` method to display the loading spinner.

this.spinnerService.show();

`

Use hide() method to hide the loading spinner once the processing is done.

`

this.spinnerService.hide();

`

Custom template

> *[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

<lib-ng7-loader [threshold]="2000" [timeout]="4000" [template]="template" [loadingText]="'Please wait...'" [zIndex]="9999"></lib-ng7-loader>

[threshold]="2000" : This will show the loading bar for the only processes which will take time more 2 secs.

app.component.ts

`

template: string =<img src="http://pa1.narvii.com/5722/2c617cd9674417d272084884b61e4bb7dd5f0b15_hq.gif" />

`

License

Sanjay Singh