Angular PrimeNG OrganizationChart Expand/Collapse State

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 Expand/Collapse State.

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. In your model, set the "expanded" property to true to display a tree node as expanded by default.

Syntax:

// In app.component.html file

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

// In app.component.html file

ngOnInit() {
    this.gfg = [
        {
            label: "...",
            expanded: true,
            ......
        }
    ];
}

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save
npm install chart.js --save

Project Structure: It 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 Expand/Collapse State using Expanded state.

• app.component.html:

HTML

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

<p-organizationChart
    [value]="gfg"
    selectionMode="single">
</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 {
    gfg: TreeNode[];
    selectedNode: TreeNode;

    constructor(private messageService: MessageService) {}

    ngOnInit() {
        this.gfg = [
            {
                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: Below is another example code that illustrates the use of the Angular PrimeNG OrganizationChart Expand/Collapse State using Collapsed state.

• app.component.html:

HTML

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

<p-organizationChart
    [value]="gfg"
    selectionMode="single">
</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 {
    gfg: TreeNode[];
    selectedNode: TreeNode;

    constructor(private messageService: MessageService) {}

    ngOnInit() {
        this.gfg = [
            {
                label: "Data Structures and Algorithms",
                expanded: false,
                children: [
                    {
                        label: "Data Structures",
                        expanded: false,
                        children: [
                            {
                                label: "Queue"
                            },
                            {
                                label: "Red-Black Tree"
                            }
                        ]
                    },
                    {
                        label: "Algorithms",
                        expanded: false,
                        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://www.primefaces.org/primeng/organizationchart