Skip to content
NgDiagram

Custom Node Example

This example demonstrates how to create a custom node with your own template and form controls.


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


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


enum NodeTemplateType {
  CustomNodeType = 'customNodeType',
}


@Component({
  imports: [NgDiagramComponent, NgDiagramBackgroundComponent],
  providers: [provideNgDiagram()],
  changeDetection: ChangeDetectionStrategy.OnPush,
  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 = new NgDiagramNodeTemplateMap([
    [NodeTemplateType.CustomNodeType, NodeComponent],
  ]);


  config = {
    zoom: {
      max: 3,
      zoomToFit: {
        onInit: true,
        padding: 50,
      },
    },
  } satisfies NgDiagramConfig;


  model = initializeModel({
    nodes: [
      {
        id: '1',
        position: { x: 80, y: 140 },
        type: 'customNodeType',
        data: {
          name: 'Node 1',
          description: 'This is Node 1',
          tooltip: 'Node 1 is a custom node',
        },
        rotatable: true,
        resizable: false,
      },
      {
        id: '2',
        position: { x: 500, y: 0 },
        type: 'customNodeType',
        data: {
          name: 'Node 2',
          description: 'This is Node 2',
          tooltip: 'Node 2 is a custom node',
        },
        rotatable: true,
        resizable: false,
        angle: 30,
      },
    ],
    edges: [
      {
        id: '1',
        source: '1',
        target: '2',
        data: {},
        sourcePort: 'port-top',
        targetPort: 'port-left',
        sourceArrowhead: 'ng-diagram-arrow',
      },
    ],
  });
}