Angular organogram
Angular organogram working example on codesandbox.
Component installation
npm i @jsuites/organogram
Organogram component
organogram.component.ts
Component state
app.component.ts
Component template
organogram.component.html
<div #organogram></div>
Importing the component
app.module.ts
Component usage
app.component.html
<app-organogram
[properties]="{
width: 600,
height: 480,
onclick: handleOrganogramClick,
data: [
{
id: 1,
name: 'Jorge',
role: 'CEO',
parent: 0,
status: '#90EE90',
img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
},
{
id: 2,
name: 'Antonio',
role: 'Vice president',
parent: 1,
status: '#90EE90',
img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
},
{
id: 3,
name: 'Manoel',
role: 'Production manager',
parent: 1,
status: '#D3D3D3',
img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
},
{
id: 4,
name: 'Pedro',
role: 'Intern',
parent: 3,
status: '#90EE90',
img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
},
{
id: 5,
name: 'Carlos',
role: 'Intern',
parent: 3,
status: '#90EE90',
img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
},
{
id: 6,
name: 'Marcos',
role: 'Marketing manager',
parent: 2,
status: '#D3D3D3',
img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
},
{
id: 7,
name: 'Ana',
role: 'Sales manager',
parent: 2,
status: '#90EE90',
img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
},
{
id: 8,
name: 'Nicolly',
role: 'Operations manager',
parent: 2,
status: '#D3D3D3',
img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
},
{
id: 9,
name: 'Paulo',
role: 'Sales assistant',
parent: 7,
status: '#90EE90',
img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
},
{
id: 10,
name: 'Iris',
role: 'Sales assistant',
parent: 7,
status: '#90EE90',
img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
}
],
vertical: false
}"
></app-organogram>
NOTE: Make sure to import the organogram.js and organogram.css in your angular.json or angular-cli.json
"styles": ["styles.css", "node_modules/@jsuites/organogram/organogram.css"], "scripts": ["node_modules/@jsuites/organogram/organogram.js"]