Show more button in ngFor in angular2

Question

I have a list of over 50 items. I would like to show only the first 10 items, and I would have a button that when clicked shows the next 10 items, and which clicked again, the next 10 items until all is shown.

Is this possible to achieve in angular2?

If so, please enlighten me and the SO community.

Thanks

Answer 1

You can use the slice pipe:

show = 5;

<li *ngFor="let searchResult of searchResults|slice:0:show let i=index">
  {{searchResult.name}}
  <button *ngIf="i==4 && show == 5" (click)="show = searchResults.length">More</button>
</li>

Plunker example

See also

• How to show 1 element in ngFor in angular2?