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' });
  }
}

NgProgress Component

<ng-progress [direction]="'ltr+'" [min]="20" [max]="1" [speed]="200"  [trickleSpeed]="300"
             [spinner]="true" [spinnerPosition]="'left'" [thick]="false" [meteor]="true"
             [color]="'red'" [ease]="'linear'"></ng-progress>

Name	Default	Description
[id]	root	Progress bar ID (used for multiple progress bars).
[direction]	ltr+	Progress bar direction (`ltr+`, `ltr-`, `rtl+`, `rtl-`).
[trickleSpeed]	300	Progress trickling speed in ms.
[trickleFunc]	Function	A function* that returns the trickling amount.*
[debounceTime]	0	Debounce time before starting the progress bar in ms.
[speed]	200	Transition speed in ms.
[min]	8	Progress initial starting value.
[max]	100	Progress maximum value.
[ease]	linear	Progress ease function.
[spinner]	true	Display spinner.
[spinnerPosition]	right	Spinner position. (`right`, `left`).
[color]	#1B95E0	Progress bar color.
[thick]	false	A thicker size of the progress bar.
[fixed]	true	Progress bar fixed position.
[meteor]	true	Meteor style.
(started)	-	Stream that emits when the progress bar has started.
(completed)	-	Stream that emits when the progress bar has completed.
start()	-	Starts the progress bar.
set(n)	-	Sets a percentage n (where n is between 0-100).
inc(n)	-	Increments by n (where n is between 0-100).
complete()	-	Completes the progress bar.
isStarted	-	Checks if the progress has started.
progress	-	`NgProgressRef` instance of the progress bar.

NgProgressRef Class

Name	Description
NgProgressRef.start()	Starts the progress.
NgProgressRef.set(n)	Sets a percentage n (where n is between 0-100).
NgProgressRef.inc(n)	Increments by n (where n is between 0-100).
NgProgressRef.complete()	Completes the progress.
NgProgressRef.started	Stream that emits when the progress has started.
NgProgressRef.completed	Stream that emits when the progress has completed.
NgProgressRef.isStarted	Checks if the progress has started.
NgProgressRef.state$	Stream that emits when progress has changed.