The edge selection feature in ngDiagram allows users to select edges on the diagram canvas. Selected edges are visually highlighted, making it easier to identify and interact with connections between nodes.

How It Works

• Edges can be selected by clicking on them.
• The selected state is managed by ngDiagram and can be accessed via the edge’s selected property.
• Selection styles can be applied automatically or customized.

Default Selection

Default edge selection uses built-in styles and logic provided by ngDiagram. The default edge template automatically highlights selected edges.

Customizing Defaults

You can customize edge selection styles.

Here are a CSS variables you can use to style the selection highlight:

--ngd-default-edge-stroke   // Stroke color for default edge
--ngd-default-edge-stroke-hover // Stroke color for default edge on hover
--ngd-default-edge-stroke-selected   // Stroke color for selected default edge

You can override this variable in your styles to customize the appearance of selected nodes.

.custom-diagram {
  display: flex;
  height: var(--ng-diagram-height);
  border: var(--ng-diagram-border);

  --ngd-default-edge-stroke: sienna;
  --ngd-default-edge-stroke-hover: darkgoldenrod;
  --ngd-default-edge-stroke-selected: gold;
}

Custom Edge Selection

Custom edges can easily apply selection styles using CSS variables. The base edge component exposes selection state through CSS classes, allowing you to style edges without breaking encapsulation.

How It Works

When an edge is selected, the NgDiagramBaseEdgeComponent automatically adds the .selected class to its host element. You can use this class to change CSS variables that control the edge appearance.

Example: Custom Edge with Selection Styling

import { Component, input } from '@angular/core';
import {
  NgDiagramBaseEdgeComponent,
  type Edge,
  type NgDiagramEdgeTemplate,
} from 'ng-diagram';

@Component({
  template: `<ng-diagram-base-edge [edge]="edge()" />`,
  imports: [NgDiagramBaseEdgeComponent],
  styleUrls: ['./custom-edge.component.scss'],
})
export class CustomEdgeComponent implements NgDiagramEdgeTemplate {
  edge = input.required<Edge>();
}

// Base state
ng-diagram-base-edge {
  --edge-stroke: steelblue;
  --edge-stroke-width: 2;
}

// Selected state
ng-diagram-base-edge.selected {
  --edge-stroke: dodgerblue;
  --edge-stroke-width: 3;
}

// Hover state
ng-diagram-base-edge:hover:not(.selected) {
  --edge-stroke: deepskyblue;
}

More informaction about CSS variables and styling can be found in the Edges Customization section.

Alternative: Dynamic Styling

Dynamic Edge Styling →

Further Reading

Edges Overview → | Custom Edges → | Edge Labels →