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).

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 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({
  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

Custom Ports Example →