Usage

Installation

NPM

npm i -S @ngx-progressbar/core

YARN

yarn add @ngx-progressbar/core

Usage

Import NgProgressModule

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

@NgModule({
  imports: [
    NgProgressModule
  ]
})

You can set global config for all progress bars using NgProgressModule.withConfig(config).

After you imported NgProgressModule, you can now use the component <ng-progress> and there are 3 ways to use the progress bar:

Example 1: Directly from the template

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

Example 2: Using the component reference with `ViewChild`

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

  @ViewChild(NgProgressComponent) progressBar: NgProgressComponent;

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

Example 3: Using `NgProgress` service

@Component({
  selector: 'app-home',
  template: `
    <ng-progress id="myProgress"></ng-progress>
  `
})
export class HomeComponent {

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

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

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

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