# ng-org-chart

> Hierarchical Organizational Chart for Angular (4+)

Latest version **1.2.0** (published 2017-07-14) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ng-org-chart
pnpm add ng-org-chart
yarn add ng-org-chart
bun add ng-org-chart
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2017-07-14 |
| First published | 2017-07-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 6.9.0 |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Ashish K. Mondal |
| Maintainers | nulldev |
| Keywords | org-chart, organization, organizational chart, heirarchal chart, ng, angular, angular 2, angular 4 |

## Links

- npm: https://www.npmjs.com/package/ng-org-chart
- Repository: https://github.com/nulldev07/org-chart
- Issues: https://github.com/nulldev07/org-chart/issues
- npm.io page: https://npm.io/package/ng-org-chart

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 1.2.0 (latest) — 2017-07-14
- 1.1.0 — 2017-07-12
- 1.0.3 — 2017-07-09
- 1.0.2 — 2017-07-09
- 1.0.1 — 2017-07-09

## README

# Hierarchical Organization Chart for Angular (4+)
[![Build Status](https://travis-ci.org/nulldev07/org-chart.svg?branch=master)](https://travis-ci.org/nulldev07/org-chart)

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

## Table of Contents

 * [Usage](#usage)
 * [Custom CSS](#custom-css)

## Usage
```bash
npm i ng-org-chart -S
```

### Include default styles in your `index.html`
```html
	<link rel="stylesheet" href="node_modules/ng-org-chart/styles.css">
```

### `app.module.ts`
```js
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`:
```html
<ng-org-chart [topEmployee]="topEmployee"></ng-org-chart>
```

### `app.component.ts`:
```js
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:

![Sample Organizational Chart](https://raw.githubusercontent.com/nulldev07/org-chart/master/sample-org-chart.png)

## 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.
```css
.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;
}
```

---
_Source: https://npm.io/package/ng-org-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._