README
Angular Org Chart
An Angular 2+ library for displaying Organization charts. It's a very lightweigt library with the features currently not available in any other library. It's written in pure typescript and is developed focussing on Angular projects
Getting Started
For using the chart, you'll need to do the folloing steps:
Installation
npm install angular-org-chart --save
Add the dependency in module
Add 'OrgChartModule' in imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { OrgChartModule } from 'angular-org-chart';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
OrgChartModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Formatting the data in component
The data requires few parameters for displaying the correct chart:
{
name: "Element Value",
type: 'Element Type',
children:[]
}
Example component
import { Component } from '@angular/core';
import { OrgData } from 'angular-org-chart/src/app/modules/org-chart/orgData';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
orgData: OrgData= {
name: "Iron Man",
type: 'CEO',
children: [
{
name: "Captain America",
type: 'VP',
children: [
{
name: "Hawkeye",
type: 'manager',
children: []
},
{
name: "Antman",
type: 'Manager',
children: []
}
]
},
{
name: "Black Widow",
type: 'VP',
children: [
{
name: "Hulk",
type: 'manager',
children: [
{
name: "Spiderman",
type: 'Intern',
children: []
}
]
},
{
name: "Thor",
type: 'Manager',
children: [
{
name: "Loki",
type: 'Team Lead',
children: []
}
]
}
]
}
]
};
}
Using the org chart in HTML template
<angular-org-chart id="orgChartId" [data]="orgData"></angular-org-chart>
Pleaase note that 'id' is required if you want to change the css. As the style which you'll need to give for the boxes and the lines, you'll be required to add it on the basis of 'id' else the css won't be applied.
Personalized CSS
Use the 'id' and place these css: For Lines:
#orgChartId .org-chart-entity-border {
border-left: 1px solid green;
border-top: 1px solid green;
}
For Distance between the levels:
#orgChartId .org-chart-entity-connector {
height: 2em;
}
For box styles:
#orgChartId .org-chart-entity-box {
align-items: center;
border: 1px solid blue;
background-color: blue;
border-radius: 3px;
box-shadow: 0 .5rem 1rem #777!important;
}
Example
Features
- Expand/Collapse on clilck
- Custom Styles
- Maintained and lightweight code
Upcoming features
- Feature to turn off default expand/collapse on click.
- Icon support.
- More freedom of custom styles.
- Expand / Collapse all feature.
Authors
- Shrey Kumar Jain - Initial work - Blog