I use material list control for showing nested objects. I created mat list with div but I want add Expand/Collapse Row option here and when I click on row it should show subcategories div ?
<mat-list>
<div *ngFor="let item of chaptersItems">
<mat-list-item>
<a style="cursor: pointer;">
<h4 mat-line>{{item.name}} {{item.description}}</h4>
</a>
</mat-list-item>
<mat-list style="margin-left:30px;">
<div *ngFor="let subItem of item.subChapters">
<mat-list-item>
<a style="cursor: pointer;">
<p mat-line> {{subItem.name}}. {{subItem.description}}</p>
</a>
</mat-list-item>
</div>
</mat-list>
</div>
</mat-list>
How can I implement click function on div or mat-list control ?
You can wrap each item into mat-expansion-panel wrapper as described there: https://material.angular.io/components/expansion/overview
It will looks like that:
<mat-list>
<div *ngFor="let item of chaptersItems">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-list-item>
<a style="cursor: pointer;">
<h4 mat-line>{{item.name}} {{item.description}}</h4>
</a>
</mat-list-item>
<mat-expansion-panel-header>
<mat-list style="margin-left:30px;">
<div *ngFor="let subItem of item.subChapters">
<mat-list-item>
<a style="cursor: pointer;">
<p mat-line> {{subItem.name}}. {{subItem.description}}</p>
</a>
</mat-list-item>
</div>
</mat-list>
</mat-expansion-panel>
</div>
</mat-list>
您可以使用扩展组件,它非常简单
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.