The NgDiagramBaseNodeTemplateComponent provides a base template for custom nodes with default node styling and features.

This component wraps custom node content while providing the default node’s visual appearance, selection states, resize and rotate adornments, and default ports. Use this as a convenient way to create custom nodes that maintain the default node’s look and feel while adding custom content.

Example

<ng-diagram-base-node-template [node]="node">
  <!-- Custom node content here -->
  <div class="custom-header">{{ node().data.title }}</div>
  <div class="custom-body">{{ node().data.description }}</div>
</ng-diagram-base-node-template>

Implements

• NgDiagramNodeTemplate

Properties

node

node: InputSignal<Node>

Input signal containing the node data and properties.

Implementation of

NgDiagramNodeTemplate.node

---

removeDefaultPorts

removeDefaultPorts: InputSignal<undefined | boolean>

When explicitly set to true this will remove the default ports in the template.

When the ports are hidden through configuration, this can override the global config, i.e. set to false to show ports no matter the global setting.

Since

1.3.0