Component

Org chart

A hierarchical tree of connected nodes. Feed it nested data, lay it out vertically or horizontally, collapse branches, select nodes as single, multiple, or cascading checkboxes, and template each node.

Collapsible tree

Director
- Curator
  - Assistant A
  - Assistant B
- Field lead

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

import { HbOrgChartImports, type HbOrgChartKey, type HbOrgChartNode } from '@herbst/ui';

@Component({
  selector: 'hb-demo-org-chart-basic',
  imports: [HbOrgChartImports],
  template: ` <hb-org-chart class="w-full" [hbNodes]="nodes" [(hbCollapsedKeys)]="collapsed" /> `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoOrgChartBasicComponent {
  protected readonly collapsed = signal<HbOrgChartKey[]>(['field']);
  protected readonly nodes: HbOrgChartNode[] = [
    {
      key: 'director',
      label: 'Director',
      children: [
        {
          key: 'curator',
          label: 'Curator',
          children: [
            { key: 'assistant-a', label: 'Assistant A' },
            { key: 'assistant-b', label: 'Assistant B' },
          ],
        },
        {
          key: 'field',
          label: 'Field lead',
          children: [{ key: 'collector', label: 'Collector' }],
        },
      ],
    },
  ];
}

Node template & selection

A. HerbstDirector
- M. VogelCurator
  - L. BraunAssistant
  - R. KleinAssistant
- S. AdlerField lead

Click a node · keys: []

Checkbox cascade & horizontal

API reference

hb-org-chart

Property	Description	Type	Default
[hbNodes]	The tree data. Each node is { key, label?, data?, children?, selectable?, collapsible?, styleClass? }.	HbOrgChartNode[]	[]
[hbLayout]	Grow the tree top-to-bottom or left-to-right.	'vertical' \| 'horizontal'	'vertical'
[hbSelectionMode]	How nodes are selected. checkbox cascades to descendants and reflects an indeterminate parent state.	'none' \| 'single' \| 'multiple' \| 'checkbox'	'none'
[(hbSelection)]	The selected node keys, two-way bound.	HbOrgChartKey[]	[]
[hbMetaKeySelection]	In multiple mode, require Ctrl/Cmd to add to the selection instead of toggling additively.	boolean	false
[hbCollapsible] / [(hbCollapsedKeys)]	Show branch togglers, and the two-way set of collapsed node keys.	boolean / HbOrgChartKey[]	true / []

Events & template

Property	Description	Type	Default
(hbNodeSelect) / (hbNodeUnselect)	Emit the node as it is selected or unselected.	HbOrgChartNode	—
(hbNodeExpand) / (hbNodeCollapse)	Emit the node when its branch is expanded or collapsed.	HbOrgChartNode	—
ng-template[hbOrgChartNode]	Render each node body. Context: $implicit = the node. Without it, the node label is shown.	template	—
node.selectable / node.collapsible / node.styleClass	Per-node overrides: block selection, block collapsing, or add classes to that node’s box.	boolean / string	—