-1

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
  • 5,844
  • 9
  • 38
  • 77
  • 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 வ
  • 18,942
  • 3
  • 21
  • 52
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