Advanced customization

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>
    &lt...