Getting started

Installation

npm install test-ng-fad-loader

Dependencies

No se requieren dependencias

Import

In the file necessary example.module.ts import the module.

In this case app.module.ts

import { NgFadLoaderModule } from 'test-ng-fad-loader';

.
.
.
... imports: [
       ...,
       BrowserAnimationsModule 
       NgFadLoaderModule
    ]...

Note: BrowserAnimationsModule is required.

Usage

HTML

Add the selector inside the app.component.html

<fad-loader></fad-loader>

Typescript

Inject the loader service in the components where you want to display the loader.

import { LoaderService } from 'test-ng-fad-loader';

constructor(private loaderService: LoaderService){}

.
.
.
showLoader(){
 this.loaderService.show('Loading');
}
hideLoader(){
 this.loaderService.hide();
}

To show the component use the show() method of the service; if desired, a message can be passed when invoking the method, otherwise only the animation will be shown.

Inputs

No inputs required.

Outputs

No outputs

Custom templates

If you want to display an element different from the default one, you can use a template. To use your own template, you must use the customLoader attribute which will be a TemplateRef

HTML

<fad-loader [customLoader]="loader"></fad-loader>

<ng-template #loader>
  <div class="lds-facebook">
    <div></div>
    <div></div>
    <div></div>
  </div>
</ng-template>