loader0.2.3
v0.2.3
Published
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.1. # Install
Downloads
36
Maintainers
Readme
Loader
This library was generated with Angular CLI version 9.0.1.
Install
npm install @vladimirmana/loader
Usage
1. Import the VMLoader module in app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { VMLoaderModule } from '@vladimirmana/loader';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
VMLoaderModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule { }
2. Add the loader component in your page
<vm-loader [loaderSettings]="appLoader"></vm-loader>
3. Set loader settings
public appLoader: LoaderSettings = { name: 'mainLoader'};
Loader settings interface
export interface LoaderSettings {
name: string, // The name of the loader is unique. Loader named 'httpLoader' is opened and closed with http events but can be handled manually as well
spinnerType?: string,
relativeLoader?:boolean, // The loader is with position fixed by default. Through this property you can use the loader as relative element
absoluteLoader?: boolean, // You can add the loader in relative container and use it as absolute element
logoUrl?: string,
backgroundUrl?: string,
cssProperties?: CssProperties,
openLoaderConditions?: Array<OpenLoaderCondition> // Additional requried conditions that should be meet in order to open the loader
}
If you use http loader, you can restrict on which routes you want to show it or not. That can be achieved with setting up restricted http routes in the configuration of the loader module
The Loader Configuration can be injected through the forRoot method
@NgModule({
imports: [
VMLoaderModule.forRoot({
restrictedHttpRoutes:[]
})
],
})
Loader configuration
export interface RestrictedRoute {
url: string
method: string
}
export class LoaderConfig {
restrictedHttpRoutes?: Array<RestrictedRoute> //Handled only for httpLoader
}
Insert additional conditions in which you want to open the loader
When you are using multiple loaders on one page you might want to have set of rules or conditions in which you want to show some loaders depending on the state of the others. Add list of addional conditions in order to avoid conflicts between the loaders.
Open Loader Conditions Interface
export interface OpenLoaderCondition {
loaderName: string, // Name of the loader that is connected with the condition
visible: boolean // State of that loader that is requred for the condition
}
Customize the loader through the available css properties
Css Properties interface
export interface CssProperties {
background_color?: string
opacity?: number,
spinner_color?: string
}
Import loaderService to component.ts
import { VMLoaderService } from '@vladimirmana/loader';
export class [componentName]{
constructor(
private loaderServce: VMLoaderService) {
}
Open specific loader
this.loaderService.openLoader([loaderName])
Close specific loader
this.loaderService.closeLoader([loaderName])