Using Connector Ports in Angular Diagram Component
29 Aug 202514 minutes to read
Connector ports serve as connection points along connectors, enabling other connectors to attach at specific locations rather than just the endpoints. This guide covers creating connector ports, configuring their alignment and displacement, and establishing port-to-port connections.
Create connector port
Connector ports serve as connection points along connectors, enabling other connectors to attach at specific locations rather than just the endpoints. Creating connector ports follows the same pattern as node ports - define a port collection and assign it to the connector’s ports property.
The following code example demonstrates how to create connector ports:
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, PathPortModel, PortVisibility, PointModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
// specifies the template string for the diagram component
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px">
<e-connectors>
<e-connector id='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [ports]='ports1'>
</e-connector>
<e-connector id='connector1' type='Orthogonal' [sourcePoint]='sourcePoint1' [targetPoint]='targetPoint1' [ports]='ports1'>
</e-connector>
<e-connector id='connector2' type='Bezier' [sourcePoint]='sourcePoint2' [targetPoint]='targetPoint2' [ports]='ports1'>
</e-connector>
</e-connectors>
</ejs-diagram>`
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public sourcePoint?: PointModel;
public targetPoint?: PointModel;
public sourcePoint1?: PointModel;
public targetPoint1?: PointModel;
public sourcePoint2?: PointModel;
public targetPoint2?: PointModel;
public ports1: PathPortModel[] = [{
offset: 0.5,
visibility: PortVisibility.Visible,
}]
ngOnInit(): void {
this.sourcePoint = { x: 100, y: 100 };
this.targetPoint = { x: 300, y: 100 };
this.sourcePoint1 = { x: 100, y: 200 };
this.targetPoint1 = { x: 300, y: 220 };
this.sourcePoint2 = { x: 100, y: 300 };
this.targetPoint2 = { x: 300, y: 340 };
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Port alignment
Control the position of ports along the connector using the alignment property. This property determines where the port appears relative to the connector’s path:
- Before: Positions the port at the source end of the connector
- After: Positions the port at the target end of the connector
- Center: Positions the port at the midpoint of the connector (default)
The following code example shows how to set different alignment values for connector ports:
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, PathPortModel, PortVisibility, PointModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
// specifies the template string for the diagram component
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px">
<e-connectors>
<e-connector id='connector' type='Orthogonal' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [ports]='ports1'>
</e-connector>
<e-connector id='connector1' type='Orthogonal' [sourcePoint]='sourcePoint1' [targetPoint]='targetPoint1' [ports]='ports2' >
</e-connector>
<e-connector id='connector2' type='Orthogonal' [sourcePoint]='sourcePoint2' [targetPoint]='targetPoint2' [ports]='ports3'>
</e-connector>
</e-connectors>
</ejs-diagram>`
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public sourcePoint?: PointModel;
public targetPoint?: PointModel;
public sourcePoint1?: PointModel;
public targetPoint1?: PointModel;
public sourcePoint2?: PointModel;
public targetPoint2?: PointModel;
ngOnInit(): void {
this.sourcePoint = { x: 100, y: 200 };
this.targetPoint = { x: 300, y: 220 };
this.sourcePoint1 = { x: 320, y: 200 };
this.targetPoint1 = { x: 500, y: 220 };
this.sourcePoint2 = { x: 520, y: 200 };
this.targetPoint2 = { x: 700, y: 220 };
}
public ports1: PathPortModel[] = [{
offset: 0.5,
alignment: 'Before',
visibility: PortVisibility.Visible,
}]
public ports2: PathPortModel[] = [{
offset: 0.5,
alignment: 'Center',
visibility: PortVisibility.Visible,
}]
public ports3: PathPortModel[] = [{
offset: 0.5,
alignment: 'After',
visibility: PortVisibility.Visible,
}]
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Port displacement
Fine-tune port positioning using the displacement property, which applies offset values to move ports from their aligned position. Displacement works by shifting the port by specified x and y coordinates relative to the alignment point.
The following code example demonstrates how to apply displacement to connector ports:
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, PathPortModel, PortVisibility, PointModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
// specifies the template string for the diagram component
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px">
<e-connectors>
<e-connector id='connector' type='Orthogonal' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [ports]='ports1'>
</e-connector>
<e-connector id='connector1' type='Orthogonal' [sourcePoint]='sourcePoint1' [targetPoint]='targetPoint1' [ports]='ports2' >
</e-connector>
</e-connectors>
</ejs-diagram>`
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public sourcePoint?: PointModel;
public targetPoint?: PointModel;
public sourcePoint1?: PointModel;
public targetPoint1?: PointModel;
ngOnInit(): void {
this.sourcePoint = { x: 100, y: 200 };
this.targetPoint = { x: 100, y: 320 };
this.sourcePoint1 = { x: 300, y: 200 };
this.targetPoint1 = { x: 500, y: 220 };
}
public ports1: PathPortModel[] = [{
alignment: 'Before',
displacement: { x: 50, y: 0 },
visibility: PortVisibility.Visible,
}]
public ports2: PathPortModel[] = [{
alignment: 'Before',
displacement: { x: 0, y: 50 },
visibility: PortVisibility.Visible,
}]
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));NOTE
Displacement only applies when alignment is set to Before or After. Center-aligned ports ignore displacement values.
Establish port-to-port connections
Connect one connector to another connector’s port by specifying the port ID in the sourcePortID or targetPortID property. This creates precise connection points along connector paths instead of connecting to endpoints.
The following code example shows how to connect a connector to a connector port:
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, PathPortModel, PortVisibility,PointPortModel, PointModel, PortConstraints } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
// specifies the template string for the diagram component
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" >
<e-nodes>
<e-node id='node1' [offsetX]=250 [offsetY]=250 [width]=100 [height] =100 [ports]='ports'></e-node>
</e-nodes>
<e-connectors>
<e-connector id='connector1' type='Orthogonal' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [ports]='ports1'>
</e-connector>
<e-connector id='connector2' type='Orthogonal' sourceID='node1' targetID='connector1' sourcePortID='port1' targetPortID='connectorPort' [ports]='ports2'>
</e-connector>
</e-connectors>
</ejs-diagram>`
})
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: 300, y: 120 };
}
public ports: PointPortModel[] = [{
id:'port1',
offset: { x: 1, y: 0.5 },
visibility: PortVisibility.Visible,
}]
public ports1: PathPortModel[] = [{
id: 'connectorPort',
offset: 0.5,
visibility: PortVisibility.Visible,
constraints: PortConstraints.Default | PortConstraints.Draw,
}]
public ports2: PathPortModel[] = [{
offset: 0.5,
visibility: PortVisibility.Visible,
}]
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));