Display items as soon as it gets the first result from http GET


#1

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?