In my Angular 2 project, I encountered a situation where I needed to iterate through ngFor based on child elements. My component should be able to render a list based on the input provided. Here is an example of the data structure:
[
{
name: 'ABCD',
child:[
name: 'A1',
child:[
name: 'A1.1',
child:[....]
]
]
}
]
I was able to render this structure inside my template by using component lifecycle ngOnInit and manipulating the DOM. Although it works, I am wondering if there is another way in Angular 2 to achieve this without directly manipulating the DOM. Perhaps using ngFor within the template or some other method. I have tried various approaches but have not had any success.
UPDATE: Attempted DOM manipulation
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'multiple-drop-down',
template: `
<div class="dropdown">
<button id="dLabel" type="button" class="btn btn-primary"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{selected.size}} item selected<span class="caret"></span>
</button>
<ul class="dropdown-menu treeview" aria-labelledby="dropdownMenu">
<li id="item-lists">
<a href="javascript:void(0);" (click)="toggleItemSelect($event)">
<input (change)="selectAll($event)" type="checkbox" id="checkbox-select-all">
<label for="tall" class="custom-unchecked">Select All</label>
</a>
</li>
</ul>
</div>
`,
})
export class MultipleDropDownComponent implements OnInit {
menuItemList: Array<MenuObject>;
selected: Set<string>;
constructor() {
this.selected = new Set<string>();
this.menuItemList = [
{ name: 'item 1', id: 'A', child: [
{ name: 'item 1.1', id: 'A1', child: [
{ name: 'item 1.11', id: 'Aa1', child: []},
{ name: 'item 1.12', id: 'Aa2', child: []},
{ name: 'item 1.13', id: 'Aa3', child: []}
]},
{ name: 'item 1.2', id: 'A2', child: []}]},
{ name: 'item 2', id: 'B', child: []},
{ name: 'item 3', id: 'C', child: []},
{ name: 'item 4', id: 'D', child: []}];
}
ngOnInit() {
// calling render method to populate dropdown values
this.renderChildElements('item-lists', this.menuItemList , 'first');
}
renderChildElements(id: string, items: MenuObject[], key: string): void {
let parent = this.createULElement(id, key);
items.forEach((element: MenuObject) => {
let Li = document.createElement('li');
Li.setAttribute('id', element.id);
Li.innerHTML = `<a href="javscript:void(0);"
(click)="toggleItemSelect($event)">
<input type="checkbox" name="` + element.name + `"
id="` + element.id + `" (click)="toggleMultiSelect($event, ` + element + `)">
<label for="tall-1" class="custom-unchecked">` + element.name + `</label>
</a>`;
document.querySelector('#' + parent).appendChild(Li);
// this condition is responsible for recurrsion process
if ( element.child.length > 0 ) {
this.renderChildElements(element.id, element.child, element.id);
}
});
}
createULElement(parentId: string, childId: string): string {
let ulId = childId + 'ul';
let newUl = document.createElement('ul');
newUl.setAttribute('id', ulId);
document.querySelector('#' + parentId).appendChild(newUl);
return ulId;
}
}
export interface MenuObject {
id: string;
name: string;
child?: MenuObject[];
}