How to 'show more' rows using *ngFor

Answer 1

Use <ng-container> (which will not create any additional nodes) as follows

<div class="table">
  <ng-container *ngFor="let item of list; index as i">
    <div *ngIf="i<3 || more" class="row">
      {{ item.id }} {{ item.name }}
    </div>
  <ng-container>
</div>

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

Answer 2

Another approach using the SlicePipe:

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

Answer 3

You can use slicePipe to create a new array containing a subset an array.

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