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

``javascript
import { Ng7LoaderModule } from 'ng7-loader';
`

> Make an import entry as shown below

`javascript

imports: [ Ng7LoaderModule ]

`

> Include spinner component to your root level component.

`html

`

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

`javascript

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

`

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

> app.component.ts

template: string =

`

License

Sanjay Singh