collapsible lists with *ngFor - html

Question

As it looks in the photo, that I want is, when I click show more, I want to expand this row, and show me all sensors in there
I'm using materialize, and my code html is:
<table class="bordered table-bordered" [mfData]="homeboxsp | dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
[(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
<thead style="color:black; background:rgb(207, 235, 245);border:1px solid rgb(190, 190, 190);">
<tr>
<th>
<mfDefaultSorter by="client">Client</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="description">Homebox</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="sensors">Sensors</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of homeboxsp">
<td>{{item.client}}</td>
<td>{{item.description}}</td>
<td>
<ul>
<ul *ngFor="let sensor of item.sensors">
<li>{{sensor.sensor_serial}}</li>
</ul>
</ul>
</td>
</tr>
</tbody>
</table>

Answer 1

you can do this in simple way using ngIf
<ul *ngFor="let sensor of item.sensors;let i = index;">
<li *ngIf="i < value">{{sensor.sensor_serial}}</li>
<button (click)="showmore()">showmore</button>
</ul>
ts
value:number = 2;
showmore(){
let value = this.value;
this.value= value+1;
}
you can modify logic as you want

Answer 2

The SlicePipe is perfect for this kind of situations. It does pretty much the same as the accepted answer with fewer *ngIf needed.
#Component({
selector: 'my-app',
template: `
<div>
<div *ngFor="let val of values | slice:0:visible">{{val}}</div>
<div *ngIf="visible==3" (click)="visible=values.length">show more</div>
<div *ngIf="visible==values.length" (click)="visible=3">show less</div>
</div>
`,
})
export class App {
visible= 3;
values = [1, 2,3,4, 5,6,7,8,9]
constructor() {
}
}
You can see a working example here.
The same principle applies if you want to have multiple lists that expand. You just need to control the visibility for each list separately.
Here's an example of that.
#Component({
selector: 'my-app',
template: `
<div>
<div *ngFor="let group of groups">
<div>{{group.name}}</div>
<div *ngFor="let val of group.values | slice:0:(group.expanded? group.values.length :3)">{{val}}</div>
<div *ngIf="!group.expanded" (click)="group.expanded=true">show more</div>
<div *ngIf="group.expanded" (click)="group.expanded=false">show less</div>
</div>
</div>
`,
})
export class App {
groups = [{name: 'a', values: [1, 2,3,4, 5,6,7,8,9]},{name: 'b', values: [1, 2,3,4, 5,6,7,8,9]}]
constructor() {
}
}
And the working plnkr here.

Answer 3

You can build a simple component that can show just a certain number of sensors, or adjust it to show just certain height:
<td><values-display-cmp [values]="row"></values-display-cmp></td>
Then the component:
#Component({
selector: 'values-display-cmp',
template: `
<ul>
<li *ngFor="let val of shownValues">{{val}}</li>
</ul>
More
`
})
export class ValuesDisplayComponent {
#Input() set values(values) {
this._values = values;
this.shownValues = values.slice(0, 2);
};
open = false;
shownValues = [];
_values = [];
more() {
this.open = true;
this.shownValues = this._values;
}
}
Here's a full example.

Answer 4

Separate your array in 2 parts, and after clicking show more concat them. Seems like not a big deal.