How To Create Organization Chart In Angular 14

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.

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories