Integration

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

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

@Component({
  selector: 'app',
  template: `
   <ng-container *ngIf="progressRef.state$ | async; let state">
      <mat-progress-bar *ngIf="state.active" [value]="state.value"></mat-progress-bar>
   </ng-container>
  `
})
export class App 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();
  }
}

In this case you don't need to use <ng-progress> in your template :)

See Integration stackbliz