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).
• originPoint: Controls the transform origin of the port for precise placement.

Each node has a measuredPorts property that provides information about its ports and their computed position and dimensions. This property is read-only and should not be modified.

Styling Ports

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

Custom Content since v0.9.0

You can render any content inside a port, such as text, images, SVGs, or any icons.

<ng-diagram-port id="port-custom" type="both" side="left">
  <div>
    <img src="icon.png" alt="icon" />
    <span>Custom</span>
  </div>
</ng-diagram-port>

Custom content automatically disables the default circular style and allows full control over the port’s appearance.

Port positioning with Origin Point since v0.9.0

You can use the originPoint input to precisely control the transform origin of each port. Supported values: topLeft, centerLeft, bottomLeft, topCenter, center, bottomCenter, topRight, centerRight, bottomRight.

Example usage:

<ng-diagram-port id="port-en" type="both" side="left" originPoint="topLeft">
  <div><img src="icon.png" alt="icon" /></div>
</ng-diagram-port>

This applies the corresponding CSS transform for accurate port placement.

If you need further customization of port placement, you can use CSS styling by adding styles directly to the port or via a custom class.

<ng-diagram-port id="port-custom" type="both" side="left" style="transform: translate(-10%, -95%)">
  <div><img src="icon.png" alt="icon" /></div>
</ng-diagram-port>

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
--ngd-port-border-radius: 50%; // makes the port circular for default style

Note: --ngd-port-size property is only for default ports. When using custom content, the port size automatically adjusts to fit the content. When using circular shapes in custom content, use --ngd-port-border-radius to control the hover roundness.

Custom CSS

To create a custom style, 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;

  /* Change to custom position of port */
  transform: translate(-10%, -95%);
}

  <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 the following code into your component:

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

@Component({
  imports: [NgDiagramPortComponent],
  host: {
    '[class.ng-diagram-port-hoverable-over-node]': 'true',
  },
  template: `
    <div class="custom-node">
      <div class="custom-node__header">{{ node().data.label }}</div>
      <div class="custom-node__content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </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<{ label: string }>
{
  node = input.required<Node<{ label: string }>>();
}

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({
  imports: [NgDiagramPortComponent],
  host: {
    '[class.ng-diagram-port-hoverable-over-node]': 'true',
  },
  template: `
    <div class="custom-node">
      <div class="custom-node__header">{{ node().data.label }}</div>
      <div class="custom-node__content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </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<{ label: string }>
{
  node = input.required<Node<{ label: string }>>();
}

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
• Providing custom content for advanced visuals

Custom Ports Example →