{"_id":"@ahmedaoui/ngx-org-chart","_rev":"5-401a2666eca253df1468c5c284f7a155","name":"@ahmedaoui/ngx-org-chart","dist-tags":{"latest":"18.2.13"},"versions":{"0.0.0":{"name":"@ahmedaoui/ngx-org-chart","version":"0.0.0","keywords":["org-chart","organization","hierarchical","organization chart","hierarchical chart","angular","ng","angular 17"],"_id":"@ahmedaoui/ngx-org-chart@0.0.0","maintainers":[{"name":"ahmedaoui","email":"ahmed.aouiche@outlook.fr"}],"homepage":"https://github.com/ahmedaouiche/ngx-org-ui#readme","bugs":{"url":"https://github.com/ahmedaouiche/ngx-org-ui/issues"},"dist":{"shasum":"efaa5203ef088b547e77bd613508350bdb16d3b0","tarball":"https://registry.npmjs.org/@ahmedaoui/ngx-org-chart/-/ngx-org-chart-0.0.0.tgz","fileCount":17,"integrity":"sha512-OLwLk6so4ua4Z93R/2lU/lzVjt0ygkmOsiuVrBVFnlQPVWies+JoIGjkZA3qmRyty5nUXG1W0xEepi15RYOlYg==","signatures":[{"sig":"MEQCIFWPpfdT8oaBRf/V4vF0whCtuktMFxMdcpAwx+oAxTt5AiAR74vYrol80Nud64++2j3hnfhH7M0apENCn+HMb7N7zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":56751},"module":"fesm2022/ahmedaoui-ngx-org-chart.mjs","exports":{".":{"esm":"./esm2022/ahmedaoui-ngx-org-chart.mjs","types":"./index.d.ts","default":"./fesm2022/ahmedaoui-ngx-org-chart.mjs","esm2022":"./esm2022/ahmedaoui-ngx-org-chart.mjs"},"./package.json":{"default":"./package.json"}},"typings":"index.d.ts","_npmUser":{"name":"ahmedaoui","email":"ahmed.aouiche@outlook.fr"},"repository":{"url":"git+https://github.com/ahmedaouiche/ngx-org-ui.git","type":"git"},"_npmVersion":"10.7.0","description":"Hierarchical Organization Chart","directories":{},"sideEffects":false,"_nodeVersion":"18.20.4","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^17.3.0","@angular/common":"^17.3.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-org-chart_0.0.0_1723711396522_0.44892607545252794","host":"s3://npm-registry-packages"}},"0.0.1":{"name":"@ahmedaoui/ngx-org-chart","version":"0.0.1","keywords":["org-chart","organization","hierarchical","organization chart","hierarchical chart","angular","ng","angular 17"],"_id":"@ahmedaoui/ngx-org-chart@0.0.1","maintainers":[{"name":"ahmedaoui","email":"ahmed.aouiche@outlook.fr"}],"homepage":"https://github.com/ahmedaouiche/ngx-org-ui#readme","bugs":{"url":"https://github.com/ahmedaouiche/ngx-org-ui/issues"},"dist":{"shasum":"93e29dd3bee92f12be31415c90a3e85095309727","tarball":"https://registry.npmjs.org/@ahmedaoui/ngx-org-chart/-/ngx-org-chart-0.0.1.tgz","fileCount":17,"integrity":"sha512-9GErq9JMxhPcVwCkqjzKm6/MD7QhnhoQY+QAAmFxdeeOwfMZlOQMEwgoZT2rMVkaCDtio/V/w10ICWEna/VCMA==","signatures":[{"sig":"MEYCIQCSfqvv51EkOj4VeDhRf24D9ePelg/koHH2s0PXEpqZhAIhAOHBodZINqIYbJSR4jeE/3CeqBHxIPU0kjIVeK+4pKzB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":56745},"module":"fesm2022/ahmedaoui-ngx-org-chart.mjs","exports":{".":{"esm":"./esm2022/ahmedaoui-ngx-org-chart.mjs","types":"./index.d.ts","default":"./fesm2022/ahmedaoui-ngx-org-chart.mjs","esm2022":"./esm2022/ahmedaoui-ngx-org-chart.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"61dfd11c97b8da5e12da1c06fab8259dbd907b5b","typings":"index.d.ts","_npmUser":{"name":"ahmedaoui","email":"ahmed.aouiche@outlook.fr"},"repository":{"url":"git+https://github.com/ahmedaouiche/ngx-org-ui.git","type":"git"},"_npmVersion":"10.7.0","description":"Hierarchical Organization Chart","directories":{},"sideEffects":false,"_nodeVersion":"18.20.4","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^17.0.0","@angular/common":"^17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-org-chart_0.0.1_1724406893678_0.85614714516526","host":"s3://npm-registry-packages"}},"18.2.13":{"name":"@ahmedaoui/ngx-org-chart","version":"18.2.13","description":"Hierarchical Organization Chart","keywords":["org-chart","organization","hierarchical","organization chart","hierarchical chart","angular","ng","angular 17"],"repository":{"type":"git","url":"git+https://github.com/ahmedaouiche/ngx-org-ui.git"},"bugs":{"url":"https://github.com/ahmedaouiche/ngx-org-ui/issues"},"peerDependencies":{"@angular/common":">=18.0.0","@angular/core":">=18.0.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/ahmedaoui-ngx-org-chart.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/ahmedaoui-ngx-org-chart.mjs","esm":"./esm2022/ahmedaoui-ngx-org-chart.mjs","default":"./fesm2022/ahmedaoui-ngx-org-chart.mjs"}},"_id":"@ahmedaoui/ngx-org-chart@18.2.13","gitHead":"21eae64db63bf376ce1292057565602e5f2f3312","homepage":"https://github.com/ahmedaouiche/ngx-org-ui#readme","_nodeVersion":"18.20.4","_npmVersion":"10.7.0","dist":{"integrity":"sha512-jEQ3o1MBNbcWQ3xeZH0SWYIikm4+3/W5X6toYjaJbg1Lmj/zKCFuWGttVtKFn6MCGnNOU7leh05/lBJhwFPDPQ==","shasum":"ef8388969231158a10af000c1804ef885733a692","tarball":"https://registry.npmjs.org/@ahmedaoui/ngx-org-chart/-/ngx-org-chart-18.2.13.tgz","fileCount":17,"unpackedSize":56749,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCYiYBRytq/sxvMt+OP+xAuLSfu55xSXCq5C4ZNucsewgIhAKbhQ5xKiUx0NGPa5OUjpUQJ+D+sWuowCDXlbYfKUXEg"}]},"_npmUser":{"name":"ahmedaoui","email":"ahmed.aouiche@outlook.fr"},"directories":{},"maintainers":[{"name":"ahmedaoui","email":"ahmed.aouiche@outlook.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-org-chart_18.2.13_1740316785050_0.9017007384937459"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-15T08:43:16.432Z","modified":"2025-02-23T13:19:45.400Z","1.0.0":"2024-08-15T08:13:28.123Z","0.0.0":"2024-08-15T08:43:16.685Z","0.0.1":"2024-08-23T09:54:53.875Z","18.2.13":"2025-02-23T13:19:45.240Z"},"bugs":{"url":"https://github.com/ahmedaouiche/ngx-org-ui/issues"},"homepage":"https://github.com/ahmedaouiche/ngx-org-ui#readme","keywords":["org-chart","organization","hierarchical","organization chart","hierarchical chart","angular","ng","angular 17"],"repository":{"type":"git","url":"git+https://github.com/ahmedaouiche/ngx-org-ui.git"},"description":"Hierarchical Organization Chart","maintainers":[{"name":"ahmedaoui","email":"ahmed.aouiche@outlook.fr"}],"readme":"# @ahmedaoui/ngx-org-chart\n\nThe `@ahmedaoui/ngx-org-chart` creates hierarchical organization chart.\nYou can create hierarchical organization charts with it.\nThe library is fully compatible with both NgModule-based applications and those using standalone components !\n\nIt applies multiple root node. That means you can create multiple organization charts at the same time.\n\n![Org Chart](https://raw.githubusercontent.com/ahmedaouiche/ngx-org-ui/master/projects/ngx-org-chart/organization-chart-horizontal.png)\n![Org Chart](https://raw.githubusercontent.com/ahmedaouiche/ngx-org-ui/master/projects/ngx-org-chart/organization-chart-vertical.png)\n\n## Table of Contents\n\n  * [Installation](#installation)\n  * [Usage](#usage)\n  * [Inputs](#inputs)\n\n## Installation\n\nYou can install the package using following command.\n\n```sh\n$ npm install @ahmedaoui/ngx-org-chart\n```\n\nImport below file into styles.scss file.\n\n```js\nimport '@ahmedaoui/ngx-org-chart/theming'\n```\n\n## Usage\n\n|Property|Type|Description\n|---|---|---\n|name|`string`|Name of the node\n|cssClass|`string`|Custom css class for the node\n|image|`string`|Image of the node\n|title|`string`|The node's title\n|childs|`Node[]`|The array of child nodes\n\n\n### `app.component.html`\n```html\n<ngx-org-chart [nodes]=\"nodes\" direction=\"vertical\" (itemClick)=\"test($event)\"></ngx-org-chart>\n```\n\n### `app.component.ts`\n```js\nimport { Component } from '@angular/core';\nimport { NgxOrgChartComponent } from '@ahmedaoui/ngx-org-chart';\nimport { INode } from '@ahmedaoui/ngx-org-chart/lib/node';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [RouterOutlet,NgxOrgChartComponent],\n  templateUrl: './app.component.html',\n  styleUrl: './app.component.scss'\n})\nexport class AppComponent {\n  nodes: INode[] = [\n    {\n      name: 'Sundar Pichai',\n      cssClass: 'ngx-org-ceo',\n      image: '',\n      title: 'Chief Executive Officer',\n      childs: [\n        {\n          name: 'Thomas Kurian',\n          cssClass: 'ngx-org-ceo',\n          image: 'assets/node.svg',\n          title: 'CEO, Google Cloud',\n        },\n        {\n          name: 'Susan Wojcicki',\n          cssClass: 'ngx-org-ceo',\n          image: 'assets/node.svg',\n          title: 'CEO, YouTube',\n          childs: [\n            {\n              name: 'Beau Avril',\n              cssClass: 'ngx-org-head',\n              image: 'assets/node.svg',\n              title: 'Global Head of Business Operations',\n              childs: []\n            },\n            {\n              name: 'Tara Walpert Levy',\n              cssClass: 'ngx-org-vp',\n              image: 'assets/node.svg',\n              title: 'VP, Agency and Brand Solutions',\n              childs: []\n            },\n            {\n              name: 'Ariel Bardin',\n              cssClass: 'ngx-org-vp',\n              image: 'assets/node.svg',\n              title: 'VP, Product Management',\n              childs: []\n            }\n          ]\n        },\n        {\n          name: 'Jeff Dean',\n          cssClass: 'ngx-org-head',\n          image: 'assets/node.svg',\n          title: 'Head of Artificial Intelligence',\n          childs: [\n            {\n              name: 'David Feinberg',\n              cssClass: 'ngx-org-ceo',\n              image: 'assets/node.svg',\n              title: 'CEO, Google Health',\n              childs: []\n            }\n          ]\n        }\n      ]\n    },\n    {\n      name: 'Sundar Pichai',\n      cssClass: 'ngx-org-ceo',\n      image: 'assets/node.svg',\n      title: 'Chief Executive Officer',\n      childs: [\n        {\n          name: 'Thomas Kurian',\n          cssClass: 'ngx-org-ceo',\n          image: 'assets/node.svg',\n          title: 'CEO, Google Cloud',\n        },\n        {\n          name: 'Susan Wojcicki',\n          cssClass: 'ngx-org-ceo',\n          image: 'assets/node.svg',\n          title: 'CEO, YouTube',\n          childs: [\n            {\n              name: 'Beau Avril',\n              cssClass: 'ngx-org-head',\n              image: 'assets/node.svg',\n              title: 'Global Head of Business Operations',\n              childs: []\n            },\n            {\n              name: 'Tara Walpert Levy',\n              cssClass: 'ngx-org-vp',\n              image: 'assets/node.svg',\n              title: 'VP, Agency and Brand Solutions',\n              childs: []\n            },\n            {\n              name: 'Ariel Bardin',\n              cssClass: 'ngx-org-vp',\n              image: 'assets/node.svg',\n              title: 'VP, Product Management',\n              childs: []\n            }\n          ]\n        },\n        {\n          name: 'Jeff Dean',\n          cssClass: 'ngx-org-head',\n          image: 'assets/node.svg',\n          title: 'Head of Artificial Intelligence',\n          childs: [\n            {\n              name: 'David Feinberg',\n              cssClass: 'ngx-org-ceo',\n              image: 'assets/node.svg',\n              title: 'CEO, Google Health',\n              childs: []\n            }\n          ]\n        }\n      ]\n    },\n    {\n      name: 'Sundar Pichai',\n      cssClass: 'ngx-org-ceo',\n      image: 'assets/node.svg',\n      title: 'Chief Executive Officer',\n      childs: [\n        {\n          name: 'Thomas Kurian',\n          cssClass: 'ngx-org-ceo',\n          image: 'assets/node.svg',\n          title: 'CEO, Google Cloud',\n        },\n        {\n          name: 'Susan Wojcicki',\n          cssClass: 'ngx-org-ceo',\n          image: 'assets/node.svg',\n          title: 'CEO, YouTube',\n          childs: [\n            {\n              name: 'Beau Avril',\n              cssClass: 'ngx-org-head',\n              image: 'assets/node.svg',\n              title: 'Global Head of Business Operations',\n              childs: []\n            },\n            {\n              name: 'Tara Walpert Levy',\n              cssClass: 'ngx-org-vp',\n              image: 'assets/node.svg',\n              title: 'VP, Agency and Brand Solutions',\n              childs: []\n            },\n            {\n              name: 'Ariel Bardin',\n              cssClass: 'ngx-org-vp',\n              image: 'assets/node.svg',\n              title: 'VP, Product Management',\n              childs: []\n            }\n          ]\n        },\n        {\n          name: 'Jeff Dean',\n          cssClass: 'ngx-org-head',\n          image: 'assets/node.svg',\n          title: 'Head of Artificial Intelligence',\n          childs: [\n            {\n              name: 'David Feinberg',\n              cssClass: 'ngx-org-ceo',\n              image: 'assets/node.svg',\n              title: 'CEO, Google Health',\n              childs: []\n            }\n          ]\n        }\n      ]\n    }\n  ];\n}\n```\n## Inputs\n\n|Name|Type|Description\n|---|---|---|\n|`nodes`|`Node` object|The `Node` object that contains node info mentioned above\n|`direction`|`vertical` or `horizontal`| Direction mode of the chart\n","readmeFilename":"README.md"}