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: 
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>
Using [`slice`](https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html):

> 
> Creates a new List or String containing a subset (slice) of the elements.
> 
> 
> 

```
array_or_string_expression | slice:start[:end]

```

```
*ngFor="let input of formInputs | slice:0:3"

```

Change your code:

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

```