adding a button to a node annotation on drop Angular

[Gergely Szilagyi]

I am trying to add a button to the node annotations. The button would open a popup window showing the details of the node. The user can drop several nodes on the diagram and each node will have its unique details.

Currently I am using the template property of the annotations, however I cannot bind to the (click) event of the button added in the HTML. Also, this breaks the default double click edit functionality of the node.

How do I bind to the (click) event? Is there a better way to add a button on the node (i.e. without breaking the double click edit functionality)?

Thank you

My code:

onDrop(arg: IDropEventArgs): void {
  if (arg.element.shape.type === 'Flow') {
    arg.element.annotations = [{
      template: `<div><p>Test item ${this.draggedNodeNumber}</p><button>Details</button></div>`,
      annotationType: 'Template',
    this.draggedNodeNumber++;
  }
 
}

[Shyam G]

Hi Gergely, 

 

You can create a HTML node to append any HTML content in it. We have created a sample in which we have rendered a HTML node with button and the click event is bind to the button. Please refer to a code example and the sample below. 

 

Code example: 

<ejs-diagram #diagram id="diagram" width="100%" height="640px" [nodes]="nodes">  

                                             <ng-template #nodeTemplate> 

                                                            <ng-container> 

                                                             <div style="background:#6BA5D7;height:100%;width:100%;"><button type="button" (click)="buttonClick($event)" style="width:100px"> button</button></div> 

                                                            </ng-container> 

                                             </ng-template> 

            </ejs-diagram> 

 

//define nodes 

public nodes: NodeModel[] = [ 

     { 

       id: 'Button', 

       width:100, 

       height:100, 

       offsetX:200, offsetY:200, 

       shape: {  

        type:'HTML' 

       } 

     }, 

  

   ] 

 

//button click event 

   buttonClick(args) { 

      alert("click") 

   } 

 

 

Sample: https://stackblitz.com/edit/angular-hgmlvq-iv6khg?file=app.component.ts 

 

Regards, 

Shyam G 

[Gergely Szilagyi]

Hi Shyam,

in the sample you provided, there are 2 nodes with different ids ('Button' and 'GreyButton'), however, I cannot access these ids on the button click event. In my application, each node would have to open a popup window with different data, so I need to have access to the id (or any unique identifier) of the node, on which the button is located, in the click event.

How can I pass down the nodes id to the button located on the node?

Also, in the given sample you put #nodeTemplate on the <ng-template> tag, but I cannot find the nodeTemplate anywhere else in the code (or in the Syncfusion library source code). If I remove it, the nodes disappear, so it definitely has a functionality. What exactly is #nodeTemplate?

Thank you

Gergely

[Aravind Ravi]

Hi Gergely, 

We cannot able to bind the node data in the button click event. However by using diagram selectedItems property we can able to show node data while click on button. When you click on the button of the node the respective node gets selected. In the diagram when any nodes gets selected push the respective node in the selectedItems nodes collection . In the button click event using diagram instance we can get the node through selectedItems. Please find the below code snippet for how to get node id through selected items 

buttonClick(args) { 

     let id: string = this.diagram.selectedItems.nodes[0].id; 

     alert(id); 

   } 

 

Sample: https://stackblitz.com/edit/angular-hgmlvq-hrqfsd 

In the diagram nodeTemplate property is used to define the HTML content of the node. If we set any template in the node template property and any one of the node type is HTML in diagram means then we bind the template define in nodeTemplate to the node.  We have already logged a documentation improvement task to add more information on nodeTemplate . And the documentation will be included on or before the 2020 Volume 2 2020 SP1 release. We will let you know once the documentation gets published in live. 

Regards 

Aravind Ravi 

[Aravind Ravi]

Hi Gergely, 

 

Sorry for the inconvenience caused. We are unable to include the documentation in Volume 2 2020 SP1 release. We will include the documentation on or before the 2020 Volume 3 2020. We will let you know once the documentation gets published in live. 

 

Regards 

Aravind Ravi 

[Aravind Ravi]

Hi Gergely,  

  

Sorry for the inconvenience caused. Due to technical reasons, We are unable to include the documentation in Volume 3 2020. We will include the documentation on or before the 2020 Volume 3 2020 SP1 release. We will let you know once the documentation gets published in live.  

  

Regards  

Aravind Ravi  

[Aravind Ravi]

Hi Gergely,   

   

Sorry for the inconvenience caused. We are unable to publish the publish the documentation in this release. We will include the documentation on or before the 2020 Volume 4 release. We will let you know once the documentation gets published in live.     

   

Regards   

Aravind Ravi   

[Aravind Ravi]

Hi Gergely, 

 

We have added the sample to add the node as an angular component in complex shapes sample in the sample browser in this release. The sample browser has been refreshed and sample has been published in live site. Please find the sample in below link 

 

Sample: https://ej2.syncfusion.com/angular/demos/#/material/diagram/custom-shapes 

 

Regards 

Aravind Ravi