Ng7-loader NPM

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

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>