ng2-org-chart

Hierarchical Organization Chart for Angular (4+)

The ng2-org-chart component displays heirarchal Organizational Chart.

This is extended version of ng2-org-chart with images. Million Credits to ng2-org-chart

Table of Contents

• Usage
• Custom CSS

Usage

npm i ng2-org-chart -S

Include default styles in your index.html

    <link rel="stylesheet" href="node_modules/ng2-org-chart/styles.css">

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { OrgChartModule } from 'ng2-org-chart';
 
import { AppComponent } from './app.component';
 
@NgModule({
    imports: [BrowserModule, OrgChartModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

<ng2-org-chart [topEmployee]="topEmployee"></ng2-org-chart>

app.component.ts:

export class AppComponent {
    topEmployee: IEmployee = {
        name: 'Janis Martin',
        designation: 'CEO',
        img: "./assets/data/img/b.JPG",
        subordinates: [
            {
                name: 'Matthew Wikes',
                designation: 'VP',
                img: "./assets/data/img/b.JPG",
                subordinates: [
                    {
                        name: 'Tina Landry',
                        designation: 'Budget Analyst',
                        subordinates: []
                    }
 
                ]
            },
            {
                name: 'Patricia Lyons',
                designation: 'VP',
                img: "./assets/data/img/c.JPG",
                subordinates: [
                    {
                        name: 'Dylan Wilson',
                        designation: 'Web Manager',
                        img: "./assets/data/img/b.JPG",
                        subordinates: []
                    },
                    {
                        name: 'Deb Curtis',
                        designation: 'Art Director',
                        img: "./assets/data/img/c.JPG",
                        subordinates: []
                    }
                ]
            },
            {
                name: 'Larry Phung',
                designation: 'VP',
                img: "./assets/data/img/a.JPG",
                subordinates: []
            }
        ]
    };
}

Here is the rendered output:

Custom CSS

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

.oc-border {
    border: 1px solid green;
}
 
.oc-background {
    background-color: limegreen;
}
 
.oc-name {
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
    white-space: nowrap;
}
 
.oc-designation {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-style: italic;
    white-space: nowrap;
}
 
.oc-img {
    margin-left: -10px;
    width: 60px;
    height: 60px;
}