The rotation feature in ngDiagram allows users to interactively rotate nodes on the diagram canvas. Rotatable nodes display a rotation handle that users can drag to change the node’s angle.

The rotation is reflected in the node’s appearance and can be used to create various diagrams.

How It Works

• Nodes can be rotated by dragging the rotation handle.
• The rotation angle is stored in the node’s angle property.
• Rotation can be enabled per node, per custom template, or globally in the configuration. It can also be configured through the global configuration.

Custom Node Setup

To make a custom node rotatable, include <ng-diagram-node-rotate-adornment /> in your node template and import the NgDiagramNodeRotateAdornmentComponent reference.

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

@Component({
  imports: [NgDiagramNodeRotateAdornmentComponent],
  template: `
    <ng-diagram-node-rotate-adornment />
    <div class="custom-node">
      <div class="custom-node__header">Node title</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>
  `,
  hostDirectives: [
    { directive: NgDiagramNodeSelectedDirective, inputs: ['node'] },
  ],
  styleUrl: './node.component.scss',
})
export class CustomNodeComponent implements NgDiagramNodeTemplate {
  node = input.required<Node>();
}

Customization

Rotate Handle

Here are the CSS variables you can use to style the rotation handle:

  --ngd-rotate-handle-background-color           // Background color of the handle
  --ngd-rotate-handle-background-color-hover     // Background color on hover or focus
  --ngd-rotate-handle-background-color-active    // Background color when active or rotating
  --ngd-rotate-handle-size                      // Size (width and height) of the handle
  --ngd-rotate-handle-top                       // Positioning of the handle
  --ngd-rotate-handle-right                     // Positioning of the handle
  --ngd-rotate-handle-bottom                    // Positioning of the handle
  --ngd-rotate-handle-left                      // Positioning of the handle

You can override these variables in your styles to customize the appearance and position of the rotation handle.

Custom Handle

If you want to use a custom icon as a handle, simply place your SVG or Angular component inside <ng-diagram-node-rotate-adornment>. The content you provide will be rendered inside the handle.

<ng-diagram-node-rotate-adornment>
  <!-- Your custom SVG icon or component here -->
  <svg width="24" height="24" ...>...</svg>
</ng-diagram-node-rotate-adornment>

If you do not provide any content inside <ng-diagram-node-rotate-adornment>, the component will automatically display its built-in default rotation icon.

Configuration

Rotation Settings

You can further customize rotation behavior using the nodeRotation configuration in NgDiagramConfig:

• defaultRotatable – Controls whether rotation is enabled by default for all nodes. Default is true.
• computeSnapAngleForNode - Computes the snap angle for a node’s rotation.
• defaultSnapAngle - The default snap angle in degrees, used if computeSnapAngleForNode returns null.
• shouldSnapForNode - Determines whether rotation snapping should be enabled for a node.

You can set these options in your diagram by passing the configuration to the ng-diagram component:

import '@angular/compiler';
import { Component } from '@angular/core';
import {
  initializeModel,
  NgDiagramBackgroundComponent,
  NgDiagramComponent,
  provideNgDiagram,
  type NgDiagramConfig,
  type NgDiagramNodeTemplateMap,
} from 'ng-diagram';

import { CustomNodeComponent } from './node/node.component';

@Component({
  imports: [NgDiagramComponent, NgDiagramBackgroundComponent],
  providers: [provideNgDiagram()],
  template: `
    <div class="not-content diagram">
      <ng-diagram
        [model]="model"
        [config]="config"
        [nodeTemplateMap]="nodeTemplateMap"
      >
        <ng-diagram-background />
      </ng-diagram>
    </div>
  `,
  styleUrl: './diagram.component.scss',
})
export class DiagramComponent {
  nodeTemplateMap: NgDiagramNodeTemplateMap = new Map([
    ['myType', CustomNodeComponent],
  ]);

  config = {
    zoom: {
      max: 3,
      zoomToFit: {
        onInit: true,
        padding: 140,
      },
    },
    nodeRotation: {
      computeSnapAngleForNode: () => 45,
      defaultSnapAngle: 25,
      shouldSnapForNode: () => true,
    },
  } satisfies NgDiagramConfig;
  model = initializeModel({
    nodes: [
      {
        id: '1',
        position: { x: 0, y: 0 },
        size: { width: 250, height: 170 },
        autoSize: false,
        type: 'myType',
        data: {},
      },
    ],
  });
}

Rotation Setting Priority

The rotatable property controls whether a node can be rotated. This property can be defined at several levels, and when multiple levels specify it, the one with the highest priority takes effect.

The following list shows the order of priority — from highest to lowest:

1. Node-level setting – Directly set the rotatable property on the node data object.

import { Node } from 'ng-diagram';

const node: Node = {
  id: 'my-id',
  rotatable: true,
  // other node properties
};

This setting applies specifically to that node and overrides all other defaults.

2. Template-level setting – Use the defaultRotatable input on the NgDiagramNodeRotateAdornmentComponent within your custom node template.

<ng-diagram-node-rotate-adornment [defaultRotatable]="true"></ng-diagram-node-rotate-adornment>

This defines the default rotation behavior for all nodes that use that template.

3. Global configuration – Define the global defaultRotatable setting inside your NgDiagramConfig.

import { NgDiagramConfig } from 'ng-diagram';

const config: NgDiagramConfig = {
  nodeRotation: {
    defaultRotatable: false,
  },
};

This establishes the fallback behavior for all nodes unless overridden by a template or individual node.

Tip

If your rotation configuration seems to be ignored, check for overrides at higher priority levels — node-level settings always take precedence over template or global configurations.

Read more about global configuration in ngDiagram →

Further Reading

Nodes → | Custom Nodes →