How to iterate over an array for only some objects using ngFor in angular 2

Question

I iterate over an array with 6 objects and use ngFor, where I want the loop to be only up to 4 elements. How to do it?

<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 the loop from the 4th record to the 6th record in another div .. How can I start from the 4th record ??

Answer 1

You can use slice pipe with start and end parameter. A start parameter is required, and the final parameter is optional.

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

Answer 2

You can grab the index and then make it less than 4

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

I really have not tested the code, but you can find many examples here in stackoverflow, do more research ...

Angular 2: how to apply a constraint to * ngFor?

More about filters ... How to apply filters to * ngFor

Answer 3

A simple solution:

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