Je charge les données dans ma table des matières comme ça:
ngOnInit(){ return this.annuairesService.getMedecins().subscribe(res => this.dataSource.data = res);}
Je veux montrer le spinner quand est en train de charger: <mat-spinner ></mat-spinner>
J'essaie : showSpinner: boolean = true;
ngOnInit(){ return this.annuairesService.getMedecins()
.subscribe(res => this.dataSource.data = res);
this.dataSource.subscribe(() => this.showSpinner = false }
mais j'ai cette erreur:
src/app/med-list/med-list.component.ts(54,21): error TS2339: Property 'subscribe' does not exist on type 'MatTableDataSource<{}>'.
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>
<mat-card *ngIf="isLoading"
style="display: flex; justify-content: center; align-items: center">
<mat-progress-spinner
color="primary"
mode="indeterminate">
</mat-progress-spinner>
</mat-card>
table.component.ts
isLoading = true;
dataSource = null;
ngOnInit() {
this.annuairesService.getMedecins()
subscribe(
data => {
this.isLoading = false;
this.dataSource = data
},
error => this.isLoading = false
);
}
Définissez showSpinner
sur true lorsque vous commencez à demander vos données et définissez-la sur false lorsque vous les recevez (alias, dans la subscribe
de votre méthode de service)
ngOnInit() {
this.showSpinner = true;
this.annuairesService.getMedecins()
.subscribe(res => {
this.showSpinner = false;
this.dataSource.data = res;
});
}