How to change an icon in button on click, button is located in the node?

[MM]

Hello everybody,

environment: Angular 7, Syncfusion version 17.3.27

I have couple of questions about diagram options:

1. I would like to know is it possible to change an icon with a button click located in the node? Something like this: https://codepen.io/ulyan/pen/JKPXxd
2. How to use NgClass or directive (*ngIf,  *ngFor, ngStyle) in HTML element, is this even possible? * example
3. Is it possible to edit the label that is located in a node on a hover action? Something like this: https://codepen.io/MeredithU/pen/jcsvx

I have tried all the possibilities to include icons in the project (https://ej2.syncfusion.com/products/icons/index.html).

And some icons are not recognized (for example icon "ebb9" is not recognized. 

How to fix this?

If you can provide me an example of how to do this, I would be grateful.

    * - I have tried to make it work but I have no luck...

  public shape: any = {

    type: 'HTML',

    content: `<div style='background:#6BA5D7;height:100%;width:100%;'>

                  <button id='testButton' type='button' style='width:100px' 

                                       prefixIcon="e-icon e-handup"

                    [ngStyle]="{'background-color':person.country === 'UK' ? 'green' : 'red' }">

                    Test Button in Node

                  </button>

              </div>`

  };

Thank you,

M

[Shyam G]

Hi Maja, 

 

Query	Response
I would like to know is it possible to change an icon with a button click located in the node? Something like this: https://codepen.io/ulyan/pen/JKPXxd How to use NgClass or directive (*ngIf,  *ngFor, ngStyle) in HTML element, is this even possible? * example	Your requirement can be achieved using html template only. Currently, we don’t have template support for the html node. We have logged “Template support for HTML node” as a feature and you can track the status of the feature from the below link.   Feedback link:   https://www.syncfusion.com/feedback/10580/template-support-for-html-node-angular
Is it possible to edit the label that is located in a node on a hover action? Something like this: https://codepen.io/MeredithU/pen/jcsvx	We have created a sample in which we have set an annotation for the node on mouseOver event. Please refer to a code example and sample below.    Code example:    <ejs-diagram #diagram id="diagram" width="100%" height="700px" [snapSettings]='snapSettings' [getConnectorDefaults]='connDefaults' [getNodeDefaults]='nodeDefaults' (mouseOver)="mouseOver($event)">  </ejs-diagram>    public mouseOver(args: IMouseEventArgs): void {        if(args.actualObject) {           if((args.actualObject as NodeModel).annotations.length > 0) {            //set an annotation content for the node at runtime              (args.actualObject as NodeModel).annotations[0].content = 'Changed Data';          }        }    }      Sample: https://stackblitz.com/edit/angular-lntsho?file=app.component.ts

 

 

Regards, 

Shyam G 

[MM]

Hello, 

Thank you for the quick answer. The example is nice, but how can I show an icon on the mouseOver event and when I click the icon I can edit text.

Is this possible?

Thank you,

M

[Shyam G]

Hi Maja, 

 

Instead of mouseover event, please use our diagram user handles to edit a node annotations at runtime. The user handle icon displayed when we select a node. We have created a sample in which, when we click on a userhandle edit icon, the dialog box opens which contains textbox. You can edit a label in the textbox and update it. Please refer to a code example, sample and help documentation below. 

 

Code example: 

 

<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getConnectorDefaults]='connDefaults' [getNodeDefaults]='nodeDefaults' [layout]='layout' [dataSourceSettings]='data' [snapSettings]='snapSettings' [selectedItems]="selectedItems" [getCustomTool]="getCustomTool"></ejs-diagram> 

 

//define userhandles in selected items 

  public selectedItems: SelectorModel = { 

    constraints: SelectorConstraints.UserHandle, 

    userHandles: this.handles 

  }; 

 

     //Defines the user handle collection for nodes in diagram 

  public handles: UserHandleModel[] = [ 

    { 

            name: 'orgEditHandle', pathColor: 'white', backgroundColor: '#7d7d7d', borderColor: 'white', 

            pathData: 'M 42.65 30.41 L 67.5 53.99 L 41.2 78.73 C 39.41 80.42 37.34 81.27 34.99 81.27 C 32.65 81.27 30.57 80.49 28.78 78.93 L 25.05 82.44 L 0 82.44 L 16.36 67.05 C 14.57 65.36 13.67 63.41 13.67 61.2 C 13.67 58.99 14.57 56.98 16.36 55.16 z M 78.42 25.49 C 78.57 0 78.73 0.01 78.88 0.01 C 81.09 -0.12 83.09 0.66 84.88 2.35 L 97.52 14.04 C 99.17 15.86 100 17.87 100 20.09 C 100 22.29 99.17 24.24 97.52 25.93 L 71.84 50.09 L 46.79 26.51 L 72.47 2.35 C 74.15 0.77 76.13 -0.02 78.42 25.49 z', 

            side: 'Right', offset: 0, horizontalAlignment: 'Center', verticalAlignment: 'Center' 

        },  

  ];  

 

public getCustomTool: Function = this.getTool.bind(this); 

 

public getTool(action: string): ToolBase {  

    let tool: ToolBase; 

     if (action === 'orgEditHandle') {   

       //this block executes while selecting a userhandle 

            let orgEditTool: OrgEditHandleTool = new OrgEditHandleTool(this.diagram.commandHandler); 

            orgEditTool.diagram = this.diagram; 

            orgEditTool.dialog = this.dialog; 

            orgEditTool.textbox = this.textbox; 

            return orgEditTool; 

        }  

    return tool; 

  } 

 

class OrgEditHandleTool extends ToolBase { 

    public diagram: Diagram = null;  

    public dialog: DialogComponent = null; 

    public textbox: TextBoxComponent = null; 

    public mouseDown(args: MouseEventArgs): void {  

        this.inAction = true; 

        super.mouseDown(args); 

    } 

  public mouseUp(args: MouseEventArgs): void { 

    if (this.inAction) { 

      if (this.diagram.selectedItems.nodes.length > 0) {  

        //set a node value in the textbox 

        this.textbox.value =this.diagram.selectedItems.nodes[0].annotations[0].content; 

        //open the dialog 

        this.dialog.show() 

      } 

    } 

    super.mouseUp(args); 

  }  

} 

 

 

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

 

Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/interaction/#user-handles 

 

Regards, 

Shyam G