Router events

Overview

Use this plugin to start and complete the progress bar with your router navigation.

Installation

NPM

npm i -S @ngx-progressbar/core @ngx-progressbar/router

YARN

yarn add @ngx-progressbar/core @ngx-progressbar/router

Usage

import { RouterModule } from '@angular/router';
import { NgProgressModule } from '@ngx-progressbar/core';
import { NgProgressRouterModule } from '@ngx-progressbar/router';

@NgModule({
  imports: [
    RouterModule.forRoot(...),
    NgProgressModule,
    NgProgressRouterModule
  ],
})

And just add the progress bar component in your template

<ng-progress></ng-progress>

Use NgProgressRouterModule.withConfig({...}) to set the following config

NgProgressRouterConfig API

Name	Default	Description
id	root	Progress bar ID.
delay	0	The delay before completing the progress bar in ms.
startEvents	[NavigationStart]	Router events that starts the progressbar.
completeEvents	[NavigationEnd, NavigationCancel, NavigationError]	Router events that completes the progressbar.

See routing stackblitz

Custom router events

import { RouterModule, GuardsCheckEnd, GuardsCheckStart } from '@angular/router';
import { NgProgressModule } from '@ngx-progressbar/core';
import { NgProgressRouterModule } from '@ngx-progressbar/router';

@NgModule({
  imports: [
    RouterModule.forRoot(),
    NgProgressModule,
    NgProgressRouterModule.withConfig({
      startEvents: [GuardsCheckStart],
      completeEvents: [NavigationEnd],
      delay: 1000,
      id: 'router-progressbar'
    });
  ],
})