Skip to content
NgDiagram

Palette

NgDiagram provides a comprehensive palette system that allows users to create custom drag-and-drop interfaces for adding nodes to diagrams. The palette system consists of built-in components that can be customized to create your own palette.

Palette Items

Section titled “Palette Items”

The core building block of the palette is the <ng-diagram-palette-item> component. It transforms any content into a draggable palette item. This wrapper provides drag-and-drop capabilities without imposing visual constraints on the content itself.

A palette item is defined by an NgDiagramPaletteItem:

interface NgDiagramPaletteItem {
  type?: string;
  data: T;
  resizable?: boolean;
  rotatable?: boolean;
  angle?: number;
  size?: Size;
  autoSize?: boolean;
  zOrder?: number;
}

A palette item is essentially a definition of a node. You can specify its data or other properties that will be used when the node is initialized on the diagram.

Think of it as similar to an Angular component definition:

  • The definition in the palette describes how the node should be created.
  • The instance dropped into the diagram becomes a live node.

Note: You can use your node templates directly inside the palette to represent items. However, ports will not be rendered in the palette or its preview. Ports only render within the diagram canvas context, so outside of it (e.g. palette or preview), they will not appear.

Custom content

Section titled “Custom content”

When using <ng-diagram-palette-item>, you can pass any HTML or Angular template as its content to represent the item in the palette. For example, this could be plain text, an image, or a more complex Angular component.

Previews

Section titled “Previews”

When dragging, a preview of the node is shown. To define the preview, wrap your content in <ng-diagram-palette-item-preview> inside <ng-diagram-palette-item>.

The preview itself can be any HTML or Angular component.

import '@angular/compiler';


import { Component } from '@angular/core';
import {
  initializeModel,
  NgDiagramComponent,
  provideNgDiagram,
  type NgDiagramPaletteItem,
} from 'ng-diagram';
import { Palette } from './palette.component';


@Component({
  imports: [NgDiagramComponent, Palette],
  providers: [provideNgDiagram()],
  template: `
    <ng-diagram [model]="model" />
    <palette-container [model]="paletteModel" />
  `,
  styles: `
    :host {
      flex: 1;
      display: flex;
      height: 100%;
      position: relative;
    }
  `,
})
export class NgDiagramComponentContainer {
  paletteModel: NgDiagramPaletteItem[] = [
    { data: { label: 'Default Node' }, resizable: true, rotatable: true },
    { data: { label: 'Default Group' }, resizable: true, isGroup: true },
  ];


  model = initializeModel({
    metadata: {
      viewport: {
        x: 272,
        y: 65,
        scale: 1,
      },
    },
    nodes: [
      { id: '1', position: { x: 100, y: 150 }, data: { label: 'Node 1' } },
    ],
  });
}