Router events

Overview

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

Usage

import { NgProgressRouterModule } from 'ngx-progressbar/router';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(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, NavigationEnd } from '@angular/router';
import { NgProgressRouterModule } from '@ngx-progressbar/router';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      NgProgressHttpModule.withConfig({
        startEvents: [GuardsCheckEnd],
        completeEvents: [NavigationEnd],
        delay: 1000,
        id: 'router-progressbar'
      })
    )
  ]
})

Or

import { RouterModule, GuardsCheckEnd, NavigationEnd } from '@angular/router';
import { NgProgressRouterModule, NG_PROGRESS_ROUTER_CONFIG } from '@ngx-progressbar/router';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(NgProgressHttpModule),
    {
      provide: NG_PROGRESS_ROUTER_CONFIG,
      useValue: {
        startEvents: [GuardsCheckEnd],
        completeEvents: [NavigationEnd],
        delay: 1000,
        id: 'router-progressbar'
      }
    }
  ]
})