Angular PrimeNG OrganizationChart Expand/Collapse State

Last Updated : 01 Feb, 2023

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 {}