The resizing feature in ngDiagram allows users to interactively change the size of nodes on the diagram canvas. Resizable nodes display resize handles and lines that users can drag to adjust the node’s width and height.

The new size is reflected in the node’s appearance and can be used to create flexible, dynamic diagrams.

How It Works

• Nodes can be resized by dragging the resize handles or lines.
• The node’s size is updated in its data model.
• Resizing 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 resizable, wrap your node with <ng-diagram-node-resize-adornment> in your node template and import the NgDiagramNodeResizeAdornmentComponent.

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

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

Customization

Resize Handle

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

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

Resize Line

Here are the CSS variables you can use to style the resize line:

  --ngd-resize-line-border-width                 // Border width of the line
  --ngd-resize-line-border-style                 // Border style of the line (e.g. solid, dashed)
  --ngd-resize-line-border-color                 // Border color of the line

You can override these variables in your styles to customize the appearance and position of the resize handles and lines.

Configuration

Resizing Settings

You can further customize resizing behavior using the resize configuration in NgDiagramConfig:

• defaultResizable – Controls whether resizing is enabled by default for all nodes. Default is true.
• getMinNodeSize – Returns the minimum size for a node during resizing. Default is 20x20px.
• allowResizeBelowChildrenBounds – By default, groups can be resized to any size, even smaller than their children. If you want to prevent resizing a group smaller than its children (so all children always remain fully contained), set this option to false.

You can set these options in your diagram configuration and pass them to the ng-diagram component:

import '@angular/compiler';
import { Component } from '@angular/core';
import {
  initializeModel,
  NgDiagramBackgroundComponent,
  NgDiagramComponent,
  provideNgDiagram,
  type NgDiagramConfig,
  type NgDiagramNodeTemplateMap,
  type Node,
} 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>
  `,
  styleUrls: ['./diagram.component.scss'],
})
export class DiagramComponent {
  nodeTemplateMap: NgDiagramNodeTemplateMap = new Map([
    ['myType', CustomNodeComponent],
  ]);

  config = {
    zoom: {
      max: 3,
      zoomToFit: {
        onInit: true,
        padding: 130,
      },
    },
    resize: {
      getMinNodeSize: (_: Node) => {
        return { width: 200, height: 80 };
      },
    },
  } satisfies NgDiagramConfig;

  model = initializeModel({
    nodes: [
      {
        id: '1',
        position: { x: 0, y: 0 },
        size: { width: 250, height: 170 },
        autoSize: false,
        type: 'myType',
        data: {},
      },
    ],
  });
}

Resizing Setting Priority

The resizable property controls whether a node can be resized. 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 resizable property on the node data object.

import { Node } from 'ng-diagram';

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

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

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

<ng-diagram-node-resize-adornment [defaultResizable]="true"></ng-diagram-node-resize-adornment>

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

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

import { NgDiagramConfig } from 'ng-diagram';

const config: NgDiagramConfig = {
  resize: {
    defaultResizable: false,
  },
};

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

Tip

If your resizing 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 →