Struggling to display intricately nested list elements,
Take a look at the JSON configuration below:
listItems = {
"text": "root",
"children": [{
"text": "Level 1",
"children": [{
"text": "Level 2",
"children": [{
"text": "Level 3",
"children": [],
"type": "unordered-list-item"
}],
"type": "unordered-list-item"
}],
"type": "unordered-list-item"
}],
"type": "unordered-list-item"
}
The HTML structure for my component is shown below:
<ul *ngIf="listItems.type === 'unordered-list-item' && listItems.children.length > 0">
<li *ngFor="let child of listItems.children">
{{ child.text }}
<bw-list *ngIf="child.type === 'unordered-list-item'" [listItem]="child"></bw-list>
</li>
</ul>
When children are present, the component should iterate and render them.
Component.ts
export class AppComponent {
@Input() listItem: any;
public listItems = {
"text": "root",
"children": [{
"text": "Level 1",
"children": [{
"text": "Level 2",
"children": [{
"text": "Level 3",
"children": [],
"type": "unordered-list-item"
}],
"type": "unordered-list-item"
}],
"type": "unordered-list-item"
}],
"type": "unordered-list-item"
};
}
The issue faced currently is the rendering of endless bullet points. Seeking assistance on this matter.
Explore the project further via this link.