In this article, we create an Organization Chart in Angular 14. We are using the PrimeNG component to create Organization Chart.
Introduction
- PrimeNG is a free and open-source library of User Interface (UI) components. It is developed by PrimeTek Informatics.
- PrimeNG provides 80+ user interface components in a single library, so there is no need to add any other library for different UIs.
Prerequisites
- Basic Knowledge of Angular
- Visual Studio Code
First, create an Angular project by using the following command,
ng new AngularOrganizationChart
Install dependency and bootstrap using these commands.
npm install primeng --save npm install primeicons --save npm install bootstrap --save
Now, open the app.component.ts file and add the following code to this file.
import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor() { }
data1: TreeNode[] | any;
data2: TreeNode[] | any;
selectedNode: TreeNode | any;
ngOnInit(): void {
this.data1 = [{
label: 'CEO',
type: 'person',
styleClass: 'p-person',
expanded: true,
data: { name: 'Walter White', 'avatar': 'walter.jpg' },
children: [
{
label: 'CFO',
type: 'person',
styleClass: 'p-person',
expanded: true,
data: { name: 'Saul Goodman', 'avatar': 'saul.jpg' },
children: [{
label: 'Tax',
styleClass: 'department-cfo'
},
{
label: 'Legal',
styleClass: 'department-cfo'
}],
},
{
label: 'COO',
type: 'person',
styleClass: 'p-person',
expanded: true,
data: { name: 'Mike E.', 'avatar': 'mike.jpg' },
children: [{
label: 'Operations',
styleClass: 'department-coo'
}]
},
{
label: 'CTO',
type: 'person',
styleClass: 'p-person',
expanded: true,
data: { name: 'Jesse Pinkman', 'avatar': 'jesse.jpg' },
children: [{
label: 'Development',
styleClass: 'department-cto',
expanded: true,
children: [{
label: 'Analysis',
styleClass: 'department-cto'
},
{
label: 'Front End',
styleClass: 'department-cto'
},
{
label: 'Back End',
styleClass: 'department-cto'
}]
},
{
label: 'QA',
styleClass: 'department-cto'
},
{
label: 'R&D',
styleClass: 'department-cto'
}]
}
]
}];
}
}
Now, open the app.component.html file and add the following code to this file.
<div class="container" style="margin-top:10px;margin-bottom: 24px;">
<div class="col-sm-12 btn btn-success">
Organization Chart
</div>
</div>
<div class="col-sm-12">
<p-organizationChart [value]="data1" selectionMode="single" [(selection)]="selectedNode" styleClass="company">
<ng-template let-node pTemplate="person">
<div class="node-content row e" style=" width: 225px !important;
margin-top: -11px; margin-bottom: -11px;">
<div class="relatipn_ship_css_client rel_client_one"><span class="rel_node_name"
style="padding-left: 83px;">{{node.name}}</span></div>
<div class="name_css_profile name_profile_one mb-3"><span class="rel_label_name">{{node.label}}</span></div>
</div>
</ng-template>
</p-organizationChart>
</div>
Now, open the app.module.ts file and add the following code to this file.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { OrganizationChartModule } from 'primeng/organizationchart';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, HttpClientModule, OrganizationChartModule, BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Summary
In this article, we learned how to create an Organization Chart in Angular 14.
