How To Create Organization Chart In Angular Application

Introduction

 

In this article, we will learn how to create an Organization Chart in Angular Application. In this article, we use the PrimeNG component to create Organization Chart. PrimeNG is a free and open-source library of UI components. It is developed by PrimeTek Informatics. PrimeNG provides 80+ UI components in a single library, so there is no need to add any other library for different UIs. Learn more about primeNG from the below links,

• PrimeNG UI Components For Angular 7 Application
• PrimeNG UI Components For Angular - Sidebar, Lightbox, And Tooltip

Prerequisites

• Basic Knowledge of Angular 2 or higher
• Visual Studio Code
• Node and NPM installed

Let's create an Angular project by using the following command,

ng new KanData

Open this project in Visual Studio Code and PrimeNG by using the following commands,

npm install primeng --save
npm install primeicons --save

Now install bootstrap by using the following command,

npm install bootstrap --save

Now open the styles.css file and add these lines,

@import '~bootstrap/dist/css/bootstrap.min.css';
@import '../node_modules/primeng/resources/themes/saga-blue/theme.css';
@import '../node_modules/primeicons/primeicons.css';

Now create a new component using the following command,

ng g c Orgchart

Now open orgchart.component.ts file and add the following code,

import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';

@Component({
  selector: 'app-orgchart',
  templateUrl: './orgchart.component.html',
  styleUrls: ['./orgchart.component.css']
})
export class OrgchartComponent implements OnInit {

  constructor() { }
  data1: TreeNode[];

    data2: TreeNode[];

    selectedNode: TreeNode;
  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 orgchart.component.html file and add the following code,

<div class="container" style="margin-top:10px;margin-bottom: 24px;">
    <div class="col-sm-12 btn btn-success">
      How To Create Organization Chart in Angular Application
    </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><br /></div>
          <div class="name_css_profile name_profile_one"><span class="rel_label_name">{{node.label}}</span></div>
        </div>
      </ng-template>
  </p-organizationChart>
  </div>

Now open orgchart.component.css file and add the following css classes,

.node-header, .node-content {
    padding: .5em .7rem;
}

.node-header {
    background-color: #495ebb;
    color: #ffffff;
}

.node-content {
    text-align: center;
    border: 1px solid #495ebb;
}

.node-content img {
    border-radius: 50%;
}

.department-cfo {
    background-color: #7247bc;
    color: #ffffff;
}

.department-coo {
    background-color: #a534b6;
    color: #ffffff;
}

.department-cto {
    background-color: #e9286f;
    color: #ffffff;
}

:host / .p-organizationchart .p-organizationchart-node-content:hover {
    background: #DEEDF9 !important;
    cursor: pointer;
  }
  :host /deep/ .p-organizationchart .p-organizationchart-node-content {
    border: 1px solid #e0e5e6 !important;
    color: #495057 !important;
    padding: 0.6rem !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    margin-top: -11px;
    margin-bottom: -11px !important;
  }
  :host /deep/ .p-organizationchart .p-organizationchart-line-down {
    height: 30px !important;
  }

  :host /deep/ .node-content {
    text-align: center;
    border: 0px solid #b0c2d6;
  }

  :host /deep/ .node-content {
    text-align: center;
    border: none !important;
    /* border: 1px solid #bdc2d6; */
    border-radius: 2px !important;
  }

Now open app.module.ts file and add the following code,

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';
import { OrgchartComponent } from './orgchart/orgchart.component';

@NgModule({
  declarations: [
    AppComponent,
    OrgchartComponent
  ],
  imports: [
    BrowserModule,HttpClientModule,OrganizationChartModule,BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now open app.component.html file and add the following code,

<app-orgchart></app-orgchart>

Now, please run the application using the 'npm start' command and check the result.

 

Summary

 

In this article, we learned how to create an Organization Chart in Angular Applications.