How appsbender/ngx-org-chart-workspace works
This Angular library renders an organization hierarchy from caller-supplied node data. Its main workflow is to accept a root node, recursively display employee nodes, and emit click, expand, and collapse events. It also exports a viewer that fits and scales chart content, and supports both module-based and standalone consumption. The README documents responsive layout and CSS-variable theming; zoom and pan are described as roadmap items, while the sampled viewer already implements zoom controls. The component templates and styles were not excerpted, so rendering and styling links are documented rather than source-verified.
Main entry points: org-chart.component.ts Chart component · public-api.ts Public exports · employee.component.ts Employee component · org-chart-viewer.component.ts Viewer component
Components 15
Library API
- Public exports
projects/org-chart/src/public-api.ts - Org chart module
projects/org-chart/src/lib/org-chart.module.ts
Chart Rendering
- Chart component
projects/org-chart/src/lib/components/org-chart/org-chart.component.ts - Employee component
projects/org-chart/src/lib/components/employee/employee.component.ts - Employee node view
projects/org-chart/src/lib/components/employee/employee.component.html - Chart template
projects/org-chart/src/lib/components/org-chart/org-chart.component.html - Chart styles
projects/org-chart/src/lib/org-chart.scss - Employee styles
projects/org-chart/src/lib/components/employee/employee.component.scss
Chart Viewer
- Viewer component
projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.ts - Viewer template
projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.html - Viewer styles
projects/org-chart/src/lib/components/viewer/org-chart-viewer/org-chart-viewer.component.scss - Theme variables
projects/org-chart/src/lib/styles/_theme.scss
Data and Events
- Organization node model
projects/org-chart/src/lib/models/employee.interface.ts - Chart event model
projects/org-chart/src/lib/models/org-chart-event.ts
Other components
- Angular consumer
Connections 25
- Angular consumer → Public exports: imports library
projects/org-chart/src/public-api.ts - Public exports → Org chart module: exports module
projects/org-chart/src/public-api.ts - Public exports → Chart component: exports component
projects/org-chart/src/public-api.ts - Public exports → Employee component: exports component
projects/org-chart/src/public-api.ts - Public exports → Viewer component: exports viewer
projects/org-chart/src/public-api.ts - Public exports → Organization node model: exports model
projects/org-chart/src/public-api.ts - Public exports → Chart event model: exports events
projects/org-chart/src/public-api.ts - Org chart module → Chart component: declares component
projects/org-chart/src/lib/org-chart.module.ts - Org chart module → Employee component: declares component
projects/org-chart/src/lib/org-chart.module.ts - Org chart module → Viewer component: declares component
- Chart component → Organization node model: uses node data
projects/org-chart/src/lib/components/org-chart/org-chart.component.ts - Chart component → Chart event model: emits events
projects/org-chart/src/lib/components/org-chart/org-chart.component.ts - Chart component → Chart template: renders template
- Chart template → Employee component: renders nodes
- Employee component → Organization node model: uses employee data
projects/org-chart/src/lib/components/employee/employee.component.ts - Employee component → Employee node view: renders template
- Chart component → Chart styles: uses styles
- Employee component → Employee styles: uses styles
- Viewer component → Viewer template: renders template
- Viewer component → Viewer styles: uses styles
- Theme variables → Chart styles: themes chart
- Chart event model → Organization node model: types event node
projects/org-chart/src/lib/models/org-chart-event.ts - Angular consumer → Chart component: provides root node
README.md - Chart component → Angular consumer: emits node events
README.md - Angular consumer → Viewer component: wraps chart
README.md