Customization is enabled by templating with the ng-template tag. TreeNode has the type property, which is used to match the value of the pTemplate attribute. This matching allows you to customize the UI for every single node. Nodes without the type property match pTemplate="default".

The next code snippet has two ng-template tags. The first one matches the nodes with the type property department. The second one matches the nodes without types. The current node object is exposed via the microsyntax let-node:

<p-organizationChart [value]="data" styleClass="company">
  <ng-template let-node pTemplate="department">
    <div class="node-header ui-corner-top">
      {{node.label}}
    </div>
    <div class="node-content ui-corner-bottom">
      <img src="/assets/data/avatar/{{node.data.avatar}}" width="32">
      <div>{{node.data.name}}</div>
    </div>
  </ng-template>
  <ng-template let-node pTemplate="default">
    {{node.label}}
  </ng-template>
</p-organizationChart>

We will only show an excerpt of the data array to convey the idea.

this.data = [
  {
    label: 'CEO',
    expanded: true,
    type: 'department',
    styleClass: 'org-dept',
    data: {id: '1', name: 'Alex Konradi', avatar: 'man.png'},
    children: [
      {
        label: 'Finance',
        expanded: true,
        type: 'department',
        styleClass: 'org-dept',
        data: {id: '2', name: 'Sara Schmidt', avatar: 'women.png'},
        children: [
          {
            label: 'Chief Accountant',
            styleClass: 'org-role'
          },
          {
            label: 'Junior Accountant',
            styleClass: 'org-role'
          }
        ]
      },
      ...
    ]
  }
];

The customized organization chart looks like the following:

We specified custom style classes to set colors for nodes and togglers. For example:

.org-role {
  background-color: #00b60d;
  color: #ffffff;
}

.org-dept .ui-node-toggler {
  color: #bb0066 !important;
}