How to limit number of items to get displayed in ngFor?

Question

I want the display only the first 3 items from a list using *ngFor

On my component,

formInputs: any = [
{name:'foo'},
{name: 'bar'},
{name: 'buzz},
{name: 'dhsfk'},
{name: 'sadsd'}
]

On my template,

<div class="form-group label-floating" *ngFor="let input of formInputs">
{{input.name}}
</div>

And note that, I want to apply the change only in the template itself not in the component.

Answer 1

You can use the slice pipe for that

<div class="form-group label-floating" *ngFor="let input of formInputs | slice:0:3">
  {{input.name}}
</div>

https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html