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

Custom Node Styling

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.

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

4
@Component({
5
  template: `
6
    <div class="custom-node">
7
      <div class="custom-node__header">Node title</div>
8
      <div class="custom-node__content">
9
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
10
        tempor incididunt ut labore et dolore magna aliqua.
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
@use '../../../../../../styles/shared.scss' as *;
2

3
:host {
1 collapsed line
4
  @include custom-node__host;
5

6
  &:not(.custom-selected):hover {
7
    border-color: orangered;
8
  }
9
  &.custom-selected {
10
    box-shadow: 0px 0px 5px 3px orangered;
11
  }
12

9 collapsed lines
13
  .custom-node {
14
    &__header {
15
      @include custom-node__header;
16
    }
17

18
    &__content {
19
      @include custom-node__content;
20
    }
21
  }
22
}

Using Default Styles

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.

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
  template: `
10
    <div class="custom-node">
11
      <div class="custom-node__header">Node title</div>
12
      <div class="custom-node__content">
13
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
14
        tempor incididunt ut labore et dolore magna aliqua.
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 Defaults

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.