loader0.2.3 v0.2.3

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])

Available spinners