ng-org-chart

WebJar for ng-org-chart

License	MIT
GroupId	org.webjars.npm
ArtifactId	ng-org-chart
Last Version	1.2.0
Release Date	Nov 12, 2018
Type	jar
Description	ng-org-chart WebJar for ng-org-chart
Project URL	http://webjars.org
Source Code Management	https://github.com/nulldev07/org-chart

Download ng-org-chart

Filename	Size
ng-org-chart-1.2.0.pom
ng-org-chart-1.2.0.jar	20 KB
ng-org-chart-1.2.0-sources.jar	22 bytes
ng-org-chart-1.2.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/ng-org-chart/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>ng-org-chart</artifactId>
    <version>1.2.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/ng-org-chart/
implementation 'org.webjars.npm:ng-org-chart:1.2.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/ng-org-chart/
implementation ("org.webjars.npm:ng-org-chart:1.2.0")

Apache Buildr

'org.webjars.npm:ng-org-chart:jar:1.2.0'

Apache Ivy

<dependency org="org.webjars.npm" name="ng-org-chart" rev="1.2.0">
  <artifact name="ng-org-chart" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='ng-org-chart', version='1.2.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "ng-org-chart" % "1.2.0"

Leiningen

[org.webjars.npm/ng-org-chart "1.2.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

This repo is deprecated and no longer maintained. Please consider using @mondal/org-chart from Mondal UI.

Hierarchical Organization Chart for Angular (4+)

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

Table of Contents

• Usage
• Custom CSS

Usage

npm i ng-org-chart -S

Include default styles in your index.html

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

app.module.ts

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

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, OrgChartModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

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

app.component.ts:

export class AppComponent {
    topEmployee: IEmployee = {
        name: 'Janis Martin',
        designation: 'CEO',
        subordinates: [
            {
                name: 'Matthew Wikes',
                designation: 'VP',
                subordinates: [
                    {
                        name: 'Tina Landry',
                        designation: 'Budget Analyst',
                        subordinates: []
                    }

                ]
            },
            {
                name: 'Patricia Lyons',
                designation: 'VP',
                subordinates: [
                    {
                        name: 'Dylan Wilson',
                        designation: 'Web Manager',
                        subordinates: []
                    },
                    {
                        name: 'Deb Curtis',
                        designation: 'Art Director',
                        subordinates: []
                    }
                ]
            },
            {
                name: 'Larry Phung',
                designation: 'VP',
                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;
}

Versions

Version
1.2.0 Nov 12, 2018