Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nested lists in angular material

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.

Things that I have tried.

like image 894
Reinstate Monica Avatar asked Apr 27 '18 21:04

Reinstate Monica


2 Answers

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>
like image 78
Reinstate Monica Avatar answered Sep 28 '22 08:09

Reinstate Monica


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

like image 24
Dcode22 Avatar answered Sep 28 '22 10:09

Dcode22