Angular 2 material nested md-list-item

Question

Using Angular 2 with material design, trying to get nested lists in sidenav I have code like

<md-sidenav #sidenav class="sidenav" mode="over" opened>
    <md-nav-list>
           <md-card class="user-card">
               <md-card-header>
                 <div md-card-avatar class="user-avatar"></div>
               </md-card-header>
           </md-card>
      <md-divider></md-divider>
      <md-list-item *ngFor="let category of ategories">
         <a md-line>{{ category.name }}</a> 
      </md-list-item>
    </md-nav-list>
</md-sidenav>

which works fine and looks something like

Now When i try to nest it, like

<md-sidenav #sidenav class="sidenav" mode="over" opened>
    <md-nav-list>
           <md-card class="user-card">
               <md-card-header>
                 <div md-card-avatar class="user-avatar"></div>
               </md-card-header>
           </md-card>
      <md-divider></md-divider>
      <md-list-item *ngFor="let category of ategories">
         <a md-line>{{ category.name }}</a>
         <md-list-item *ngFor="let subcategory of category.subcategories">
            <a md-line>{{ subcategory.subcategory }}</a>
         </md-list-item>
      </md-list-item>
    </md-nav-list>
</md-sidenav>

It appears like

I want to achieve nested list, probably collapsible. Any idea what am i doing wrong or how to approach this ?

Aishwat Singh · Accepted Answer · 2017-06-05 18:18:44Z

17

Ok, figured it out, if someone in future gets stuck like this.

Do no *ngfor on md-list-item, rather do it on div, like this

            <md-list>
                <div  *ngFor="let category of practice_categories">
                    <md-list-item>{{category.category}}</md-list-item>
                    <md-list style="margin-left:30px;">
                          <div *ngFor="let subcategory of category.subcategories">
                            <md-list-item>{{ subcategory.subcategory }}</md-list-item>
                          </div>
                    </md-list>
                </div>
            </md-list>

which produces something like

Hope this helps someone, someday

answered Jun 5, 2017 at 18:18

Aishwat Singh

4,5093 gold badges30 silver badges50 bronze badges

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

1 Comment

Boo Yan Jiong Over a year ago

maybe use <ng-container> instead of <div>, since ng-container will not be rendered as html element

Layesh Chowdhury · Accepted Answer · 2018-05-29 03:07:34Z

3

For Angular 1.0 use this snippet:

<md-list>
    <div ng-repeat="category in categories">
        <md-list-item>{{category.name}}</md-list-item>
        <md-list style="margin-left:50px;">
            <div ng-repeat="subcategory in category">
                <md-list-item>{{ subcategory.name}}</md-list-item>
            </div>
        </md-list>
    </div>
</md-list>

edited May 29, 2018 at 3:07

answered May 28, 2018 at 19:54

Layesh Chowdhury

514 bronze badges

1 Comment

Gernot Over a year ago

Please add some explanations. Don't just post a possible solution.

Collectives™ on Stack Overflow

Angular 2 material nested md-list-item

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related