Nested lists in angular material

Question

Can you nest Lists in Angular Material?

I haven't seen any examples in the documentation.

I guessed that I should use a multiline list, but I'm doing something wrong.

Btw I've seen this question, it's for an older version of the framework. — RaidenF
– RaidenF, Commented Apr 27, 2018 at 21:56
So you have the answer? stackblitz.com/edit/angular-nnkg3h-xppmzz — Vega
– Vega, Commented Apr 28, 2018 at 7:26

RaidenF · Accepted Answer · 2018-10-05 13:20:34Z

35

As indicated by @Vega in the comments, you can't nest a <mat-list> under a <mat-list-item>, but if you ngFor another div that contains them both, it's still ok, and the <mat-list> line height is correct.

Here is an example by @Vega: https://stackblitz.com/edit/angular-nnkg3h-xppmzz

<mat-list>
    <ng-container *ngFor="let item of items">
        <mat-list-item>{{item.name}}</mat-list-item>
        <mat-list style="margin-left:30px;">
            <div *ngFor="let subItem of item.subItems">
                <mat-list-item>{{ subItem.name }}</mat-list-item>
            </div>
        </mat-list>
    </ng-container>
</mat-list>

edited Oct 5, 2018 at 13:20

answered Apr 28, 2018 at 9:16

RaidenF

3,5395 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dcode22 · Accepted Answer · 2021-06-21 15:10:04Z

2

There is now an Angular Material "tree" component, which is basically a list of nested lists similar to a file structure. If that it what you are looking for you can find it here: https://material.angular.io/components/tree/overview

answered Jun 21, 2021 at 15:10

Dcode22

974 bronze badges

Collectives™ on Stack Overflow

Nested lists in angular material

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related