Usage (legacy)

Installation

Install it with npm

npm i ngx-progressbar

Usage

Example 1: Directly from the template

Import NgProgressModule

import { NgProgressModule } from 'ngx-progressbar';

@Component({
  selector: 'app-root',
  template: `
    <ng-progress #progressBar/>
    <button (click)="progressBar.start()">Start</button>
    <button (click)="progressBar.complete()">Complete</button>
  `,
  standalone: true,
  imports: [NgProgressModule]
})
export class AppComponent {
}

Example 2: Using the component reference with `ViewChild`

import { NgProgressModule, NgProgressComponent } from 'ngx-progressbar';

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

  @ViewChild(NgProgressComponent) progressBar: NgProgressComponent;

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

Example 3: Using `NgProgress` service

import { NgProgressModule, NgProgress, NgProgressRef } from 'ngx-progressbar';

@Component({
  selector: 'app-home',
  template: `
    <ng-progress id="myProgress"/>
  `,
  standalone: true,
  imports: [NgProgressModule]
})
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' });
  }
}