Angular OrganizationChart

Angular OrganizationChart visualizes hierarchical organization data.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {OrganizationChartModule} from 'primeng/organizationchart';

Getting Started

OrganizationChart requires a model of TreeNode as its value. More information about TreeNode API is available at documentation of tree component.

import {TreeNode} from 'primeng/api';

<p-organizationChart [value]="data"></p-organizationChart>

export class MyComponents implements OnInit {

    data: TreeNode[];

    ngOnInit() {
        this.data = [{
            label: 'Root',
            children: [
                {
                    label: 'Child 1',
                    children: [
                        {
                            label: 'Grandchild 1.1'
                        },
                        {
                            label: 'Grandchild 1.2'
                        }
                    ]
                },
                {
                    label: 'Child 2',
                    children: [
                        {
                            label: 'Child 2.1'
                        },
                        {
                            label: 'Child 2.2'
                        }
                    ]
                }
            ]
        }];
}

Templating

Label of the treenode is displayed inside the node content by default and templating enables enhanced customization. TreeNode API has type property which is used to match the pTemplate type so templating can be done per node as well. In example below, nodes with type "leaf" are displayed with bold text. Note that a pTemplate whose type is "default" applies to all nodes that have no type property defined.

<p-organizationChart [value]="data"
    styleClass="company">
    <ng-template let-node pTemplate="leaf">
        <span style="font-weight:bold">{{node.label}}</span>
    </ng-template>
    <ng-template let-node pTemplate="default">
        {{node.label}}
    </ng-template>
</p-organizationChart>

export class MyComponents implements OnInit {

    data: TreeNode[];

    ngOnInit() {
        this.data = [{
            label: 'Root',
            children: [
                {
                    label: 'Child 1',
                    children: [
                        {
                            label: 'Grandchild 1.1', type: 'leaf'
                        },
                        {
                            label: 'Grandchild 1.2', type: 'leaf'
                        }
                    ]
                },
                {
                    label: 'Child 2',
                    children: [
                        {
                            label: 'Child 2.1', type: 'leaf'
                        },
                        {
                            label: 'Child 2.2', type: 'leaf'
                        }
                    ]
                }
            ]
        }];
}

Expand/Collapse State

In order to display a treenode as expanded by default, set "expanded" property as true in your model.

Selection

OrganizationChart supports 2 selection methods; single or multiple. Selection is enabled by setting selectionMode property and providing a single TreeNode or an array of TreeNodes to reference the selections depending on the selection mode.

<p-organizationChart [value]="data" selectionMode="single" [(selection)]="selectedNode"></p-organizationChart>

export class MyComponents implements OnInit {

    data: TreeNode[];

    ngOnInit() {
        this.data = [{
            label: 'Root',
            children: [
                {
                    label: 'Child 1,
                    children: [
                        {
                            label: 'Grandchild 1.1', type: 'leaf'
                        },
                        {
                            label: 'Grandchild 1.2', type: 'leaf'
                        }
                    ]
                },
                {
                    label: 'Child 2',
                    children: [
                        {
                            label: 'Child 2.1', type: 'leaf'
                        },
                        {
                            label: 'Child 2.2', type: 'leaf'
                        }
                    ]
                }
            ]
        }];
}

Theming

OrganizationChart supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG OrganizationChart showcase for demos and documentation.