A component for creating a org chart. There are various features like Downloading, Collapseing and Expanding available in it.
npm install @ruc-lib/org-chartnpm install @uxpractice/ruc-lib
bash
npm install @ruc-lib/org-chart@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
`
For Angular 16:
`bash
npm install @ruc-lib/org-chart@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
`
For Angular 17:
`bash
npm install @ruc-lib/org-chart@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
`
For Angular 18:
`bash
npm install @ruc-lib/org-chart@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
`
For Angular 19:
`bash
npm install @ruc-lib/org-chart@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
`
For Angular 20:
`bash
npm install @ruc-lib/org-chart@4.0.0
`
> Note: When installing in Angular 15-19 apps, you must specify the matching @angular/material and @angular/cdk versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.
Version Compatibility
Please ensure you install the correct version of @ruc-lib/org-chart based on your Angular version.
| Angular Version | Compatible @ruc-lib/org-chart Version |
|--------------------|---------------------------------------------|
| 15.x.x | npm install @ruc-lib/org-chart@^3.2.0 |
| 16.x.x | npm install @ruc-lib/org-chart@^3.2.0 |
| 17.x.x | npm install @ruc-lib/org-chart@^4.0.0 |
| 18.x.x | npm install @ruc-lib/org-chart@^4.0.0 |
| 19.x.x | npm install @ruc-lib/org-chart@^4.0.0 |
| 20.x.x | npm install @ruc-lib/org-chart@^4.0.0 |
Note: If you are facing any build/compile issue related to "primeng", then install "primeng" explicitly according to angular version.
Usage
After installing the the required package successfully, we have to import the CSS in our style.scss file in following way.
@import "../../../node_modules/primeng/resources/themes/lara-light-indigo/theme.css";
@import "../../../node_modules/primeng/resources/primeng.min.css";
here path of the scss file is subject to change as per choice of the installation
for library
@import "../node_modules/primeng/resources/themes/lara-light-indigo/theme.css";
@import "../node_modules/primeng/resources/primeng.min.css";
for seperate package
@import "../node_modules/primeng/resources/themes/lara-light-indigo/theme.css";
@import "../node_modules/primeng/resources/primeng.min.css";
import required modules
for library
import { RuclibOrgChartModule } from '@uxpractice/ruc-lib/org-chart';
for seperate package
import { RuclibOrgChartModule } from '@ruc-lib/org-chart';
use component selector
`
`
Input and Output
Inputs
rucInputData -> It is the configuration input to configure the org chart
customTheme -> It is the name of the theme.
Output
rucInputData (sample object)
Detail definition of the each property can be found in type definition file.
`
const inputOrgData = {
isDisplayHambergerMenu: true,
isDisplaySearchBar : true,
nodeTemplate: 'triangle', // portrait , triangle, landscape
hambergerMenuList : [
{ label: 'Download pdf',
id: 1
},
{ label: 'Download png',
id: 2
},
{ label: 'Download jpeg',
id: 3
},
{
label: 'Expand All',
id: 4,
},
{
label: 'Collapse All',
id: 5,
}
],
greyNodeStyle : {
backgroundColor: '#d3d3d3',
color: '#808080',
},
orgData: [
{
label: 'ceo',
expanded: false,
description: 'ceo description',
customNodeStyle: {
backgroundColor: '#3498db',
color: 'white',
padding: '1.5em',
borderRadius: '0px',
},
data: {
image:'https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png',
name: 'Amy Elsner',
title: 'CEO',
},
children: [
{
expanded: false,
label: 'cmo',
description: 'cmo description',
customNodeStyle: {
backgroundColor: 'rgb(152, 1, 4)',
color: 'white',
padding: '1.5em',
borderRadius: '0px',
},
data: {
image:
'https://primefaces.org/cdn/primeng/images/demo/avatar/annafali.png',
name: 'Ahaanna Fali',
title: 'CMO',
}
},
{
expanded: false,
label: 'CTO',
description: 'CTO description',
customNodeStyle: {
backgroundColor: 'rgb(152, 1, 4)',
color: 'white',
padding: '1.5em',
borderRadius: '0px',
},
data: {
image:
'https://primefaces.org/cdn/primeng/images/demo/avatar/stephenshaw.png',
name: 'Stephen Shaw',
title: 'CTO',
},
children: [
{
expanded: false,
label: 'Architect',
description: 'CTO description',
customNodeStyle: {
backgroundColor: 'rgb(137, 152, 1)',
color: 'white',
padding: '1.5em',
borderRadius: '0px',
},
data: {
image:
'https://primefaces.org/cdn/primeng/images/demo/avatar/stephenshaw.png',
name: 'Thomas Shaw',
title: 'Architect',
}
},
{
expanded: false,
label: 'Manager',
description: 'CTO description',
customNodeStyle: {
backgroundColor: 'rgb(137, 152, 1)',
color: 'white',
padding: '1.5em',
borderRadius: '0px',
},
data: {
image:
'https://primefaces.org/cdn/primeng/images/demo/avatar/stephenshaw.png',
name: 'Steve Shaw',
title: 'Manager',
}
}],
},
],
},
]
}
`
> ⚠️ IMPORTANT: Custom Theme Usage in Angular Material
When implementing custom themes, such as:
`scss
.custom-theme-1 {
@include angular-material-theme($custom-theme);
}
// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
.custom-theme-1 {
@include angular-material-theme($custom-theme);
@include mat.typography-level($theme-custom-typography-name, body-1);
}
``