Events

26 Mar 202520 minutes to read

Diagram provides some events support for node that triggers when interacting with the node.

Click event

Triggers when the node is clicked. The following code example explains how to get the click event in the diagram.

import {
  Connector,
  DiagramModule,
  IClickEventArgs,
  PointModel,
  DiagramComponent,
  Node,
  NodeModel,
} from '@syncfusion/ej2-angular-diagrams';
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'  (click)="click($event)">
        <e-nodes>
            <e-node id='node1' [offsetX]=350 [offsetY]=250>
            </e-node>
        </e-nodes>
        <e-connectors>
            <e-connector id='connector' type='Straight' sourceID='node1' [targetPoint]='targetPoint'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public targetPoint?: PointModel;
  ngOnInit(): void {
    this.targetPoint = { x: 350, y: 500 };
  }
  public click(args: IClickEventArgs): void {
    if (args.actualObject instanceof Node) {
      alert('Node is clicked');
    } else if (args.actualObject instanceof Connector) {
      alert('Connector is clicked');
    }
  }
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 100;
    node.width = 100;
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Selection change event

Triggers when the node is selected in diagram.
The following code example explains how to get the selectionChange event in the diagram.

import {
  DiagramModule,
  ISelectionChangeEventArgs,
  DiagramComponent,
  NodeModel,
} from '@syncfusion/ej2-angular-diagrams';

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'  (selectionChange)="selectionChange($event)">
        <e-nodes>
            <e-node id='node1' [offsetX]=350 [offsetY]=250>
            </e-node>
        </e-nodes>
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public selectionChange(args: ISelectionChangeEventArgs): void {
    if (args.state === 'Changed') {
      console.log('Selection Change');
    }
  }
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 100;
    node.width = 100;
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can prevent selection by setting the cancel property of SelectionChangeEventArgs to true, as shown in the code snippet below.

  public selectionChange(args:ISelectionChangeEventArgs): void {
    if(args.state === 'Changing'){
        //Prevents selection
      args.cancel = true;
    }
  },

Position change event

While dragging the node through interaction, the position change event can be used to do the customization.
The following code example explains how to get the positionChange event in the diagram.

import {
  DiagramModule,
  IDraggingEventArgs,
  DiagramComponent,
  NodeModel,
} from '@syncfusion/ej2-angular-diagrams';
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'  (positionChange)="positionChange($event)">
        <e-nodes>
            <e-node id='node1' [offsetX]=350 [offsetY]=250>
            </e-node>
        </e-nodes>
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public positionChange(args: IDraggingEventArgs): void {
    if (args.state === 'Completed') {
      console.log('Position Change');
    }
  }
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 100;
    node.width = 100;
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can prevent dragging by setting the cancel property of DraggingEventArgs to true, as shown in the code snippet below.

    public positionChange(args: IDraggingEventArgs): void {
       if (args.state == 'Progress') {
        //Prevents dragging
        args.cancel = true;
       }
    },

Size change event

While resizing the node during the interaction, the size change event can be used to do the customization.
The following code example explains how to get the sizeChange event in the diagram.

import {
  DiagramModule,
  ISizeChangeEventArgs,
  DiagramComponent,
  NodeModel,
} from '@syncfusion/ej2-angular-diagrams';
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'  (sizeChange)="sizeChange($event)">
          <e-nodes>
              <e-node id='node1' [offsetX]=350 [offsetY]=250>
              </e-node>
          </e-nodes>
      </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public sizeChange(args: ISizeChangeEventArgs): void {
    if (args.state === 'Completed') {
      console.log('Size Change');
    }
  }
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 100;
    node.width = 100;
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

    public sizeChange(args: ISizeChangeEventArgs): void {
     if (args.state == 'Progress') {
      //Prevents resizing
      args.cancel = true;
     }
    },

Rotate change event

While rotating the node during the interaction, the rotate change event can be used to do the customization.
The following code example explains how to get the rotateChange event in the diagram.

