[SOLVED] Indeterminate progress bar not working properly

Indeterminate progress bar not working properly

I am using MatProgressBarModule to add a linear indeterminate status bar at end of card-footer. Below is my code -

  <mat-card-footer>
    <ng-content select="dashboard-card-footer"></ng-content>
    <section class="example-section">
    <mat-progress-bar  [mode]="indeterminate"  value="20" bufferValue ="75"> 
    </mat-progress-bar>
    </section>
  </mat-card-footer>

It shows on screen as determinate status bar. I have tried with different modes too i.e. query,buffer. But it only works as a determinate progress bar.

Solution

You should not use [] (it should be used when you want to bind value with any object/variable) for defining mode, as indeterminate is not component variable but only string. Also no need of value & bufferValue. Modify your code as:

<mat-card-footer>
    <ng-content select="dashboard-card-footer"></ng-content>
    <section class="example-section">
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    </section>
</mat-card-footer>