@ngx-loading-bar/router

@ngx-loading-bar/router

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

1. Install @ngx-loading-bar/router

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

2. Import the LoadingBarRouterModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
import { AppComponent } from './app';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(...),

    LoadingBarRouterModule,
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
})
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 {}

4. include the supplied CSS file (or create your own).

• loading-bar.css

Related packages

• @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.
• @ngx-loading-bar/core - Core module to manage the progress bar manually.

Changelog

1.0.0-alpha.18 (2017-11-28)

Bug Fixes

• http: ensure request is cancelled on unsuscribe. (ecea4bf), closes #33

BREAKING CHANGES

• http: http service observables doesn't use subscribe anymore to track request which means you must ensure to subscribe in order to load request

Before

this.http.get('URL');

After

this.http.get('URL').subscribe((v) => {});

<a name="1.0.0-alpha.17"></a>