Angular NgFor iterate through x objects in array

Question

I want to iterate through the first four objects of an array. I want to use ngFor instead of selecting the first four objects like this:

{{ users[*]?.UserName }}

* being the 0-3

I want to use this:

<div *ngFor="let user of users; let i = index" [attr.data-index]="i"> 
{{user?.UserName}}

This works but displays all users in the array and I only need the first 4 (index 0-3). Is there a way to tell the ngFor something like: i<4?

You can splice the users based on index ``` <div *ngFor="let user of users.splice(0, index); let i = index" [attr.data-index]="i"> {{user?.UserName}}</div> ``` — Ravi Teja Vattem
– Ravi Teja Vattem, Commented Apr 23, 2020 at 13:07

Sayooj V R · Accepted Answer · 2020-04-23 13:11:12Z

1

You can try like this. use ngconainter and ng if for limiting the number of users to 4.

<div *ngFor="let user of users; index as i" [attr.data-index]="i"> 
    <ng-container *ngIf="i<4">
       {{user?.UserName}}
    </ng-container>
</div>

answered Apr 23, 2020 at 13:11

Sayooj V R

2,3652 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hien Nguyen · Accepted Answer · 2020-04-23 13:14:02Z

0

You can use pipe slice:0:3 like below

<div *ngFor="let user of users | slice:0:3; let i = index" [attr.data-index]="i">

    {{user?.UserName}}

Demo https://stackblitz.com/edit/angular-hjgubx

answered Apr 23, 2020 at 13:14

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Collectives™ on Stack Overflow

Angular NgFor iterate through x objects in array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related