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:

👁 Image

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:

• app.component.ts:

• app.module.ts:

Output:

👁 Image

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:

• app.component.ts:

• app.module.ts:

Output:

👁 Image

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