Ports

Ports are connection points on Nodes that allow Edges to link different entities in your diagram.

You can define where and how connections can be made, enabling flexible and interactive diagrams.

Note

A port is required to create an edge. You can only connect nodes through their ports.

A port is defined by several key properties:

• id: Uniquely identifies the port within the diagram.
• type: Determines if the port is a source, target, or both for edge connections.
• side: Specifies which side of the node the port appears on (e.g., left, right, top, bottom).

Ports are stored in the measuredPorts property, which is read-only and cannot be modified in the node definition.

Styling Ports

Ports are rendered using the <ng-diagram-port> component. You can customize their appearance by overriding CSS variables in your styles, adding inline styles, or by applying custom classes.

Default CSS Variables

The following CSS variables can be overridden to change the look and feel of ports:

--ngd-port-size: 0.25rem;
--ngd-port-background-color: #fff;
--ngd-port-background-color-hover: #9140ff; // based on theme
--ngd-port-border-size: 2px;
--ngd-port-border-color: #6f7480; // based on theme

Custom CSS

For example, to create a custom style, you can define a CSS class and assign it to a port:

.some-custom-class {
  --ngd-port-size: 18px;
  --ngd-port-background-color: #7dd184;
  --ngd-port-border-size: 0px;
}

  <div class="node">
    ...
  </div>
  <ng-diagram-port id="port-left" type="both" side="left" class="some-custom-class" />
  <ng-diagram-port id="port-top" type="both" side="top" />
  ...

Hover style

You can enable default hover styles on ports by adding following code into your component:

import { Component, input } from '@angular/core';
import {
  NgDiagramPortComponent,
  type NgDiagramNodeTemplate,
  type Node,
} from 'ng-diagram';

@Component({
  selector: 'node',
  imports: [NgDiagramPortComponent],
  host: {
    '[class.ng-diagram-port-hoverable-over-node]': 'true',
  },
  template: `
    <div class="node">
      <div class="node-header">Header</div>
      <div class="node-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>
    <ng-diagram-port id="port-left" type="both" side="left" />
    <ng-diagram-port id="port-top" type="both" side="top" />
    <ng-diagram-port id="port-right" type="both" side="right" />
    <ng-diagram-port id="port-bottom" type="both" side="bottom" />
  `,
  styleUrl: './node.component.scss',
})
export class CustomNodeComponent implements NgDiagramNodeTemplate {
  node = input.required<Node>();
}

Example Usage

To add ports to a node, render them in your node template:

import { Component, input } from '@angular/core';
import {
  NgDiagramPortComponent,
  type NgDiagramNodeTemplate,
  type Node,
} from 'ng-diagram';

@Component({
  selector: 'node',
  imports: [NgDiagramPortComponent],
  host: {
    '[class.ng-diagram-port-hoverable-over-node]': 'true',
  },
  template: `
    <div class="node">
      <div class="node-header">Header</div>
      <div class="node-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>
    <ng-diagram-port id="port-left" type="both" side="left" />
    <ng-diagram-port id="port-top" type="both" side="top" />
    <ng-diagram-port id="port-right" type="both" side="right" />
    <ng-diagram-port id="port-bottom" type="both" side="bottom" />
  `,
  styleUrl: './node.component.scss',
})
export class CustomNodeComponent implements NgDiagramNodeTemplate {
  node = input.required<Node>();
}

Live example

Customization

You can fully customize port appearance and behavior by:

• Overriding CSS variables for color, size, and border
• Applying custom classes for unique effects

Custom Ports Example See a live example of custom port styling and its behavior.