We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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?


5 Replies

BM Balasubramanian Manikandan Syncfusion Team January 11, 2023 11:14 AM UTC

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



KB Khadeeja Basharat January 11, 2023 12:17 PM UTC

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



GD Gobinath Dhamotharan Syncfusion Team January 12, 2023 01:48 PM UTC

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.



KB Khadeeja Basharat January 12, 2023 02:03 PM UTC

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



BM Balasubramanian Manikandan Syncfusion Team January 13, 2023 06:12 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon