ngx-loading-bar

The core package provides the base functionality. For specific automation, use these related packages:

• @ngx-loading-bar/router: Automatically displays the loading bar during route navigation.
• @ngx-loading-bar/http-client: Automatically tracks the progress of @angular/common/http requests.
• @ngx-loading-bar/http: Automatically tracks the progress of @angular/http requests.

If you need to differentiate between HTTP and Router loading bars (e.g., showing a spinner for one and a bar for the other), use the ref input or the LoadingBarService.

Using the ref input

Assign a unique reference name to each component:

<!-- Router loading bar -->
<ngx-loading-bar ref="router"></ngx-loading-bar>

<!-- HTTP loading bar -->
<ngx-loading-bar ref="http"></ngx-loading-bar>

Using LoadingBarService

Access a specific instance via useRef(refName) to control its state or observe its progress.

// Select the router loader instance
const state = this.loader.useRef('router');

// Control state
state.start();
state.complete();

// Get the progress value
const value$ = state.value$;

Add the <ngx-loading-bar></ngx-loading-bar> component selector to your main application component template (e.g., AppComponent) to make the loading bar visible during route changes.

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

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

Install the router package using npm to enable automatic loading bar management for Angular router transitions.

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

To enable the loading bar, import LoadingBarModule into your application's root module (usually AppModule).

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

@NgModule({
  imports: [
    ...
    LoadingBarModule,
  ],
})
export class AppModule {}

Install the core package using npm to add the loading bar functionality to your project.

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

Add the <ngx-loading-bar></ngx-loading-bar> component selector to your application's main template (e.g., AppComponent) to make the loading bar visible in the UI.

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

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

You can prevent the loading bar from appearing for specific requests (e.g., long-polling or background syncs).

For HttpClient

Use the NGX_LOADING_BAR_IGNORED token within the request context:

httpClient.get('/status', {
  context: new HttpContext().set(NGX_LOADING_BAR_IGNORED, true),
});

For Router

Pass ignoreLoadingBar: true in the navigation state.

Using navigateByUrl:

this.router.navigateByUrl('/custom-path', {
  state: { ignoreLoadingBar: true },
});

Using routerLink:

<a routerLink="/custom-path" [state="{ ignoreLoadingBar: true }">Go</a>

Install the appropriate packages based on your requirements:

• For HTTP requests (@angular/common/http):

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

• For Router navigation (@angular/router):

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

• For manual management only:

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

Version Compatibility

To use the automatic loading bar for Angular HTTP requests, install the @ngx-loading-bar/http-client package via npm.

npm install @ngx-loading-bar/http-client --save

To enable automatic loading bar support for routing, import LoadingBarRouterModule into your application's root module (usually AppModule). Ensure RouterModule.forRoot() is also present in your imports.

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 {
}

To enable automatic loading bars, add the following providers to your ApplicationConfig:

For HttpClient support: Requires provideHttpClient(withInterceptorsFromDi()) and provideLoadingBarInterceptor().

For Router support: Requires provideLoadingBarRouter().

// app.config.ts
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideLoadingBarInterceptor } from '@ngx-loading-bar/http-client';
import { provideLoadingBarRouter } from '@ngx-loading-bar/router';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptorsFromDi()),
    provideLoadingBarInterceptor(),
    provideLoadingBarRouter(),
  ],
};