@ngx-loading-bar/core

@ngx-loading-bar/core

A fully automatic loading bar with zero configuration for angular app (http, http-client and router).

1. Install @ngx-loading-bar/core

  npm install @ngx-loading-bar/core --save

2. Import the LoadingBarModule:

import { NgModule } from '@angular/core';

import { LoadingBarModule } from '@ngx-loading-bar/core';

@NgModule({
  ...
  imports: [
    ...

    LoadingBarModule.forRoot(),
  ],
})
export class AppModule {}

3. Include ngx-loading-bar in your app component:

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    ...
    <ngx-loading-bar></ngx-loading-bar>
  `,
})
export class AppComponent {}

5. Inject/Use LoadingBarService

import { Component } from '@angular/core';
import { LoadingBarService } from '@ngx-loading-bar/core';

@Component({
  selector: 'app',
  template: `
    ...
    <ngx-loading-bar></ngx-loading-bar>
    <button (click)="startLoading()">start</button>
    <button (click)="stopLoading()">stop</button>
  `,
})
export class App {
    constructor(private loadingBar: LoadingBarService) {}

    startLoading() {
        this.loadingBar.start();
    }
    
    stopLoading() {
        this.loadingBar.complete();
    }
}

Related packages

• @ngx-loading-bar/router - Display loading bar when navigating between routes.
• @ngx-loading-bar/http-client - Display the progress of your @angular/common/http requests.
• @ngx-loading-bar/http - Display the progress of your @angular/http requests.

Changelog

2.0.0 (2018-05-06)

Features

• core: remove loading-bar.css (446d76b)
• core: Upgrade to Rxjs 6 and drop support of angular v4. (38eb2c3), closes #70

BREAKING CHANGES

• core: The file loading-bar.css has been removed and not required anymore.
• core: droped Angular 4 support + rxjs version should be updated into

5.6.0-forward-compat or 6.0.

<a name="2.0.0-alpha.1"></a>