import {
  DiagramModule,
  IRotationEventArgs,
  DiagramComponent,
  NodeModel,
} from '@syncfusion/ej2-angular-diagrams';
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'  (rotateChange)="rotateChange($event)">
          <e-nodes>
              <e-node id='node1' [offsetX]=350 [offsetY]=250>
              </e-node>
          </e-nodes>
      </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public rotateChange(args: IRotationEventArgs): void {
    if (args.state === 'Completed') {
      console.log('Rotate Change');
    }
  }
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 100;
    node.width = 100;
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can prevent rotation by setting the cancel property of RotationEventArgs to true, as shown in the code snippet below.

  public rotateChange(args: IRotationEventArgs): void {
    if (args.state == 'Progress') {
      //Prevents rotation
      args.cancel = true;
    }
  },

Property change event

Triggers when there is any property change occurred for the node. The following code example explains how to get the propertyChange event in the diagram.

import {
  DiagramModule,
  IPropertyChangeEventArgs,
  DiagramComponent,
  NodeModel,
} from '@syncfusion/ej2-angular-diagrams';
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'  (propertyChange)="propertyChange($event)">
          <e-nodes>
              <e-node id='node1' [offsetX]=350 [offsetY]=250>
              </e-node>
          </e-nodes>
      </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public propertyChange(args: IPropertyChangeEventArgs): void {
    console.log(args.newValue);
  }
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 100;
    node.width = 100;
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Collection change event

Triggers when the node is added or removed in diagram dynamically.
The following code example explains how to get the collectionChange event in the diagram.

import {
  DiagramModule,
  ICollectionChangeEventArgs,
  DiagramComponent,
  NodeModel,
} from '@syncfusion/ej2-angular-diagrams';

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<button (click)= 'add()'>Add</button>
    <ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'  (collectionChange)="collectionChange($event)">
          <e-nodes>
              <e-node id='node1' [offsetX]=350 [offsetY]=250>
              </e-node>
          </e-nodes>
      </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public node: NodeModel = {
    // Position of the node
    offsetX: 500,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    style: {
      fill: 'skyblue',
    },
  };
  public collectionChange(args: ICollectionChangeEventArgs): void {
    if (args.state === 'Changed') {
      console.log('Collection Change');
    }
  }
  public add() {
    (this.diagram as any).add(this.node);
  }
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 100;
    node.width = 100;
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can prevent changes to the diagram collection, such as adding or deleting nodes, by setting the cancel property of CollectionChangeEventArgs to true, as shown in the code snippet below.

    public collectionChange(args: ICollectionChangeEventArgs): void {
      if (args.state == 'Changing') {
      //Prevents collection change - Prevents Adding or deleting nodes
      args.cancel = true;
      }
    },

Mouse Events

Mouse enter event

The mouseEnter is triggered when the mouse enters the node surface.

Mouse over event

The mouseOver is triggered when the mouse hover over the node surface.

Mouse leave event

The mouseLeave is triggered when the mouse leaves the node surface.

The following code example shows how to handle these events in the diagram and change the color of a node based on these events:

import {
  DiagramModule,
  IMouseEventArgs,
  DiagramComponent,
  NodeModel,
} from '@syncfusion/ej2-angular-diagrams';

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'  (mouseEnter)="mouseEnter($event)" (mouseLeave)="mouseLeave($event)" (mouseOver)="mouseOver($event)">
          <e-nodes>
              <e-node id='node1' [offsetX]=350 [offsetY]=250>
              </e-node>
          </e-nodes>
      </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public mouseEnter(args: IMouseEventArgs): void {
    (args.actualObject as any).style.fill = 'red';
    (this.diagram as any).dataBind();
  }

  public mouseLeave(args: IMouseEventArgs): void {
    (args.element as any).style.fill = 'skyblue';
    (this.diagram as any).dataBind();
  }

  public mouseOver(args: IMouseEventArgs): void {
    //Customize
  }

  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 100;
    node.width = 100;
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));