How to appendchild dynamically using renderer2 in angular 4

Question

I am new to angular 4, Need to add child under child using html list.

@Component({

  selector: 'my-app',

  template:` 
    <div>
      <ul #root (click)="getChild($event)">root</ul> 
    </div>
`
})

export class App implements OnInit {

  name:string;

  @ViewChild('root') root;
  constructor( private renderer : Renderer2) {

  }

  ngOnInit() {

  }

  getChild(evt) {

    let li = this.renderer.createElement('li');
    let span = this.renderer.createElement('span');
    let text = this.renderer.createText('Child');
    this.renderer.appendChild(span, text);
    this.renderer.appendChild(li, span);
    this.renderer.appendChild(this.root.nativeElement, li)
  }
}

How to bind click event dynamically in <li>, when click triggered should get new child in <ul> under the respective parent <li>. Tree should dynamically grow n numbers.

expected result :

<div>
     root
   <ul>
     <li>
         <span> child </span>
         <ul>
            <li>
                <span> child </span>
                <ul>
                    <li>
                       <span> child </span>
                    </li>
                </ul>
            </li>
         </ul>
     </li>             
  </ul>
</div>

Whenever I click on the <li>, should render respective child in above format with event.

Solutions will be appreciated. Thanks.

Answer 1

I've put together the demo from the following link

Check demo

What I did was to create a component called NodeComponent which will create the nodes of your tree.

Node.component.ts

@Component({
  selector: 'my-node',
  template: `
    <span>{{text}}</span>
    <button (click)="addChild()">Add Child!</button>
    <ul>
      <li *ngFor="let child of children">
        <my-node [text]="child"></my-node>
      </li>
    </ul>
  `
})
export class NodeComponent implements OnInit {

  @Input() text;
  children: string[];

  ngOnInit() {}

  addChild() {
    if (!this.children) {
      this.children = [];
    }
    const childText = `${this.text} - ${this.children.length + 1} - child`;
    this.children.push(childText);
  }
}

It takes an input, text and contains a button to add more children. When user clicks on button, it pushes another text to children array which will make angular add another my-node component to DOM.

In another component, you use it as follows

<my-node text="root"></my-node>

Edit

Check this second demo with nested json object

To create a tree from a nested json object, let's refactor NodeComponent to the following

import { Component, OnInit, Input } from '@angular/core';

export interface NodeItem {
  text: string;
  children?: NodeItem[];
}

@Component({
  selector: 'my-node',
  template: `
    <span>{{options.text}}</span>
    <button (click)="addChild()">Add Child!</button>
    <ul>
      <li *ngFor="let child of options.children">
        <my-node [options]="child"></my-node>
      </li>
    </ul>
  `
})
export class NodeComponent implements OnInit {

  @Input() options: NodeItem;

  ngOnInit() {}

  addChild() {
    if (!this.options.children) {
      this.options.children = [];
    }
    const childText = `${this.options.text} - ${this.options.children.length + 1} - child`;
    this.options.children.push({text: childText});
  }
}

And, to use it within another component you simply do following

<my-node [options]="options"></my-node>

In component ts

options: NodeItem;

ngOnInit() {
  this.options = {
    text: 'root',
    children: [{
      text: 'root child 1',
    }, {
      text: 'root child 2',
      children: [{
        text: 'root child 2 child 1'
      }]
    }]
  }
}