{"id":23343231,"url":"https://github.com/rushik1992/ngx-hierarchy","last_synced_at":"2025-08-23T09:31:11.050Z","repository":{"id":44385814,"uuid":"503489909","full_name":"rushik1992/ngx-hierarchy","owner":"rushik1992","description":"Angular hierarchy Component Module for Vertical or Horizontal View. ","archived":false,"fork":false,"pushed_at":"2024-12-14T09:33:45.000Z","size":624,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-07T08:49:53.643Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rushik1992.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-14T19:14:26.000Z","updated_at":"2024-12-28T23:20:04.000Z","dependencies_parsed_at":"2025-01-25T11:30:38.956Z","dependency_job_id":null,"html_url":"https://github.com/rushik1992/ngx-hierarchy","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rushik1992/ngx-hierarchy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rushik1992%2Fngx-hierarchy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rushik1992%2Fngx-hierarchy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rushik1992%2Fngx-hierarchy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rushik1992%2Fngx-hierarchy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rushik1992","download_url":"https://codeload.github.com/rushik1992/ngx-hierarchy/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rushik1992%2Fngx-hierarchy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271746350,"owners_count":24813559,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-21T06:10:40.503Z","updated_at":"2025-08-23T09:31:10.717Z","avatar_url":"https://github.com/rushik1992.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Charts"],"readme":"# NgxHierarchy\n\n`ngx-hierarchy` is an Angular Component Module for Vertical or Horizontal Hierarchy/Tree View. It can be used to show parent child view, Organization structure, Tree view. with your flaxible dynamic template design with controls.\n\n## Installation\n\n```sh\n$ npm install ngx-hierarchy\n```\n## Vertical View\n\n![NgxHierarchy Vertical View](https://raw.githubusercontent.com/rushik1992/ngx-hierarchy/master/projects/ngx-hierarchy/VerticalView.png)\n\n## Horizontal View\n\n![NgxHierarchy Horizontal View](https://raw.githubusercontent.com/rushik1992/ngx-hierarchy/master/projects/ngx-hierarchy/HorizontalView.png)\n\n\n## Demo Link\n[Click Here](https://rushik1992.github.io/ngx-hierarchy/)\n\n## Component Inputs\n\n|Name|Type|Description\n|---|---|---|\n|`nodes`|`INode` object|The `INode` object that contains node info mentioned below\n|`direction`|`vertical` or `horizontal`| Direction of the chart top to bottom or left to right\n|`template`|`TemplateRef\u003cany\u003e`| Angular Template to render in each node\n\n## INode Details\n\n|Property|Type|Description\n|---|---|---\n|cssClass|`string`|Custom css class to override or change node style\n|childs|`INode[]`|The array of child nodes\n|{otherCustomeProperty}|`any or function`|You can add any other Property or Function in each node and can use in template\n\n\n### import Module in `app.module.ts`\n\n\n```ts\nimport { NgxHierarchyModule } from 'ngx-hierarchy';\n```\n```ts\n@NgModule({\n  declarations: [\n    ...\n  ],\n  imports: [\n    ...\n    NgxHierarchyModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n\n### `app.component.ts`\n\n```ts\nimport { Component } from '@angular/core';\nimport { INode } from 'ngx-hierarchy';\n\n\ninterface custNode extends INode{\n  name:string;\n  position:string;\n  childs?:custNode[];\n  onOk:Function;\n}\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\n\nexport class AppComponent {\n  title = 'ngx-hierarchy-demo';\n  nodes: custNode[] = [\n    {\n      name: 'Caleb Matthews',\n      cssClass: 'level1',\n      position: 'Chief Executive Officer',\n      childs: [\n        {\n          name: 'Antonia Sancho',\n          cssClass: 'level2',\n          position: 'HR Manager',\n          onOk: this.onOk\n        },\n        {\n          name: 'Thoms Hilty',\n          cssClass: 'level2',\n          position: 'Marketing Manager',\n          childs: [\n            {\n              name: 'Eyal Matthews',\n              cssClass: 'level3',\n              position: 'Social Media',\n              onOk: this.onOk\n            },\n            {\n              name: 'Adam Mark',\n              cssClass: 'level3',\n              position: 'Offline Marketing',\n              onOk: this.onOk\n            }\n          ],\n          onOk: this.onOk\n        },\n        {\n          name: 'Barry Roy',\n          cssClass: 'level2',\n          position: 'Production Manager',\n          childs: [\n            {\n              name: 'Ligia Opera',\n              cssClass: 'level3',\n              position: 'Supply Chain',\n              onOk: this.onOk\n            },\n            {\n              name: 'Moran Perry',\n              cssClass: 'level3',\n              position: 'Operational Manager',\n              onOk: this.onOk\n            }\n          ],\n          onOk: this.onOk\n        }\n      ],\n      onOk: this.onOk\n    }\n  ];\n  constructor(){\n  }\n\n  onOk(node:custNode){\n    alert(node.name);\n  }\n\n}\n\n```\n\n### `app.component.html`\n\n```html\n\u003cngx-hierarchy [nodes]=\"nodes\" direction=\"vertical\" [template]=\"nodeTemplate\"\u003e\n  \u003cng-template #nodeTemplate let-node\u003e\n    \u003cdiv class=\"node-template\"\u003e\n      \u003cstrong\u003e{{node.position}} \u003c/strong\u003e\n      \u003cspan\u003e{{node.name}} \u003c/span\u003e\n      \u003cbutton (click)=\"node.onOk(node)\"\u003eok\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/ng-template\u003e\n\u003c/ngx-hierarchy\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frushik1992%2Fngx-hierarchy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frushik1992%2Fngx-hierarchy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frushik1992%2Fngx-hierarchy/lists"}