So I’m calling my API through my ngOnInit:
ngOnInit() {
this.http
.get<Config>('http://localhost:5000/api/user/announcements')
.subscribe((data) => {
this.information = data.announcements;
this.datalength = data.announcements.length;
});
}
and my html looks like this:
<ion-card [@flipInX]="flipInX" class="list" *ngFor="let item of information | slice:0:slice;" text-wrap>
<ion-card-header text-wrap>
<h2>{{item.title}}</h2>
</ion-card-header>
<ion-card-content style="margin-top: -20px; margin-bottom: -25px; font-size: 16px;">
Date posted: {{item.date}}
</ion-card-content>
<button ion-button clear end style="float: right;" (click)="showDetails(item.title, item.date, item.content)">View</button>
</ion-card>
I noticed that it takes quite a while to display my data, which makes for a bad user experience. How do I resolve this so that at least the initial items get displayed while the rest load up?