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.
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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With