how do i iterate over multidimensional array using *ngFor in Angular 2. Below is the DOM Wrapper im using:

<li *ngFor="let menuName of menuNames" routerLinkActive="active" [ngClass]="{'has-submenu':menuName.submenu?.length>0 }">
    <a href="#" [routerLink]="menuName.route" *ngIf="!menuName.enableSM"> <i class="glyphicon {{menuName.icon}}"></i><span class="nav-label">{{menuName.name}}</span> </a>
    <a href="#" *ngIf="menuName.enableSM"> <i class="glyphicon glyphicon-list-alt"></i> <span class="nav-label">Pages</span> </a>
    <ul class="list-unstyled" *ngIf="menuName.enableSM">
        <li *ngFor="let subMenuName of menuNames['submenu'] let idx = index;"> <a [routerLink]="subMenuName.route">404</a> </li>
    </ul>
</li>

And the nested array:

menuNames = [{
    name: "Dashboard",
    route: '/home',
    icon: "glyphicon-th-large",
    submenu: [],
    enableSM: false
}, {
    name: "Pages",
    route: '',
    icon: "glyphicon-list-alt",
    submenu: [{
        name: "404",
        route: '/404.html'
    }, {
        name: "Signin",
        route: '/auth/signin'
    }],
    enableSM: true
}];

The second loop does not render at all.

how do i iterate over multidimensional array using *ngFor in Angular 2. Below is the DOM Wrapper im using:

<li *ngFor="let menuName of menuNames" routerLinkActive="active" [ngClass]="{'has-submenu':menuName.submenu?.length>0 }">
    <a href="#" [routerLink]="menuName.route" *ngIf="!menuName.enableSM"> <i class="glyphicon {{menuName.icon}}"></i><span class="nav-label">{{menuName.name}}</span> </a>
    <a href="#" *ngIf="menuName.enableSM"> <i class="glyphicon glyphicon-list-alt"></i> <span class="nav-label">Pages</span> </a>
    <ul class="list-unstyled" *ngIf="menuName.enableSM">
        <li *ngFor="let subMenuName of menuNames['submenu'] let idx = index;"> <a [routerLink]="subMenuName.route">404</a> </li>
    </ul>
</li>

And the nested array:

menuNames = [{
    name: "Dashboard",
    route: '/home',
    icon: "glyphicon-th-large",
    submenu: [],
    enableSM: false
}, {
    name: "Pages",
    route: '',
    icon: "glyphicon-list-alt",
    submenu: [{
        name: "404",
        route: '/404.html'
    }, {
        name: "Signin",
        route: '/auth/signin'
    }],
    enableSM: true
}];

The second loop does not render at all.

• javascript
• arrays
• angular
• typescript

• 3 As a side-note. [ngClass] can be simplified a bit by using [class.name-of-class]="expression" syntax. For more details visit my answer here. – David Walschots Commented Feb 11, 2017 at 21:57
• You are right, its neat way of handling such cases :) – Fahid Mohammad Commented Feb 13, 2017 at 6:53

1 Answer 1

There are some minor issues in your code, typos. Second *ngFor should look like this:

*ngFor="let subMenuName of menuName['submenu']; let idx = index;"

Mind it's menuName not menuNames and there's a semicolon before let idx.