ng2ds-preloader

simple global preloader for angular 2 applications

quickstart :

npm install ng2ds-preloader --save

import to module.ts

import { Ng2dsPreloaderService } from 'ng2ds-preloader';
import { Ng2dsPreloader } from 'ng2ds-preloader';

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    Ng2dsPreloader
  ],
  providers: [
    Ng2dsPreloaderService
  ],
  ...
})

add ng2ds-preloader tags somewhere on outer level of app html i.e. a router-outlet level

//some app.component.html
<ng2ds-preloader></ng2ds-preloader>
<router-outlet></router-outlet>

import Ng2dsPreloaderService into a component you want to run it in i.e. some app.component.ts

import { Ng2dsPreloaderService } from 'ng2ds-preloader';

@Component ({
    ...
})
export class AppComponent {
    constructor( private ng2dsPreloader:Ng2dsPreloaderService ) {}
}

call method to display preloader i.e. you can call this on constructor or ngOnInit

this.ng2dsPreloader.setLoading();

call method to hide preloader i.e. on ngFor list populate or after an interval poll

this.ng2dsPreloader.setLoadingComplete();

dev info :

node -v
v7.2.0

npm --version
3.10.9

windows 10