Question: I have the following code (simplified in head - not tested)

```
<div class="table">
  <div *ngFor="let item of list" class="row">
    {{ item.id }} {{ item.name }}
  </div>
</div>

<button (click)="more = !more">{{ more ? 'less':'more' }}</button>

```

I want to show only the first 3 list items at the beginning - and when user clicks "more", I want to show all the list items. How to do it?

UPDATE
------

More details about performance for this case are [here](https://stackoverflow.com/questions/59330025/is-there-a-difference-between-using-slice-in-ngfor-directly-or-by-pipe) and [here](https://stackoverflow.com/questions/59331157/which-approach-for-ngfor-is-better-ng-container-or-pipe-slice)

Answer: 
Another approach using the [SlicePipe](https://angular.io/api/common/SlicePipe):

```html
<div class="table">
  <div *ngFor="let item of list | slice:0:(more ? undefined : 3)" class="row">
    {{ item }}
  </div>
</div>

<button (click)="more = !more">{{ more ? 'less':'more' }}</button>

```

Also, use `of` instead of `in` with `*ngFor`.
You can use [slicePipe](https://angular.io/api/common/SlicePipe) to create a new array containing a subset an array.

```html
<div class="table">
  <div *ngFor="let item of (more ? list : (list|slice:0:3))" class="row">
      {{ item.id }} {{ item.name }}
  <div>
</div>

<button (click)="more = !more">{{ more ? 'less' : 'more' }}</button>

```