1.0.2 • Published 2 years ago
@fad-producto/ng-fad-loader v1.0.2
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>