Customize Port Appearance in Angular Diagram Component
29 Aug 202515 minutes to read
Overview
Ports serve as connection points on diagram nodes where connectors can be attached. The appearance of ports can be customized using the strokeColor, strokeWidth, fill and opacity properties of the port. Customize the port size by using the width and height properties of port. The ports visibility property allows you to define when the port should be visible.
For more information about port visibility, refer to the Port Visibility section below.
The following code illustrates how to change the appearance of port.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, PointPortModel, PortVisibility } 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>
</ejs-diagram>`
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public ports: PointPortModel[] = [{
offset: {
x: 1,
y: 0.5
},
visibility: PortVisibility.Visible,
//Set the style for the port
style: {
fill: 'red',
strokeWidth: 2,
strokeColor: 'black',
opacity: 0.7,
strokeDashArray: '2 2',
},
width: 12,
height: 12,
// Sets the shape of the port as Circle
shape: 'Circle'
}]
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Change appearance of port at runtime
The appearance of port can be changed at runtime by customizing the style properties of the port. This is useful when you need to provide visual feedback based on user interactions or application state changes. The following code illustrates how to change the appearance of port at runtime.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule,DiagramComponent, PointPortModel, PortVisibility } 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>
</ejs-diagram>
<button (click)="changeAppearance()">changeAppearance</button>`,
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public ports: PointPortModel[] = [{
offset: {
x: 1,
y: 0.5
},
visibility: PortVisibility.Visible,
//Set the style for the port
style: {
fill: 'red',
strokeWidth: 2,
strokeColor: 'black',
opacity: 0.7,
strokeDashArray: '2 2',
},
width: 12,
height: 12,
// Sets the shape of the port as Circle
shape: 'Circle'
}]
//To change the appearance of the ports through run time
changeAppearance(){
let port = (this.diagram as any).nodes[0].ports[0];
port.style.fill = 'yellow';
port.style.opacity = 1;
port.width = 25;
port.height = 25;
(this.diagram as any).dataBind();
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Port visibility
The visibility of the ports is determined by the visibility property of port using the PortVisibility enum. This enum includes properties such as Connect, Hidden, Hover, and Visible. By default, the port visibility is set to Hidden.
| Property | Definition | Use Case |
|---|---|---|
| Hover | Port is visible when mouse hovers over the DiagramElement. | Ideal for clean interfaces where ports appear only during interaction. |
| Hidden | Port is not visible for the DiagramElement. | Used when ports should remain completely invisible to users. |
| Connect | The port becomes visible when you hover a connector thumb over the DiagramElement where the port resides. | Best for guided connection scenarios where valid connection points are highlighted. |
| Visible | Port is always visible for the DiagramElement. | Suitable when ports need to be constantly visible for easy identification. |
Port shape
The shape of port can be changed by using its shape property. To explore the different types of port shapes, refer to Port Shapes. By default the port shape is Square. Different shapes help distinguish between different types of connections or data flow directions.
Types of port shapes
The following basic built-in PortShapes are available for ports:
- Circle
- Custom
- Square
- X
Customize the port’s shape
Custom shape support has been provided for port. You can add custom path data instead of built-in shapes when you need specific visual indicators that match your application’s design requirements or represent particular data types.
If you need to render a custom shape, then you can set shape as Custom and define path using pathData property of port.
The following code illustrates how to set custom shape to the port.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core'
import { DiagramModule,DiagramComponent, PointPortModel, PortVisibility } 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>
</ejs-diagram>`,
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public ports: PointPortModel[] = [
{
offset: {
x: 1,
y: 0.5
},
visibility: PortVisibility.Visible,
// Sets the shape of the port as Circle
shape: 'Circle'
},
{
offset: {
x: 0,
y: 0.5
},
visibility: PortVisibility.Visible,
// Sets the shape of the port as Square
shape: 'Square'
},
{
offset: {
x: 0.5,
y: 0
},
visibility: PortVisibility.Visible,
// Sets the shape of the port as X
shape: 'X'
},
{
offset: {
x: 0.5,
y: 1
},
visibility: PortVisibility.Visible,
// Sets the shape of the port as Custom
shape: 'Custom',
pathData:
'M50 10 L60 40 L90 40 L65 60 L75 90 L50 70 L25 90 L35 60 L10 40 L40 40 Z',
},
]
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Constraints
The constraints property allows you to enable or disable certain behaviors of ports, providing fine-grained control over port functionality. For more information about port constraints, refer to Port Constraints.
The PortConstraints may have multiple behaviors as listed below:
| Constraints | Usage | Purpose |
|---|---|---|
| None | Disables all behaviors of Port. | Complete restriction of port functionality. |
| Draw | Enables or disables drawing a connector from the port. | Controls whether new connections can be initiated from this port. |
| InConnect | Enables or disables connecting to the incoming Connector. | Restricts whether connectors can terminate at this port. |
| OutConnect | Enables or disables connecting the outgoing Connector. | Controls whether connectors can originate from this port. |
| ToolTip | Enables or disables the Tooltip for the ports. | Shows or hides informational tooltips when hovering over ports. |
| Drag | Enables or disables dragging of port. | Allows or prevents repositioning of ports within the node. |
| InheritTooltip | Enables or disables inheriting Tooltip from the parent node. | Uses the parent node’s tooltip configuration for the port. |