Create connector port

The creation of connector ports is similar to the creation of node ports. To create connector ports, you need to define a port collection and assign it to the connector’s ports property.

The following code example shows how to create connector port.

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

The port can be aligned before, after, or at the center of the connector by utilizing the alignment property. By default, the port alignment is set to center.

The following code example shows how to set alignment to the connector port.

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

The connector port displacement allows users to adjust the position of ports relative to the connector. By setting displacement offsets, ports can be moved to precise locations along the connector.

The following code example shows how to set displacement to the connector port.

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

The displacement will work only if we set alignment as after or before.

Connector port connection

To establish a connection between connectors, connector ports are utilized. For this connection, the sourcePortID or targetPortID should be set to the ID of the respective port on the connector.

The following code example explains how to connect connector to the 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));

See also