How to ngFor an array with an object that contains a key with an array that contains objects? - angular2-template

Question

I am trying to loop through an array that contains a key with an array with objects as the value. Here is the component that contains an array
sidemenu-links.ts
import { SideMenuLink } from './sidemenu-link';
export const SIDEMENULINKS: SideMenuLink[] = [
{
"linkTitle": "Getting Started",
"linkRoute": "introduction",
"subLinks": [
{
"linkTitle": "Introduction",
"linkRoute": "introduction"
},
{
"linkTitle": "Download",
"linkRoute": "download"
},
{
"linkTitle": "Contents",
"linkRoute": "contents"
},
{
"linkTitle": "Browser & devices",
"linkRoute": "browser-and-devices"
},
{
"linkTitle": "JavaScript",
"linkRoute": "javascript"
},
{
"linkTitle": "Theming",
"linkRoute": "theming"
},
{
"linkTitle": "Build tools",
"linkRoute": "build-tools"
},
{
"linkTitle": "Webpack",
"linkRoute": "webpack"
},
{
"linkTitle": "Accessibility",
"linkRoute": "accessibility"
}
]
},
{
"linkTitle": "Layout",
"linkRoute": "layout",
"subLinks": []
},
{
"linkTitle": "Content",
"linkRoute": "content",
"subLinks": []
},
{
"linkTitle": "Components",
"linkRoute": "components",
"subLinks": []
},
{
"linkTitle": "Utilities",
"linkRoute": "utilities",
"subLinks": []
},
{
"linkTitle": "Extend",
"linkRoute": "extend",
"subLinks": []
},
{
"linkTitle": "Migration",
"linkRoute": "migration",
"subLinks": []
},
{
"linkTitle": "About",
"linkRoute": "about",
"subLinks": []
},
]
This is the sidemenu.component
sidemenu.component.ts
import { Component, OnInit } from '#angular/core';
import { NavLink } from '../nav-link';
import { SIDEMENULINKS } from '../sidemenu-links';
#Component({
selector: 'app-sidemenu',
templateUrl: './sidemenu.component.html',
styleUrls: ['./sidemenu.component.scss']
})
export class SidemenuComponent implements OnInit {
sideMenuLinks = SIDEMENULINKS;
linkSelected: NavLink;
constructor() { }
expandLink(link:any): void {
this.linkSelected = link;
}
ngOnInit() {
}
}
Here is the sidemenu.component.html that where I am trying to use the *ngFor
sidemenu.component.html
<div class="side-menu-container #sidemenucontainer">
<ul>
<li *ngFor="let link of sideMenuLinks">
<div class="nav-link" [class.selected]="link === linkSelected" (click)="expandLink(link)">{{link.linkTitle}}</div>
<div *ngIf="link === linkSelected">
<div class="nav-link" *ngFor="let link of sideMenuLinks">{{link.subLinks.linkTitle}}</div>
</div>
</li>
</ul>
</div>
When I run it, and I click on any of the side links it opens up with the for the linktitle, but the text for the 's are all blank.

Answer 1

You just need to include the subLinks array in your nested *ngFor. Here is a simplified StackBlitz Demo of the code working with your object structure and html.
<div class="side-menu-container #sidemenucontainer">
<ul>
<li *ngFor="let link of sideMenuLinks">
<div class="nav-link" [class.selected]="link === linkSelected" (click)="expandLink(link)">{{link.linkTitle}}</div>
<div *ngIf="link === linkSelected">
<div class="nav-link" *ngFor="let sub of link.subLinks">{{sub.linkTitle}}</div>
</div>
</li>
</ul>
</div>