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

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

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 shapeany = {
    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



3 Replies

SG Shyam G Syncfusion Team December 4, 2019 10:03 AM

Hi Maja, 
 
Query 
Response 
  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
 
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:  
 
  1. 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'; 
        } 
      } 
  } 
 
 
 
 
 
Regards, 
Shyam G 



MM MM December 5, 2019 02:37 AM

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


SG Shyam G Syncfusion Team December 6, 2019 06:35 AM

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); 
  }  
} 
 
 
 
 
Regards, 
Shyam G 


Loader.
Live Chat Icon For mobile
Up arrow icon