Integration (legacy)

You can integrate any progress bar or spinner by subscribing to NgProgressRef.state, here is an example of using Material progress bar

import { Component, OnInit, OnDestroy } from '@angular/core';
import { NgProgressModule, NgProgress, progressRef } from 'ngx-progressbar';

@Component({
  selector: 'custom-progress-bar',
  template: `
   <ng-container *ngIf="progressRef.state | async as state">
      <mat-progress-bar *ngIf="state.active" [value]="state.value"></mat-progress-bar>
   </ng-container>
  `,
  standalone: true,
  imports: [NgProgressModule]
})
export class CustomProgressBar implements OnInit, OnDestroy {

  progressRef: NgProgressRef;

  constructor(private ngProgress: NgProgress) {
  }

  ngOnInit() {
    this.progressRef = this.ngProgress.ref();

    // Progress bar actions (optional)
    this.progressRef.start();
    this.progressRef.complete();
    this.progressRef.set();
    this.progressRef.inc();
    
    // Progress bar events (optional)
    this.progressBar.started.subscribe(() => this.onStarted());
    this.progressBar.completed.subscribe(() => this.onCompleted());
  }

  ngOnDestroy() {
    // Destroy the progress bar ref
    this.progressRef.destroy();
  }
}