My is not showing the loading process. Here is my code:
<div class="container"
fxLayout="row"
fxLayout.sm="column"
fxLayout.xs="column"
fxLayoutAlign.gt-md="space-around center"
fxLayoutGap="10px"
>
<mat-card *ngIf="dish" fxFlex>
<mat-card-header>
<div mat-grid-avatar></div>
<mat-card-title>
<h3>{{dish.name|uppercase}}</h3>
</mat-card-title>
</mat-card-header>
<img mat-card-image src={{dish.image}} alt={{dish.name}}/>
<mat-card-content>
<p>{{dish.description|lowercase}}</p>
</mat-card-content>
</mat-card>
<div fxFlex [hidden]="dish">
<mat-spinner><h4>Loading ... Please Wait </h4></mat-spinner>
</div>
<mat-card *ngIf="promotion" fxFlex>
<mat-card-header>
<div mat-grid-avatar></div>
<mat-card-title>
<h3>{{promotion.name|uppercase}}</h3>
</mat-card-title>
</mat-card-header>
<img mat-card-image src={{promotion.image}} alt={{promotion.name}}/>
<mat-card-content>
<p>{{promotion.description|lowercase}}</p>
</mat-card-content>
</mat-card>
<div fxFlex [hidden]="promotion">
<mat-spinner></mat-spinner><h4>Loading ... Please Wait </h4>
</div>
<mat-card *ngIf="leader" fxFlex>
<mat-card-header>
<div mat-card-avatar></div>
<mat-card-title>
<h3>{{leader.name|uppercase}}</h3>
</mat-card-title>
</mat-card-header>
<img mat-card-image src={{leader.image}} alt={{leader.name}}/>
</mat-card>
<div fxFlex [hidden]="leader">
<mat-spinner></mat-spinner><h4>Loading ... Please Wait </h4>
</div>
</div>
Top comments (0)