How to loop through array upto only some objects using ngFor in angular 2

Question

I'm looping through an array which has 6 objects and using ngFor where I want to loop only up to 4 elements .. How Can I do that??

<div class="item active" *ngFor="#data of lengthArray">
 content 
</div>

In LengthArray I have 6 but how to loop up to 4 records only??

and also I want to loop from 4th record to 6th record in another div.. How can I start from 4th record??

muetzerich · Accepted Answer · 2017-01-18T10:27:20.550

28

You can use the slice pipe with a start and end parameter. The start parameter is required and the end parameter is optional.

<div class="item active" *ngFor="#data of lengthArray | slice:start[:end]">
  content 
</div>

edited Jan 18 '17 at 10:27

answered Jun 30 '16 at 12:12

muetzerich

can we have condition inside ?like when data.index==1 then start should be 4 ? – sudhir Jun 30 '16 at 12:21

score 4 · Answer 2 · edited May 23 '17 at 10:30

4

You can capture the index and then make it less then 4

<div class="item active" *ngFor="#data of lengthArray;i=index">
    <div *ngIf="i<=4">
        content
    </div>
</div>

I haven't really tested the code but you can find a lot of examples here on stackoverflow, do more researching...

edited May 23 '17 at 10:30

Community

answered Jun 30 '16 at 12:27

Marko

Thank you I applied condition same as above answer slice:[i+1]:[i+4] like that – sudhir Jun 30 '16 at 14:28
2

this will create 4 outer
elements with
's inside, and then an excess number of empty outer
elements
– jiroch Oct 11 '18 at 08:41

score 0 · Answer 3 · answered Feb 08 '18 at 07:58

0

Simple solution:

<tr *ngFor=""let obj of ArrayogObjs;  let i=index">
        <td *ngIf="i<4">
            {{obj.name}}
        </td>
    </tr>

answered Feb 08 '18 at 07:58

Shashwat Gupta

1

this will create 4 elements with 's inside, and then an excess number of empty elements – jiroch Oct 11 '18 at 08:40

3 Answers3