OrganizationChart visualizes hierarchical organization data.
import { OrganizationChartModule } from 'primeng/organizationchart';
OrganizationChart requires a collection of TreeNode instances as a value.
<p-organizationChart [value]="data"></p-organizationChart>
Custom content instead of a node label is defined using the pTemplate property.
<p-organizationChart [value]="data">
<ng-template let-node pTemplate="default">
<div class="p-2 text-center">
<img src="https://primefaces.org/cdn/primeng/images/flag/flag_placeholder.png" [alt]="node.label" [class]="'flag' + ' flag-' + node.data" width="32" />
<div>{{ node.data.name }}</div>
<div class="p-2">{{ node.label }}</div>
</div>
</ng-template>
</p-organizationChart>
Nodes can be selected by defining selectionMode along with a value binding with selection properties. By default only one node can be selected, set selectionMode as multiple to select more than one.
<p-organizationChart [value]="data" selectionMode="multiple" [(selection)]="selectedNodes">
<ng-template let-node pTemplate="person">
<div class="p-2 text-center">
<img [src]="node.data.image" class="mb-3 w-3rem h-3rem" />
<div class="font-bold">{{ node.data.name }}</div>
<div>{{ node.data.title }}</div>
</div>
</ng-template>
</p-organizationChart>
Styling a specific node is configured with class and style options of a TreeNode.
<p-organizationChart [value]="data">
<ng-template let-node pTemplate="person">
<div class="p-2 text-center">
<img [src]="node.data.image" class="mb-3 w-3rem h-3rem" />
<div class="font-bold">{{ node.data.name }}</div>
<div>{{ node.data.title }}</div>
</div>
</ng-template>
</p-organizationChart>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-organizationchart | Container element. |
p-organizationchart-table | Table container of a node. |
p-organizationchart-lines | Connector lines container. |
p-organizationchart-nodes | Contained of node children. |
p-organizationchart-line-right | Right side line of a node connector. |
p-organizationchart-line-left | Left side line of a node connector. |
p-organizationchart-line-top | Top side line of a node connector. |
Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level of reader support in the upcoming versions.
Key | Function |
---|---|
tab | Moves focus through the focusable elements within the chart. |
enter | Toggles the expanded state of a node. |
space | Toggles the expanded state of a node. |
API defines helper props, events and others for the PrimeNG OrganizationChart module.
Name | Type | Default | Description |
---|---|---|---|
value | null | TreeNode[] | An array of nested TreeNodes. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
selectionMode | string | null | Defines the selection mode, valid values "single" and "multiple". |
selection | any | null | A single treenode instance or an array to refer to the selections. |
preserveSpace | boolean | true | Whether the space allocated by a node is preserved when hidden. |
Name | Parameters |
---|---|
togglericon | $implicit: node.expanded |
Name | Parameters | Description |
---|---|---|
onNodeSelect | event.originalEvent: browser event event.node: Selected node instance. | Callback to invoke when a node is selected. |
onNodeUnselect | event.originalEvent: browser event event.node: Unselected node instance. | Callback to invoke when a node is unselected. |
onNodeExpand | event.originalEvent: browser event event.node: Expanded node instance. | Callback to invoke when a node is expanded. |
onNodeCollapse | event.originalEvent: browser event event.node: Collapsed node instance. | Callback to invoke when a node is collapsed. |