Add a spinner when Mat-table is loading?

Question

I load the data in my material table like that :

ngOnInit(){ return this.annuairesService.getMedecins().subscribe(res => this.dataSource.data = res);} 

I want show the spinner when is loading : <mat-spinner ></mat-spinner>

I try : showSpinner: boolean = true;

ngOnInit(){ return this.annuairesService.getMedecins() .subscribe(res => this.dataSource.data = res); this.dataSource.subscribe(() => this.showSpinner = false }   

but i have this error :

src/app/med-list/med-list.component.ts(54,21): error TS2339: Property 'subscribe' does not exist on type 'MatTableDataSource<{}>'. 

Answer 1

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