# @fdjlss/ngx-org-chart

> Hierarchical Organization Chart

Latest version **1.1.10** (published 2024-04-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install @fdjlss/ngx-org-chart
pnpm add @fdjlss/ngx-org-chart
yarn add @fdjlss/ngx-org-chart
bun add @fdjlss/ngx-org-chart
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.10 |
| Published | 2024-04-24 |
| First published | 2023-11-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 144.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Mümin Celal Pinar |
| Maintainers | georgec3 |
| Keywords | org-chart, organization, hierarchical, organization chart, hierarchical chart, angular, ng, angular 8 |

## Links

- npm: https://www.npmjs.com/package/@fdjlss/ngx-org-chart
- Repository: https://github.com/fdjlss/ngx-org-chart
- Homepage: https://github.com/fdjlss/ngx-org-chart#readme
- Issues: https://github.com/fdjlss/ngx-org-chart/issues
- npm.io page: https://npm.io/package/@fdjlss/ngx-org-chart

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## 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.1.10 (latest) — 2024-04-24
- 1.1.9 — 2024-04-24
- 1.1.8 — 2024-04-24
- 1.1.7 — 2024-04-24
- 1.1.6 — 2024-04-24
- 1.1.5 — 2024-04-23
- 1.1.4 — 2024-04-17
- 1.1.3 — 2024-04-17
- 1.1.2 — 2023-12-27
- 1.1.1 — 2023-12-27
- 1.1.0 — 2023-12-27
- 1.0.14 — 2023-11-17
- 1.0.13 — 2023-11-17
- 1.0.12 — 2023-11-17
- 1.0.11 — 2023-11-17
- … 10 more at https://npm.io/package/@fdjlss/ngx-org-chart/versions

## README

# @fdjlss/ngx-org-chart

Based off of mumincelal's original [ngx-org-chart](https://www.npmjs.com/package/ngx-org-chart).\
README incomplete beyond this point. Some features may be broken, missing, or left undocumented.

---

The `ngx-org-chart` creates hierarchical organization chart.
You can create hierarchical organization charts with it.

It applies multiple root node. That means you can create multiple organization charts at the same time.

![Org Chart](https://raw.githubusercontent.com/mumincelal/ngx-org-ui/master/projects/ngx-org-chart/organization-chart-horizontal.png)
![Org Chart](https://raw.githubusercontent.com/mumincelal/ngx-org-ui/master/projects/ngx-org-chart/organization-chart-vertical.png)

## Table of Contents

  * [Installation](#installation)
  * [Usage](#usage)
  * [Inputs](#inputs)

## Installation

You can install the package using following command.

```sh
$ npm install @fdjlss/ngx-org-chart
```

Import below file into style.scss file.

```scss
@import '../node_modules/@fdjlss/ngx-org-chart/theming';
```

## Usage

|Property|Type|Description
|---|---|---
|name|`string`|Name of the node
|cssClass|`string`|Custom css class for the node
|image|`string`|Image of the node
|title|`string`|The node's title
|children|`Node[]`|The array of child nodes

### `app.module.ts`
```js
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgxOrgChartModule } from 'ngx-org-chart';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    AppRoutingModule,
    NgxOrgChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

### `app.component.html`
```html
<ngx-org-chart [nodes]="nodes" direction="vertical" (itemClick)="test($event)"></ngx-org-chart>
```

### `app.component.ts`
```js
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  nodes: any = [
    {
      name: 'Sundar Pichai',
      cssClass: 'ngx-org-ceo',
      image: '',
      title: 'Chief Executive Officer',
      children: [
        {
          name: 'Thomas Kurian',
          cssClass: 'ngx-org-ceo',
          image: 'assets/node.svg',
          title: 'CEO, Google Cloud',
        },
        {
          name: 'Susan Wojcicki',
          cssClass: 'ngx-org-ceo',
          image: 'assets/node.svg',
          title: 'CEO, YouTube',
          children: [
            {
              name: 'Beau Avril',
              cssClass: 'ngx-org-head',
              image: 'assets/node.svg',
              title: 'Global Head of Business Operations',
              children: []
            },
            {
              name: 'Tara Walpert Levy',
              cssClass: 'ngx-org-vp',
              image: 'assets/node.svg',
              title: 'VP, Agency and Brand Solutions',
              children: []
            },
            {
              name: 'Ariel Bardin',
              cssClass: 'ngx-org-vp',
              image: 'assets/node.svg',
              title: 'VP, Product Management',
              children: []
            }
          ]
        },
        {
          name: 'Jeff Dean',
          cssClass: 'ngx-org-head',
          image: 'assets/node.svg',
          title: 'Head of Artificial Intelligence',
          children: [
            {
              name: 'David Feinberg',
              cssClass: 'ngx-org-ceo',
              image: 'assets/node.svg',
              title: 'CEO, Google Health',
              children: []
            }
          ]
        }
      ]
    },
    {
      name: 'Sundar Pichai',
      cssClass: 'ngx-org-ceo',
      image: 'assets/node.svg',
      title: 'Chief Executive Officer',
      children: [
        {
          name: 'Thomas Kurian',
          cssClass: 'ngx-org-ceo',
          image: 'assets/node.svg',
          title: 'CEO, Google Cloud',
        },
        {
          name: 'Susan Wojcicki',
          cssClass: 'ngx-org-ceo',
          image: 'assets/node.svg',
          title: 'CEO, YouTube',
          children: [
            {
              name: 'Beau Avril',
              cssClass: 'ngx-org-head',
              image: 'assets/node.svg',
              title: 'Global Head of Business Operations',
              children: []
            },
            {
              name: 'Tara Walpert Levy',
              cssClass: 'ngx-org-vp',
              image: 'assets/node.svg',
              title: 'VP, Agency and Brand Solutions',
              children: []
            },
            {
              name: 'Ariel Bardin',
              cssClass: 'ngx-org-vp',
              image: 'assets/node.svg',
              title: 'VP, Product Management',
              children: []
            }
          ]
        },
        {
          name: 'Jeff Dean',
          cssClass: 'ngx-org-head',
          image: 'assets/node.svg',
          title: 'Head of Artificial Intelligence',
          children: [
            {
              name: 'David Feinberg',
              cssClass: 'ngx-org-ceo',
              image: 'assets/node.svg',
              title: 'CEO, Google Health',
              children: []
            }
          ]
        }
      ]
    },
    {
      name: 'Sundar Pichai',
      cssClass: 'ngx-org-ceo',
      image: 'assets/node.svg',
      title: 'Chief Executive Officer',
      children: [
        {
          name: 'Thomas Kurian',
          cssClass: 'ngx-org-ceo',
          image: 'assets/node.svg',
          title: 'CEO, Google Cloud',
        },
        {
          name: 'Susan Wojcicki',
          cssClass: 'ngx-org-ceo',
          image: 'assets/node.svg',
          title: 'CEO, YouTube',
          children: [
            {
              name: 'Beau Avril',
              cssClass: 'ngx-org-head',
              image: 'assets/node.svg',
              title: 'Global Head of Business Operations',
              children: []
            },
            {
              name: 'Tara Walpert Levy',
              cssClass: 'ngx-org-vp',
              image: 'assets/node.svg',
              title: 'VP, Agency and Brand Solutions',
              children: []
            },
            {
              name: 'Ariel Bardin',
              cssClass: 'ngx-org-vp',
              image: 'assets/node.svg',
              title: 'VP, Product Management',
              children: []
            }
          ]
        },
        {
          name: 'Jeff Dean',
          cssClass: 'ngx-org-head',
          image: 'assets/node.svg',
          title: 'Head of Artificial Intelligence',
          children: [
            {
              name: 'David Feinberg',
              cssClass: 'ngx-org-ceo',
              image: 'assets/node.svg',
              title: 'CEO, Google Health',
              children: []
            }
          ]
        }
      ]
    }
  ];
}
```
## Inputs

|Name|Type|Description
|---|---|---|
|`nodes`|`Node` object|The `Node` object that contains node info mentioned above
|`direction`|`vertical` or `horizontal`| Direction mode of the chart

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