Angular 5 Expand/Collapse list

Question

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 ?

Solution 1

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>

Solution 2

You can use Expansion component, it's pretty straight forward

Comments

[redux17]

Perfect that's it. Thanks

[InformatikBabo]

The second <mat-expansion-panel-header> tag should be a closing tag: </mat-expansion-panel-header>