npm install test-ng-fad-loader
No se requieren dependencias
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.
Add the selector inside the app.component.html
<fad-loader></fad-loader>
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.
No inputs required.
No outputs
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
<fad-loader [customLoader]="loader"></fad-loader>
<ng-template #loader>
<div class="lds-facebook">
<div></div>
<div></div>
<div></div>
</div>
</ng-template>