Expandable table (show more/less)

Question

I was looking a bit around, but I seem not to find the right thing I was looking for. I'm having a quite long table, which I would like to shorten a bit. Basically I'd like display only the first 5 entries and offer a 'show more'-button. I know how to implement it, but maybe there is a ng-component already out there.

In fact I've found this question: http://stackoverflow.com/questions/36673835/angular2-show-more-in-nested-ngfors — tschaka1904, Feb 28 '17 at 13:04
Similar answer from 2 days ago http://stackoverflow.com/questions/42458664/how-to-show-1-element-in-ngfor-in-angular2/42458755#42458755 — Günter Zöchbauer, Feb 28 '17 at 13:26

score 1 · Answer 1 · answered Feb 28 '17 at 13:24

<button (click)="showAll = !showAll">
    <span *ngIf="showAll == false" >show all</button></span>
    <span *ngIf="showAll == true">show all</button></span>
</button>
<table>
    <tr *ngFor="let item of items, let i = index" *ngIf="showAll(i) === true">

    </tr>
</table>

showAll : boolean = false;
showAll(index : number){
    return this.showAll ? true : ((index > 5) ? false : true);
}

score 1 · Accepted Answer · answered Feb 28 '17 at 13:57

1

show = someNumber; // 5

<tr *ngFor="let item of items |slice:0:showlet i=index">
  <div *ngIf="i == someNumber && show" (click)="show = items.length"></div>
</tr>

answered Feb 28 '17 at 13:57

Yoav Schniederman

5,253
3
28
32

Expandable table (show more/less)

2 Answers2