Html nodes created dynamically, onclick listener of button doesn't work

[Khadeeja Basharat]

I am creating HTML nodes dynamically from a component. My HTML node has a button. The onclick listener doesn't work on that except I add the function in index.html.

I don't need it in index.html. I have tried adding an onclick event by fetching the button on the basis of id and then, binding the function with one click of that button.

But it doesn't work at all. Is there an easy way to handle the onclick listener of dynamic nodes on canvas?

[Balasubramanian Manikandan]

We rendered a sample for you requirement, where you can customize your code in TS file itself. Refer to the below mentioned sample and documentation link.

Sample:

https://stackblitz.com/edit/angular-b6jqyp-sybcac?file=app.component.html,app.component.ts

Documentation:

https://ej2.syncfusion.com/angular/documentation/diagram/shapes#html-node-with-template

[Khadeeja Basharat]

Hi

I have added a button whose listener I am trying to handle. Can you please help me with this? The button was added in the HTML node ("Click me").

https://stackblitz.com/edit/angular-b6jqyp-p7rhhw?file=app.component.ts

[Gobinath Dhamotharan]

Hi Khadeeja,

In the diagram, a button for each HTML node must be provided as either a string content or a ng-template in order to cause the click event to be fired. Please refer to the below code and sample for your reference.

Code snippet

app.component.html :

 

<ng-template #nodeTemplate let-data>

            <ng-container>

              <div

                style="width:85px;height:85px;background:blue"

                (click)="button()"

              >

                <button>Click me</button>

              </div>

            </ng-container>

    </ng-template>

 

app.component.ts :

 

  public button() {

    this.diagram.nodes[0].shape = { type: 'Basic' };

    this.diagram.nodes[0].style = { fill: 'red' };

    this.diagram.dataBind();

  }

 

Documentation:

https://ej2.syncfusion.com/angular/documentation/diagram/shapes#html-node-with-template

Sample

https://stackblitz.com/edit/angular-b6jqyp-6qaetz?file=app.component.html

Regards,

Gobinath.

[Khadeeja Basharat]

We cannot use ng-template with our current structure. Can you share an example of string content?

[Balasubramanian Manikandan]

If we render HTML content as a string, the events defined in html will not be triggered. If you need a event to be triggered, you should use ng-template to achieve your requirement. We have created a sample in which we rendered html node with string content. Refer to the below-mentioned sample and documentation.

Sample:

https://stackblitz.com/edit/angular-b6jqyp-ovsgfq?file=app.component.html,app.component.ts

Documentation:

https://ej2.syncfusion.com/angular/documentation/diagram/shapes#html