Code: Select all
<p-organizationChart [value]="data1" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="onNodeSelect($event)"
styleClass="company">
<ng-template let-node pTemplate="person">
<div class="node-header ui-corner-top">{{node.label}}</div>
<div class="node-content">
<img src="assets/showcase/images/demo/organization/{{node.data.avatar}}" width="32">
<div>{{node.data.name}}</div>
</div>
</ng-template>
<ng-template let-node pTemplate="department">
{{node.label}}
</ng-template>
</p-organizationChart>
Code: Select all
this.data1 = [{
label: 'CEO1',
type: 'person',
styleClass: 'ui-person',
expanded: true,
data: {name:'Walter White', 'avatar': 'walter.jpg'},
children: [
{
label: 'CFO',
type: 'person',
styleClass: 'ui-person',
expanded: true,
data: {name:'Saul Goodman', 'avatar': 'saul.jpg'},
children:[{
label: 'Tax',
styleClass: 'department-cfo'
},
{
label: 'Legal',
styleClass: 'department-cfo'
}],
},
{
label: 'COO',
type: 'person',
styleClass: 'ui-person',
expanded: true,
data: {name:'Mike E.', 'avatar': 'mike.jpg'},
children:[{
label: 'Operations',
styleClass: 'department-coo'
}]
},
{
label: 'CTO',
type: 'person',
styleClass: 'ui-person',
expanded: true,
data: {name:'Jesse Pinkman', 'avatar': 'jesse.jpg'},
children:[{
label: 'Development',
styleClass: 'department-cto',
expanded: true,
children:[{
label: 'Analysis',
styleClass: 'department-cto'
},
{
label: 'Front End',
styleClass: 'department-cto'
},
{
label: 'Back End',
styleClass: 'department-cto'
}]
},
{
label: 'QA',
styleClass: 'department-cto'
},
{
label: 'R&D',
styleClass: 'department-cto'
}]
}
]
},
{
label: 'CEO2',
type: 'person',
styleClass: 'ui-person',
expanded: true,
data: { name: 'Walter White', 'avatar': 'walter.jpg' },
children: [
{
label: 'CFO',
type: 'person',
styleClass: 'ui-person',
expanded: true,
data: { name: 'Saul Goodman', 'avatar': 'saul.jpg' },
children: [{
label: 'Tax',
styleClass: 'department-cfo'
},
{
label: 'Legal',
styleClass: 'department-cfo'
}],
},
{
label: 'COO',
type: 'person',
styleClass: 'ui-person',
expanded: true,
data: { name: 'Mike E.', 'avatar': 'mike.jpg' },
children: [{
label: 'Operations',
styleClass: 'department-coo'
}]
},
{
label: 'CTO',
type: 'person',
styleClass: 'ui-person',
expanded: true,
data: { name: 'Jesse Pinkman', 'avatar': 'jesse.jpg' },
children: [{
label: 'Development',
styleClass: 'department-cto',
expanded: true,
children: [{
label: 'Analysis',
styleClass: 'department-cto'
},
{
label: 'Front End',
styleClass: 'department-cto'
},
{
label: 'Back End',
styleClass: 'department-cto'
}]
},
{
label: 'QA',
styleClass: 'department-cto'
},
{
label: 'R&D',
styleClass: 'department-cto'
}]
}
]
}]
Reference: https://www.primefaces.org/primeng/#/organizationchart