Skip to content

Router events

Murhaf Sousli edited this page Oct 6, 2018 · 16 revisions

Overview

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

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.forRoot(),
    NgProgressRouterModule.forRoot()
  ],
})

And just add the progress bar component in your template

<ng-progress></ng-progress>

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

Clone this wiki locally