Skip to content
AbsoluteUI

Organization Chart for Angular

import { AuiOrgChart } from '@absoluteui/angular/org-chart';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Organization Chart page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { orgChart: { ... } } }) (see Configuration).

Example

Section titled “Example”
import { Component } from '@angular/core';
import type { OrgChartNode, OrgChartNodeSelectDetail } from '@absoluteui/components/org-chart';
import { AuiOrgChart } from '@absoluteui/angular/org-chart';


@Component({
  selector: 'app-org',
  imports: [AuiOrgChart],
  template: `<aui-org-chart label="Company" [nodes]="nodes" orientation="horizontal" (nodeSelected)="open($event)"></aui-org-chart>`,
})
export class OrgComponent {
  readonly nodes: OrgChartNode[] = [
    { id: 'ceo', parentId: null, label: 'Ada Lovelace', title: 'CEO' },
    { id: 'cto', parentId: 'ceo', label: 'Grace Hopper', title: 'CTO' },
  ];


  open(detail: OrgChartNodeSelectDetail): void {
    // show detail.node in a side panel
  }
}

<aui-org-chart>

Section titled “<aui-org-chart>”

Class AuiOrgChart; template reference #ref="auiOrgChart".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Section titled “Inputs”
Input Type Default Description
label string Required. Accessible name of the tree (aria-label); the toolbar is named ‘{label} controls’. Non-empty.
expanded readonly string[] Explicitly expanded node ids (overrides expandDepth). Read the current set from the expanded getter.
selected string | null Selected node id (aria-selected=true).
renderNode (node: Readonly<OrgChartNode>, context: OrgChartRenderContext) => Node Card content ({ depth, expanded, childCount, doc } context). Return non-interactive content: the treeitem is the control and its text is its accessible name. Default: initials, label, title, description.
loadChildren (node: Readonly<OrgChartNode>, signal: AbortSignal) => Promise<readonly OrgChartNode[]> Loads the reports of a node with hasChildren on its first expansion (validated; each parentId must be a known or returned node). Rejections and timeouts keep the node collapsed, announce the failure, and emit aui-load-error.
editable boolean false Edit mode: re-parent nodes by pointer drag onto the new manager, Ctrl/Cmd+X then Ctrl/Cmd+V, or the toolbar Move / Move here buttons; undo and redo.
canMove (node: Readonly<OrgChartNode>, parent: Readonly<OrgChartNode> | null) => boolean Veto a move (edit mode and moveNode). Cycles and locked nodes are always refused.
historyLimit number '50' Undo depth, integer 0..500 (0 disables history).
orientation OrgChartOrientation 'vertical' ‘vertical’: managers above their reports (top-down); ‘horizontal’: managers at the inline start, reports toward the inline end.
nodeWidth number '200' Card width in CSS px, integer 80..600.
nodeHeight number '72' Card height in CSS px, integer 32..400.
siblingGap number '24' Space between neighboring cards of a level, integer 4..400 CSS px.
levelGap number '48' Space between levels (connector length), integer 16..400 CSS px.
expandDepth number '2' Levels expanded initially when expanded is not given (integer 0..64; 0 shows only the top-level nodes).
minZoom number '0.2' Smallest zoom factor, 0.05..1.
maxZoom number '2' Largest zoom factor, 1..8.
requestTimeoutMs number '30000' loadChildren timeout in ms (integer 100..600000); the signal is aborted with a TimeoutError.
locale string 'en-US' Locale of search, typeahead, report counts, zoom percentages, and messages.
direction Direction 'ltr' rtl mirrors the layout (first report on the right; horizontal charts grow to the left) and swaps ArrowLeft/ArrowRight.

Two-way bindings

Section titled “Two-way bindings”
Model Type Change output Description
[(nodes)] readonly OrgChartNode[] (nodesChange) Flat nodes: { id (unique), parentId (manager id or null for a top-level node), label (name), title?, description?, hasChildren? (reports exist but load through loadChildren), locked? (cannot be moved in edit mode) }. Validated: unique ids, known parents, no cycles (ORG_CHART_OPTIONS). Sibling order follows the array. Replacing it with update() clears the undo history.

Outputs

Section titled “Outputs”
Output Payload Description
(nodeSelected) OrgChartNodeSelectDetail A node was selected by click, Enter, or Space. Re-emits aui-node-select.
(expandChange) OrgChartExpandChangeDetail A node was expanded (after its reports loaded) or collapsed through the UI or setExpanded. Re-emits aui-expand-change.
(nodeMoved) OrgChartNodeMoveDetail A node got a new manager (drag, paste, toolbar, moveNode, undo, redo). Save detail.nodes or send the change to the server. Re-emits aui-node-move.
(zoomed) OrgChartZoomDetail The zoom changed through the toolbar, keys, Ctrl/Cmd + wheel, or zoomTo (fit does not emit). Re-emits aui-zoom.
(loadError) OrgChartLoadErrorDetail loadChildren rejected, timed out, or returned invalid nodes. Re-emits aui-load-error.

Read-only state

Section titled “Read-only state”
Property Type Description
canUndo Signal<boolean> Move history is available.
canRedo Signal<boolean> Move history is available.
scale Signal<number> Current zoom factor.

Methods

Section titled “Methods”

Call them through a viewChild query or a template reference.

Method Description
setExpanded(id: string, expanded: boolean): Promise<void> | undefined Expand (loading lazy reports first) or collapse a node. Emits aui-expand-change.
expandAll(): void Expand every node with loaded reports (lazy nodes are not loaded) / collapse all.
collapseAll(): void Expand every node with loaded reports (lazy nodes are not loaded) / collapse all.
search(query: string): string[] | undefined Ids whose label, title, or description contains the text (case-insensitive, locale-aware), in tree order, including collapsed nodes.
pathTo(id: string): string[] | undefined Ids from the top-level node down to the node.
reveal(id: string, options?: { focus?: boolean; select?: boolean; highlight?: boolean; } | undefined): void | undefined Expand the node’s managers, center it, highlight its path (cards and connectors; default on), focus it (default) and optionally select it; announces ‘Path: A, B, C.’
clearHighlight(): void Remove the path highlight.
select(id: string | null): void Select a node without emitting aui-node-select.
centerOn(id: string): void Center the view on a visible node (keeps the zoom).
fit(): void Scale (at most 100 %) and center the whole visible chart in the viewport; announces the zoom.
zoomTo(scale: number): void Zoom around the viewport center, clamped to minZoom..maxZoom; announces ‘Zoom {percent}’ and emits aui-zoom.
moveNode(id: string, parentId: string | null, index?: number | undefined): boolean | undefined Re-parent a node (index among the new siblings, default last; null parent = top level). Returns false (and announces) when refused: cycle, locked node, or canMove. Undoable; emits aui-node-move.
undo(): boolean | undefined Undo / redo the last move (parent and position). Announce and emit aui-node-move (reason ‘undo’ / ‘redo’); false when there is nothing to undo/redo.
redo(): boolean | undefined Undo / redo the last move (parent and position). Announce and emit aui-node-move (reason ‘undo’ / ‘redo’); false when there is nothing to undo/redo.

Templates

Section titled “Templates”

Customize rendering with AuiItem from @absoluteui/angular/templates.