Usage

Installation

NPM

$ npm i -S @ngx-progressbar/core

YARN

yarn add @ngx-progressbar/core

stackblitz

Usage

Import NgProgressModule in the root module

import { NgProgressModule } from '@ngx-progressbar/core';

@NgModule({
  imports: [
    NgProgressModule.forRoot(config)
  ]
})

config is an optional parameter to set a global config for the progress bar(s).

Example 1: Accessing the progress bar from the template

<ng-progress #progressBar></ng-progress>
<button (click)="progressBar.start()">Start</button>
<button (click)="progressBar.complete()">Complete</button>

Example 2: Accessing the progress bar from parent component

@Component({
  selector: 'app-home',
  template: `
    <ng-progress></ng-progress>
  `
})
export class HomeComponent implements AfterViewInit {

  @ViewChild(NgProgressComponent) progressBar: NgProgressComponent;

  ngAfterViewInit() {
    this.progressBar.start();
  }
}  

Example 3: Accessing the progress bar from anywhere

@Component({
  selector: 'app-header',
  template: `
    <ng-progress></ng-progress>
  `
})
export class HeaderComponent {
}

@Component({
  selector: 'app-home'
})
export class HomeComponent {

  progressRef: NgProgressRef;
  constructor(private progress: NgProgress) {
  }
  
  ngOnInit() {
    this.progressRef = progress.ref();
  }

  startLoading() {
    this.progressRef.start();
  }

  completeLoading() {
    this.progressRef.complete();
  }

  changeProgressColor() {
    this.progressRef.setConfig({ color: 'green' });
  }
}