-2

Using Vanilla or jQuery is pretty simple. But I've no clue in Angular.

I need to create a very custom tree view, so I've this...

<div class="tree">
  <div class="root">
    <div class="node 1" (click)="click()"></div>
  </div>
</div>

I'd like to insert node1 into the root and I need also to handle events.

Any clue about how to archive it ?

Marco Jr
  • 6,496
  • 11
  • 47
  • 86
  • Are you try to make a recursive component? https://stackoverflow.com/questions/37746516/use-component-in-itself-recursively-to-create-a-tree – Eliseo Aug 07 '18 at 18:30

2 Answers2

2

Use Renderer2 Service

const div = this.renderer2.createElement('div');
  const text = this.renderer2.createText('Hello world!');

  this.renderer2.appendChild(div, text);
  this.renderer2.appendChild(this.elem.nativeElement, div);


    this.renderer2.listen(this.elem.nativeElement, 'click', () => {
      alert('Click Event From dynamically created Div');
    });

Example:https://stackblitz.com/edit/angular-renderer2-customevent

Chellappan வ
  • 23,645
  • 3
  • 29
  • 60
0

The node1 element has to be an Angular component itself. Then you will import it inside the root component and create it dynamically. That component will have @Output() properties which you can access as a regular variable and subscribe to listen for it's events.

Thyako
  • 1