cm-angular-org-chart
TypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

Hierarchical Organization Chart for Angular v14, v15 and v16 versions

The cm-angular-org-chart component displays heirarchal Organizational Chart.

Please install latest version for Error free.

Org Chart

Table of Contents

Version

Angular cm-angular-org-chart
16 3.0.0
15 2.0.0
14 1.1.3

Usage

Each employee is represented by an object with the following properties. Note that all the properties are optional.

Property Type Description
name string The name of the employee
cssClass string The CSS class to apply to the employee block
imageUrl string URL to the employee's image
designation string Employee's designation
subordinates Employee[] An array of subordinate employees

Installation

$ npm i cm-angular-org-chart

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CmAngularOrgChartModule } from 'cm-angular-org-chart';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CmAngularOrgChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

  <org-chart [topEmployee]="topEmployee" direction="vertical"></org-chart>

app.component.ts:

export class AppComponent {
  employeeImage = "assets/employee.png";
  topEmployee: any = {
    name: 'Sundar Pichai',
    cssClass: 'oc-superSenior',
    imageUrl: this.employeeImage,
    designation: 'Chief Executive Officer',
    subordinates: [
      {
        name: 'Thomas Kurian',
        cssClass: 'oc-senior',
        imageUrl: this.employeeImage,
        designation: 'CEO, Google Cloud',
      },
      {
        name: 'Susan Wojcicki',
        cssClass: 'oc-senior',
        imageUrl: this.employeeImage,
        designation: 'CEO, YouTube',
        subordinates: [
          {
            name: 'Beau Avril',
            cssClass: 'oc-me',
            imageUrl: this.employeeImage,
            designation: 'Global Head of Business Operations',
            subordinates: []
          },
          {
            name: 'Tara Walpert Levy',
            cssClass: 'oc-me',
            imageUrl: this.employeeImage,
            designation: 'VP, Agency and Brand Solutions',
            subordinates: [
              {
                name: 'Junior 1 David',
                cssClass: 'oc-junior',
                imageUrl: this.employeeImage,
                designation: 'CEO, Google Health',
                subordinates: []
              },
              {
                name: 'Junior 2 David',
                cssClass: 'oc-junior',
                imageUrl: this.employeeImage,
                designation: 'CEO, Google Health',
                subordinates: [
                  {
                    name: 'superJunior 1 David',
                    cssClass: 'oc-superJunior',
                    imageUrl: this.employeeImage,
                    designation: 'CEO, Google Health',
                    subordinates: []
                  },
                  {
                    name: 'superJunior 2 David',
                    cssClass: 'oc-superJunior',
                    imageUrl: this.employeeImage,
                    designation: 'CEO, Google Health',
                    subordinates: []
                  }
                ]
              }
            ]
          },
        ]
      },
      {
        name: 'Jeff Dean',
        cssClass: 'oc-senior',
        imageUrl: this.employeeImage,
        designation: 'Head of Artificial Intelligence',
        subordinates: [
          {
            name: 'David Feinberg (You)',
            cssClass: 'oc-me',
            imageUrl: this.employeeImage,
            designation: 'CEO, Google Health',
            subordinates: []
          }
        ]
      }
    ]
  };
}

Inputs

Name Type Description
topEmployee Employee object The Employe object mentioned above
direction vertical or horizontal Renders chart vertically or horizontally

Outputs

Name Parameters Description
itemClick Employee The Employee object which was clicked

Ex: <org-chart [topEmployee]="topEmployee" direction="vertical" (itemClick)="onClickItem($event)">

Default Look

Horizontal

Horizontal Chart

Vertical

Vertical Chart

Custom Styling

You can override default styles with your custom SCSS. Make sure you include your custom SCSS after including the default SCSS so that your styles override the default styles.

.oc-name {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.oc-designation {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.oc-border {
  border-color: #9E9E9E;
}

.oc-box {
  color: white;
  width: 10em;
}

// Custom cssClass from Employee object
.oc-superSenior {
	background-color: midnightblue;
}

.oc-senior {
	background-color: brown;
}

.oc-me {
	background-color: darkgreen;
}

.oc-junior {
	background-color: darkgoldenrod;
}

.oc-superJunior {
	background-color: purple;
    }

License

MIT

Author

Package Sidebar

Install

npm i cm-angular-org-chart

Weekly Downloads

49

Version

3.0.0

License

MIT

Unpacked Size

52.8 kB

Total Files

16

Last publish

Collaborators

  • chandumaram333