Resizing

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 Resizing 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 and configured globally via diagram config.

Enabling Resizing for a Node

Enable resizing by setting the resizable property to true in your node definition:

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

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

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

  config = {
    zoom: {
      max: 3,
    },
    resize: {
      getMinNodeSize: (_: Node) => {
        return { width: 200, height: 80 };
      },
    },
    snapping: {
      shouldSnapResizeForNode: () => false,
    },
  } satisfies NgDiagramConfig;

  model = initializeModel({
    nodes: [
      {
        id: '1',
        position: { x: 100, y: 100 },
        type: 'myType',
        data: {},
        resizable: true,
      },
    ],
    edges: [],
    metadata: { viewport: { x: 0, y: 0, scale: 1 } },
  });
}

When resizable is set, the resize handles and lines will appear, and the node can be resized by the user.

Adding Resize Adornment to a Custom Node

To make a custom node resizable, wrap your node with <ng-diagram-node-resize-adornment> in your node template and import the NgDiagramNodeResizeAdornmentComponent.

You will also need to set the resizable property to true in your custom node definition.

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

@Component({
  selector: 'node',
  imports: [NgDiagramNodeResizeAdornmentComponent],
  template: `
    <ng-diagram-node-resize-adornment>
      <div class="node">
        <div class="node-header">Header</div>
        <div class="node-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </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>();
}

Customizing the Resize Handle and Line

Styling the 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

Styling the 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.

Configuring Resizing via Diagram Config

You can further customize resizing behavior using the resize configuration in NgDiagramConfig. This configuration allows you to control minimum node size and other resizing options:

• getMinNodeSize – Returns the minimum size for a node during resizing.

You can set these options in your diagram configuration:

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

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

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

  config = {
    zoom: {
      max: 3,
    },
    resize: {
      getMinNodeSize: (_: Node) => {
        return { width: 200, height: 80 };
      },
    },
    snapping: {
      shouldSnapResizeForNode: () => false,
    },
  } satisfies NgDiagramConfig;

  model = initializeModel({
    nodes: [
      {
        id: '1',
        position: { x: 100, y: 100 },
        type: 'myType',
        data: {},
        resizable: true,
      },
    ],
    edges: [],
    metadata: { viewport: { x: 0, y: 0, scale: 1 } },
  });
}

Pass this configuration to the ng-diagram component:

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

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

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

  config = {
    zoom: {
      max: 3,
    },
    resize: {
      getMinNodeSize: (_: Node) => {
        return { width: 200, height: 80 };
      },
    },
    snapping: {
      shouldSnapResizeForNode: () => false,
    },
  } satisfies NgDiagramConfig;

  model = initializeModel({
    nodes: [
      {
        id: '1',
        position: { x: 100, y: 100 },
        type: 'myType',
        data: {},
        resizable: true,
      },
    ],
    edges: [],
    metadata: { viewport: { x: 0, y: 0, scale: 1 } },
  });
}

Example

Further Reading

Nodes Learn more about node features

Custom Nodes Create custom node templates with advanced features