Add a spinner when Mat-table is loading?
table.component.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- table here ...-->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div *ngIf="isLoading"
style="display: flex; justify-content: center; align-items: center; background: white;">
<mat-progress-spinner
color="primary"
mode="indeterminate">
</mat-progress-spinner>
</div>
table.component.ts
isLoading = true;
dataSource = null;
ngOnInit() {
this.annuairesService.getMedecins()
subscribe(
data => {
this.isLoading = false;
this.dataSource = data
},
error => this.isLoading = false
);
}
Live demo
Set showSpinner
to true when you start requesting your data, and set it to false when you receive it (aka, in the subscribe
of your service method)
ngOnInit() {
this.showSpinner = true;
this.annuairesService.getMedecins()
.subscribe(res => {
this.showSpinner = false;
this.dataSource.data = res;
});
}