Selection

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

How Selection Works

Nodes can be selected by clicking on them.
When a node is selected, it will be visually highlighted according to the styles defined in your application.
The selected state is managed by ngDiagram and can be accessed via the node’s selected property.
Default selection style can be enabled per node using a directive provided by ngDiagram.

Adding Selection Styles to a Custom Node

Selection can be fully customized by using the selected property from the node to control its state. You can assign any CSS class you prefer based on this property and define your own styles for selected nodes. This allows you to tailor the selection appearance and behavior to fit your application’s needs.


6 collapsed lines
1
import { Component, input } from '@angular/core';
2
import { type NgDiagramNodeTemplate, type Node } from 'ng-diagram';
3

4
@Component({
5
  selector: 'node',
6
  template: `
7
    <div class="node">
8
      <div class="node-header">Header {{ node().data.label }}</div>
9
      <div class="node-content">
10
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
11
      </div>
12
    </div>
13
  `,
14
  host: {
15
    '[class.custom-selected]': 'isSelected',
16
  },
17
  styleUrls: ['./node.component.scss'],
18
})
19
export class CustomNodeComponent implements NgDiagramNodeTemplate {
20
  node = input.required<Node>();
21

22
  get isSelected(): boolean {
23
    return this.node().selected ?? false;
24
  }
25
}

1
:host {
2
  width: 100%;
3
  height: 100%;
4
  display: flex;
5
  border: 1px solid #ccc;
6

7
  &.custom-selected {
8
    box-shadow: 0px 0px 5px 3px orangered;
9
  }
10

8 collapsed lines
11
  .node-header {
12
    font-size: 20px;
13
    padding: 3px 10px;
14
  }
15
  .node-content {
16
    font-size: 14px;
17
    padding: 3px 10px;
18
  }
19
}

Using Default Selection for a Custom Node

To make a custom node selectable with default functionality, add the NgDiagramNodeSelectedDirective as a host directive in your node component.

There is no need to define anything else in your node or to provide custom selection styles.


6 collapsed lines
1
import { Component, input } from '@angular/core';
2
import {
3
  NgDiagramNodeSelectedDirective,
4
  type NgDiagramNodeTemplate,
5
  type Node,
6
} from 'ng-diagram';
7

8
@Component({
9
  selector: 'node',
10
  template: `
11
    <div class="node">
12
      <div class="node-header">Header {{ node().data.label }}</div>
13
      <div class="node-content">
14
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
15
      </div>
16
    </div>
17
  `,
18
  hostDirectives: [
19
    { directive: NgDiagramNodeSelectedDirective, inputs: ['node'] },
20
  ],
21
  styleUrls: ['./node.component.scss'],
22
})
23
export class DefaultNodeComponent implements NgDiagramNodeTemplate {
24
  node = input.required<Node>();
25
}

Customizing Default Selection Styles

If you want to use the default selection functionality, you can still customize its styles.

Here is a CSS variable you can use to style the selection highlight:

1
--ngd-selected-node-box-shadow    // Box shadow for selected node

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