Is there any way I can use first 5 results from *ngFor in angular rendering and display in browser and remaining can load as time progress

Question

I need a solution for my application where I'm displaying information of users from an array of objects in card design. I have array size of 100 and it can grow even more. So the problem is that whenever page load it takes 3,5 seconds to render the all card components in *ngFor directive. and I want to show at least 5 cards of user in first go when user goes to that url, and remaining can load eventually as user scrolls for them. I have seen different approaches for the same as none of them fits in this criteria this is using trackBy in *ngFor but my data do not change I have array of more than 100 users. this is link for *ngFor usage may be it give you help.

                        <ng-container *ngFor="let user of userList">
                            <app-display-user
                                [userDetail]="user"
                                [sectionDivisionEnable]="sectionDivisionEnable"
                                [isTileView]="isTileView"
                                (selectUser)="onSelect($event)"
                            ></app-display-user>
                        </ng-container>

Answer 1

You could do something like the following, as to how you wish to load more you can choose how you wish to increment that number, i have just used a button for simplicity. This assumes you don't have access to the API though (if you are pulling this data from an api), if you do I would suggest you implement pagination there instead.

<ng-container *ngFor="let user of userList; let i = index">
   <app-display-user
     *ngIf="i < currentValueToShow"
     [userDetail]="user"
     [sectionDivisionEnable]="sectionDivisionEnable"
     [isTileView]="isTileView"
     (selectUser)="onSelect($event)"
   ></app-display-user>
</ng-container>

<button (click)="currentValueToShow = currentValueToShow + 5">Show More</button>

currentValueToShow: number = 5;