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

html angular ngfor
sudhir picture sudhir · Jun 30, 2016 · Viewed 10.1k times · Source

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??

Answer

muetzerich picture muetzerich · Jun 30, 2016

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>

Related questions

Remove object from array typescript(Angular 2)

I just try to delete object from array in typescript, in angular 2.4.0, let me show the code, its my html file: button type="submit" (click)="addAnotherLanguague()" >Add non native languague</button> <li *ngFor="let languague of …

Read More
Angular dynamic table using ngFor

I would like to know if it is possible to create a dynamic HTML table from JSON data. The amount of columns and headers should change according to the keys in the JSON. For example this JSON should create this …

Read More
Line break in ngFor loop

I have an ngFor that creates several PrimeNG buttons. Right now, the buttons appear directly after each other on the same row - I would like each button to display on its on line vertically. How do you go about …

Read More