title: PrimeNG - Organization chart
body: <p>I'm trying to implement an organization chart from <a href="https://www.primefaces.org/primeng/#/organizationchart" rel="nofollow noreferrer">PrimeNG</a>. I managed to copy/paste the basic chart. But I want to use the advanced one. So I checked out the Source section.</p>
  
  <p>What I did:
  1) Copied the relevant HTML part of the advanced case into my HTML holder in my Angular component
  2) Added the "styles" to my "app.component.ts". I commented out the standard variable: "styleUrls"
  3) Copied in the relevant data for the class</p>
  
  <p>It just shows a blank page. I tried to narrow down the problem and it seems to stem from  parts in the HTML code:</p>
  
  <p><a href="https://i.stack.imgur.com/CsYrU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CsYrU.png" alt="enter image description here"></a>
  Because when I comment it out, I get the tree but without the much of the intended parts from PrimeNG, which noteably are also weirdly not expanded correct: </p>
  
  <p><a href="https://i.stack.imgur.com/zt5cY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zt5cY.png" alt="enter image description here"></a></p>
  
  <p>Has anyone an idea why it doesn't work for me? Here is my complete code from the <strong>app.component.ts</strong> section:</p>
  
  <pre><code>import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  import { TreeNode, Message } from 'primeng/api';
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    // styleUrls: ['./app.component.css'],
    styles: [`
    .company.ui-organizationchart .ui-organizationchart-node-content.ui-person {
        padding: 0;
        border: 0 none;
    }
  
    .node-header,.node-content {
        padding: .5em .7em;
    }
  
    .node-header {
        background-color: #495ebb;
        color: #ffffff;
    }
  
    .node-content {
        text-align: center;
        border: 1px solid #495ebb;
    }
  
    .node-content img {
        border-radius: 50%;
    }
  
    .department-cfo {
        background-color: #7247bc;
        color: #ffffff;
    }
  
    .department-coo {
        background-color: #a534b6;
        color: #ffffff;
    }
  
    .department-cto {
        background-color: #e9286f;
        color: #ffffff;
    }
  
    .ui-person .ui-node-toggler {
        color: #495ebb !important;
    }
  
    .department-cto .ui-node-toggler {
        color: #8a0a39 !important;
    }
  `],
  encapsulation: ViewEncapsulation.None
  })
  
  export class AppComponent implements OnInit{
    title = 'app';
    data: TreeNode[];
  
    selectedNode: TreeNode;
  
    messages: Message[];
  
    ngOnInit() {
        this.data = [{
            label: 'CEO',
            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&amp;D',
                        styleClass: 'department-cto'
                    }]
                }
            ]
        }];
    }
  
    onNodeSelect(event) {
        this.messages = [{severity: 'success', summary: 'Node Selected', detail: event.node.label}];
    }
  }
  </code></pre>
  
  <p>And here is from the <strong>HTML</strong>:</p>
  
  <pre><code>&lt;p-organizationChart [value]="data" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="onNodeSelect($event)"styleClass="company"&gt;
    &lt;ng-template let-node pTemplate="person"&gt;
      &lt;div class="node-header ui-corner-top"&gt;{node.label}&lt;/div&gt;
      &lt;div class="node-content"&gt;
          &lt;img src="./src/app/{node.data.avatar}" width="32"&gt;
          &lt;div&gt;{node.data.name}&lt;/div&gt;
      &lt;/div&gt;
  &lt;/ng-template&gt;
  &lt;ng-template let-node pTemplate="department"&gt;
    {node.label}
  &lt;/ng-template&gt;
  
  &lt;/p-organizationChart&gt;
  </code></pre>
  
  <p>Thanks in advance!</p>