Looking to insert a nested JSON into an unordered list using ngFor loop in Angular. Here's the expected output format in HTML:
home.component.html
<div class="col-md-3" id="leftNavBar">
<ul *ngFor="let item of nestedjson">
<li class="parentNav">{{item.name}}</li>
<li class="childData">
<ul>
<li *ngFor="let subItem of item.value">{{subItem}}<span class="pull-right"><input type="checkbox"></span></li>
</ul>
</li>
</ul>
</div>
home.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
nestedjson:any;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.nestedjson = [{"name":"parent1","value":["child11","child12"]},{"name":"parent2","value":["child2"]},{"name":"parent3","value":["child3"]}];
}
}