PrimeNG - Organization chart

Question

I'm trying to implement an organization chart from PrimeNG. I managed to copy/paste the basic chart. But I want to use the advanced one. So I checked out the Source section.

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

It just shows a blank page. I tried to narrow down the problem and it seems to stem from parts in the HTML code:

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:

Has anyone an idea why it doesn't work for me? Here is my complete code from the app.component.ts section:

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&D',
                      styleClass: 'department-cto'
                  }]
              }
          ]
      }];
  }

  onNodeSelect(event) {
      this.messages = [{severity: 'success', summary: 'Node Selected', detail: event.node.label}];
  }
}

And here is from the HTML:

<p-organizationChart [value]="data" 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="./src/app/{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>

Thanks in advance!

Answer 1

Todays lesson:

1. Use inspect and see if there are any error messages. I had to install and import BrowserAnimationsModule from @angular/animations

2. For solving the other error messages I found revolved around basic Angular syntax. Luckily, I watched a crash course video about Angular syntax before lunch so I spotted the problem after 15 minutes of intensive search why the js crashed in the HTML. As you can see, PrimeNG doesn't write out automatically two brackets "{{" & "}}". After adding these, then my problem was solved and I retrieved back into the darkness of my programming dungeon.

Hope it helps some beginner with similar problems!