Connector Events in Angular Diagram
The Diagram component provides comprehensive event support for connectors, allowing developers to respond to various user interactions and programmatic changes. These events enable dynamic behavior and custom logic when users interact with connectors through clicking, dragging, connecting, or modifying segments.
Click Event
Triggers when a connector is clicked by the user. This event is useful for implementing custom actions, showing context menus, or displaying connector-specific information.
The following code example demonstrates how to handle the click event in the diagram:
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, Connector, PointModel, Node, IClickEventArgs } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [DiagramModule],
providers: [],
standalone: true,
selector: 'app-container',
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" (click)="click($event)">
<e-nodes>
<e-node id='node1' [offsetX]=150 [offsetY]=150>
<e-node-annotations>
<e-node-annotation content="click node">
</e-node-annotation>
</e-node-annotations>
</e-node>
</e-nodes>
<e-connectors>
<e-connector id='connector1' type='Straight' sourceID='node1' [targetPoint]='targetPoint' >
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@ViewChild('diagram')
public diagram?: DiagramComponent;
public sourcePoint?: PointModel;
public targetPoint?: PointModel;
ngOnInit(): void {
this.targetPoint = { x: 300, y: 200 };
};
public click = function (args: IClickEventArgs): void {
let element = 'Diagram';
if (args.actualObject instanceof Node) {
element = 'Node';
} else if (args.actualObject instanceof Connector) {
element = 'Connector';
}
alert(element + ' Clicked');
};
};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 a connector is selected or unselected. This event allows you to implement custom selection logic, update property panels, or perform actions based on selection state changes.
The following code example demonstrates how to handle the selection change event in the diagram:
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, ConnectorModel, PointModel, ISelectionChangeEventArgs } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [DiagramModule],
providers: [],
standalone: true,
selector: 'app-container',
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" (selectionChange)="selectionChange($event)" >
<e-connectors>
<e-connector id='connector1' type='Straight'[sourcePoint]='sourcePoint' [targetPoint]='targetPoint' >
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@ViewChild('diagram')
public diagram?: DiagramComponent;
public sourcePoint?: PointModel;
public targetPoint?: PointModel;
ngOnInit(): void {
this.sourcePoint = { x: 100, y: 100 };
this.targetPoint = { x: 200, y: 200 };
};
public selectionChange = function (args: ISelectionChangeEventArgs): void {
if (args.state === 'Changed') {
console.log('selectionChange');
};
};
};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 = function (args: ISelectionChangeEventArgs): void {
if (args.state === 'Changing') {
//Prevents selection
args.cancel = true;
};
};Position Change Event
Triggers when a connector’s position changes during dragging operations. This event is essential for implementing validation, snapping behavior, or custom positioning logic.
The following code example demonstrates how to handle the position change event in the diagram:
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, PointModel, IDraggingEventArgs } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [DiagramModule],
providers: [],
standalone: true,
selector: 'app-container',
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" (positionChange)="positionChange($event)" >
<e-connectors>
<e-connector id='connector1' type='Straight'[sourcePoint]='sourcePoint' [targetPoint]='targetPoint' >
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@ViewChild('diagram')
public diagram?: DiagramComponent;
public sourcePoint?: PointModel;
public targetPoint?: PointModel;
ngOnInit(): void {
this.sourcePoint = { x: 100, y: 100 };
this.targetPoint = { x: 200, y: 200 };
}
public positionChange = function (args: IDraggingEventArgs): void {
if (args.state === 'Completed') {
console.log('positionChange');
};
};
};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 = function (args: IDraggingEventArgs): void {
if (args.state === 'Progress') {
//Prevents dragging
args.cancel = true;
};
};Connection Change Event
Triggers when a connector’s source or target point connects to or disconnects from nodes. This event is crucial for implementing connection validation, automatic routing updates, or maintaining data relationships.
The following code example demonstrates how to handle the connection change event in the diagram:
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, NodeModel, ShapeStyleModel, ConnectorModel, IConnectionChangeEventArgs } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [DiagramModule],
providers: [],
standalone: true,
selector: 'app-container',
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" (connectionChange)="connectionChange($event)" [getNodeDefaults] ='getNodeDefaults'>
<e-nodes>
<e-node id='node1' [offsetX]=200 [offsetY]=200>
</e-node>
<e-node id='node2' [offsetX]=500 [offsetY]=200>
</e-node>
</e-nodes>
<e-connectors>
<e-connector id='connector1' type='Straight' sourceID='node1' targetID='node2' >
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@ViewChild('diagram')
public diagram?: DiagramComponent;
public connectionChange = function (args: IConnectionChangeEventArgs) {
if (args.state === 'Changed') {
console.log('connectionChange');
};
};
public getNodeDefaults(node: NodeModel): void {
node.height = 50;
node.width = 100;
((node as NodeModel).style as ShapeStyleModel).fill = "#6BA5D7";
((node as NodeModel).style as ShapeStyleModel).strokeColor = "Black";
};
};import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Source Point Change Event
Triggers when a connector’s source point is modified through dragging or programmatic changes. This event enables validation of source connections and implementation of custom connection rules.
The following code example demonstrates how to handle the source Point change event in the diagram:
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, ConnectorModel, PointModel, IEndChangeEventArgs } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [DiagramModule],
providers: [],
standalone: true,
selector: 'app-container',
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" (sourcePointChange)="sourcePointChange($event)" >
<e-connectors>
<e-connector id='connector1' type='Straight'[sourcePoint]='sourcePoint' [targetPoint]='targetPoint' >
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@ViewChild('diagram')
public diagram?: DiagramComponent;
public sourcePoint?: PointModel;
public targetPoint?: PointModel;
ngOnInit(): void {
this.sourcePoint = { x: 100, y: 100 };
this.targetPoint = { x: 200, y: 200 };
};
public sourcePointChange = function (args: IEndChangeEventArgs): void {
if (args.state === 'Completed') {
console.log('sourcePointChange');
};
};
};import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));You can prevent source point dragging by setting the cancel property of EndChangeEventArgs to true, as shown in the code snippet below:
public sourcePointChange = function (args: IEndChangeEventArgs): void {
if (args.state === 'Progress') {
//Prevents source point dragging
args.cancel = true;
};
};Target Point Change Event
Triggers when a connector’s target point is modified through dragging or programmatic changes. This event allows validation of target connections and enforcement of connection constraints.
The following code example demonstrates how to handle the target Point change event in the diagram:
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, ConnectorModel, PointModel, IEndChangeEventArgs } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [DiagramModule],
providers: [],
standalone: true,
selector: 'app-container',
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" (targetPointChange)="targetPointChange($event)" >
<e-connectors>
<e-connector id='connector1' type='Straight'[sourcePoint]='sourcePoint' [targetPoint]='targetPoint' >
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@ViewChild('diagram')
public diagram?: DiagramComponent;
public sourcePoint?: PointModel;
public targetPoint?: PointModel;
ngOnInit(): void {
this.sourcePoint = { x: 100, y: 100 };
this.targetPoint = { x: 200, y: 200 };
};
public targetPointChange = function (args: IEndChangeEventArgs): void {
if (args.state === 'Completed') {
console.log('targetPointChange');
};
};
};import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));You can prevent target point dragging by setting the cancel property of EndChangeEventArgs to true, as shown in the code snippet below:
public targetPointChange = function (args: IEndChangeEventArgs): void {
if (args.state === 'Progress') {
//Prevents target point dragging
args.cancel = true;
};
};Segment Collection Change Event
Triggers when connector segments are added or removed at runtime. This event is essential for tracking dynamic changes to connector paths and implementing custom segment management logic.
The following code example demonstrates how to handle the segment collection change event in the diagram:
Use CTRL+Shift+Click on connector to add/remove segments.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, Diagram, PointModel, ConnectorEditing, ConnectorConstraints, ISegmentCollectionChangeEventArgs } from '@syncfusion/ej2-angular-diagrams';
Diagram.Inject(ConnectorEditing);
@Component({
imports: [DiagramModule],
providers: [],
standalone: true,
selector: 'app-container',
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" (segmentCollectionChange)="segmentCollectionChange($event)" >
<e-connectors>
<e-connector id='connector1' type='Straight'[sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [constraints] ='constraints'>
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@ViewChild('diagram')
public diagram?: DiagramComponent;
public sourcePoint?: PointModel;
public targetPoint?: PointModel;
ngOnInit(): void {
this.sourcePoint = { x: 100, y: 100 };
this.targetPoint = { x: 200, y: 200 };
};
public segmentCollectionChange = function (args: ISegmentCollectionChangeEventArgs): void {
if (args.type === 'Addition') {
console.log('segmentCollectionChange');
};
};
constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
};import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Segment Change Event
Triggers when connector segments are adjusted or edited by the user. This event enables custom validation and modification of segment positions during interactive editing.
The following code example demonstrates how to handle the segment change event in the diagram:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DiagramModule } from '@syncfusion/ej2-angular-diagrams';
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, ConnectorModel, PointModel, ConnectorEditing, ConnectorConstraints, ISegmentChangeEventArgs } from '@syncfusion/ej2-angular-diagrams';
Diagram.Inject(ConnectorEditing);
@Component({
imports: [DiagramModule],
providers: [],
standalone: true,
selector: 'app-container',
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" (segmentChange)="segmentChange($event)" [getConnectorDefaults] ='getConnectorDefaults'>
<e-connectors>
<e-connector id='connector1' type='Straight'[sourcePoint]='sourcePoint' [targetPoint]='targetPoint' >
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@ViewChild('diagram')
public diagram?: DiagramComponent;
public sourcePoint?: PointModel;
public targetPoint?: PointModel;
public segments: any;
ngOnInit(): void {
this.sourcePoint = { x: 100, y: 100 };
this.targetPoint = { x: 200, y: 200 };
};
public segmentChange = function (args: ISegmentChangeEventArgs): void {
if (args.state === 'Completed') {
console.log('segmentChange');
};
};
public getConnectorDefaults(connector: ConnectorModel): void {
connector.segments = [{ type: 'Straight', point: { x: 170, y: 150 } }]
connector.constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
};
};import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));You can prevent segment editing by setting the cancel property of SegmentChangeEventArgs to true, as shown in the code snippet below:
public segmentChange = function (args: ISegmentChangeEventArgs): void {
if (args.state === 'Start') {
//Prevents the segment editing
args.cancel = true;
//Customize
};
};Collection Change Event
Triggers when connectors are added to or removed from the diagram. This event is fundamental for tracking diagram modifications and implementing undo/redo functionality or change tracking systems.
The following code example demonstrates how to handle the collection change event in the diagram:
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, PointModel, ICollectionChangeEventArgs } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [DiagramModule],
providers: [],
standalone: true,
selector: 'app-container',
template: `
<input type="button" value="Add" id="add" (click)="onAddClick()"/>
<input type="button" value="Remove" id="remove" (click)="onRemoveClick()"/>
<ejs-diagram #diagram id="diagram" width="100%" height="580px" (collectionChange)="collectionChange($event)" >
<e-connectors>
<e-connector id='connector1' type='Straight'[sourcePoint]='sourcePoint1' [targetPoint]='targetPoint1' >
</e-connector>
<e-connector id='connector2' type='Straight'[sourcePoint]='sourcePoint2' [targetPoint]='targetPoint2' >
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@ViewChild('diagram')
public diagram?: DiagramComponent;
public sourcePoint1?: PointModel;
public targetPoint1?: PointModel;
public sourcePoint2?: PointModel;
public targetPoint2?: PointModel;
ngOnInit(): void {
this.sourcePoint1 = { x: 100, y: 100 };
this.targetPoint1 = { x: 200, y: 200 };
this.sourcePoint2 = { x: 300, y: 100 };
this.targetPoint2 = { x: 400, y: 200 };
};
public collectionChange = function (args: ICollectionChangeEventArgs): void {
if (args.state === 'Changed') {
console.log('collectionChange');
};
};
public onAddClick(): void {
let connector = {
type: 'Straight',
style: { strokeColor: '#6BA5D7' },
sourcePoint: { x: 100, y: 300 },
targetPoint: { x: 200, y: 500 }
};
(this.diagram as DiagramComponent).add(connector);
};
public onRemoveClick(): void {
(this.diagram as DiagramComponent).remove((this.diagram as DiagramComponent).connectors[0]);
};
};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 connectors, by setting the cancel property of CollectionChangeEventArgs to true, as shown in the code snippet below:
public collectionChange = function (args: ICollectionChangeEventArgs): void {
if (args.state === 'Changing') {
//Prevents collection change - Prevents Adding or deleting connectors
args.cancel = true;
};
};