Angular PrimeNG OrganizationChart Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG OrganizationChart Component.

The OrganizationChart Component visualizes the data in hierarchical organizational data. The data is arranged in the tree format. The component provides a lot of properties, styling, events, templates, etc. which can be modified to create many variations.

Angular PrimeNG OrganizationChart Component: There are various components that are utilized to enhance the OrganizationChart Component, along with increasing user interactivity, which is described below:

• Basic: This component can be used to display the data with zero configuration in a hierarchical manner.
• Advanced: This component can be used to render the hierarchical data in a more organized manner by implementing different stylings & properties.
• Templating: This component can be used to enable enhanced customization, where the type property in TreeNode API, can be used to match the pTemplate type, so templating can be done per node.
• Expand/Collapse State: This component can be used to render the treenode as expanded, by default, we need to set the expanded property as true in the modal.
• Selection: This component has 2 methods, i.e., single or multiple. Setting the selectionMode property by giving a single TreeNode or an array of TreeNodes depending on the different selection modes, the Selection can be enabled.
• Properties: This component provides different properties that can be used to enhance the OrganizationChart by implementing them.
• Events: This component provides the different events that enable the various functionalities of the OrganizationChart, along with enhancing the overall user experience.
• Styling: This component provides the list of structural style classes, that increase the overall user experience. 

Creating Angular application & Module Installation:

• Create an Angular application using the following command.

ng new geeks_angular

• After creating your project folder i.e. geeks_angular, move to it using the following command.

cd geeks_angular

• Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project structure will look like the following:

• Steps to run the application: Run the below command to see the output:

ng serve --save

Example 1: Below is the example that illustrates the use of the Angular PrimeNG OrganizationChart Component.

• app.component.html:

HTML

<h1 style="color: green;
           text-align:center;">
    GeeksforGeeks
</h1>
<h3>
    Angular PrimeNG OrganizationChart Component
</h3>

<p-organizationChart [value]="data1"
                     selectionMode="single"
                     [preserveSpace]="false">
</p-organizationChart>

• app.component.ts

Javascript

import { Component, OnInit, ViewEncapsulation }
    from '@angular/core';
import { TreeNode } from 'primeng/api';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    data1: TreeNode[];
    selectedNode: TreeNode;

    constructor(private messageService: MessageService) { }

    ngOnInit() {
        this.data1 = [
            {
                label: 'Data Structures and Algorithms',
                expanded: true,
                children: [
                    {
                        label: 'Data Structures',
                        expanded: true,
                        children: [
                            {
                                label: 'Queue',
                            },
                            {
                                label: 'Red-Black Tree',
                            },
                        ],
                    },
                    {
                        label: 'Algorithms',
                        expanded: true,
                        children: [
                            {
                                label: 'Hashing',
                            },
                            {
                                label: 'Divide and Conquer',
                            },
                        ],
                    },
                ],
            },
        ];
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent }
    from './app.component';
import { OrganizationChartModule }
    from 'primeng/organizationchart';
import { ToastModule } from 'primeng/toast';
import { PanelModule } from 'primeng/panel';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        OrganizationChartModule,
        ToastModule,
        PanelModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

Output:

Example 2: In the following example, we have implemented the multiple selection mode as well as preserveSpace by setting it to true.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
  GeeksforGeeks
</h1>
<h3>
      Angular PrimeNG OrganizationChart Component
</h3>

<p-organizationChart [value]="data1"
                          selectionMode="multiple"
                          [preserveSpace]="true">
</p-organizationChart>

• app.component.ts

Javascript

import { Component, OnInit, ViewEncapsulation }
    from '@angular/core';
import { TreeNode } from 'primeng/api';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    data1: TreeNode[];
    selectedNode: TreeNode;

    constructor(private messageService: MessageService) { }

    ngOnInit() {
        this.data1 = [
            {
                label: 'Data Structures and Algorithms',
                expanded: true,
                children: [
                    {
                        label: 'Data Structures',
                        expanded: true,
                        children: [
                            {
                                label: 'Queue',
                            },
                            {
                                label: 'Red-Black Tree',
                            },
                        ],
                    },
                    {
                        label: 'Algorithms',
                        expanded: true,
                        children: [
                            {
                                label: 'Hashing',
                            },
                            {
                                label: 'Divide and Conquer',
                            },
                        ],
                    },
                ],
            },
        ];
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent }
    from './app.component';
import { OrganizationChartModule }
    from 'primeng/organizationchart';
import { ToastModule } from 'primeng/toast';
import { PanelModule } from 'primeng/panel';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        OrganizationChartModule,
        ToastModule,
        PanelModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

Output:

Reference: https://primefaces.org/primeng/organizationchart