App-Loader

A customizable loader for Angular apps, it can intercept any request and display loader automatically.

Features

<input checked="" disabled="" type="checkbox"> Automatically show loader for router events.
<input checked="" disabled="" type="checkbox"> Automatically show loader for http requests.

Quickstart

Clone the project

$ git clone https://github.com/ahmedbhl/app-loader.git
$ cd app-loader
$ npm i
$ npm start

or using CLI to start project after install

$ ng serve

Installation via NPM

Install app-loader via NPM, using the command below. (soon will be published on npm repository)

$ npm install --save app-auto-loading

# Or Yarn

$ yarn add app-auto-loading

link to th repo : https://www.npmjs.com/package/app-auto-loading

Automatic

you need to import the LoaderModule and the LoaderInterceptor if you need activate display the loader automaticly for each request http.

@NgModule({
  imports: [
    ...
    LoaderModule,
  ],
  exports: [LoaderModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoaderInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

Manual :

All what you need just to import the service LoaderService in the constructor of in the component where you want to display loader.

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent {
    constructor(private readonly loaderService: LoaderService) { 
        this.loaderService.isLoading.next(true) // Display
        this.loaderService.isLoading.next(false) // Hide
    }

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

If you like app-loader, please give it a ⭐

Package detail

app-auto-loading

readme