CODEWITHSUNDEEP
angularangular7
Aravin
Aravin

Reputation: 7077

Angular 7 - How to show loader until *ngFor loads the data?

How to show loader until *ngFor loads the data?

<mat-list role="list" *ngFor="let item of channel.channel; let i=index">
    <mat-list-item role="listitem">{{i + 1}}. {{item}}</mat-list-item>
</mat-list>

It is taking the long time to load, how to show loader until data load gets complete?

Upvotes: 0

Views: 2477

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222672

You should have a boolean variable defined in your component level as,

showLoader : boolean = true;

and then, once you get your data, assin the value to false.

this.showLoader = false;

you can use *ngIf on your template you check whether the data is loaded,

<mat-list role="list" *ngIf="!showLoader" *ngFor="let item of channel.channel; let i=index">
     <mat-list-item role="listitem">{{i + 1}}. {{item}}</mat-list-item>
</mat-list>

<mat-spinner *ngIf="showLoader"></mat-spinner>

Upvotes: 2

Alex
Alex

Reputation: 732

You could add *ngIf="channel.channel" to the mat-list and use a mat-spinner underneath with *ngIf="!channel.channel"

For example:

<mat-list role="list" *ngIf="channel.channel" *ngFor="let item of channel.channel; let i=index">
     <mat-list-item role="listitem">{{i + 1}}. {{item}}</mat-list-item>
</mat-list>

<mat-spinner *ngIf="!channel.channel"></mat-spinner>

Upvotes: 2

Related Questions