angular - how to dynamically show a mat-progress-bar when a button is clicked

Question

Hi I am have about 6000 rows of data I am filtering in my mat-table that takes about 5 seconds to filter when a "Filter" button is clicked. I am trying to show a Mat-Progress-Bar while the function is being called. I have attached a sample stackblitz to try and repro my problem. I want the Mat-Progress-Bar to only show when the "Filter" button is clicked and disappear when the the data is renderded.

https://stackblitz.com/edit/angular-4ttand-8ckvs7?file=src/app/table-basic-flex-example.ts

<button mat-raised-button (click)="filterTable()"> Filter Table on Weight!</button>

<mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-bar>

export class TableBasicFlexExample {
  isLoading = true

filterTable() {
         this.dataSource = this.dataSource.filter((item) => { 
         return Math.floor(item.weight) > 10});
         this.isLoading = false;
      }
}

标签： angularangular-material

Answer 1

Try this.

https://stackblitz.com/edit/angular-4ttand-i6mwao?file=src/app/table-basic-flex-example.ts

PS: Don't forget to delete setTimeout, I used it to "simulate" the time it takes your function to filter.

filterTable() {
    this.isLoading = true
    this.dataSource = this.dataSource.filter((item) => { 
    console.log(Math.floor(item.weight));
    return Math.floor(item.weight) > 10});
    this.isLoading = false;
}