Angular 4 + PrimeNG : does TreeNode can contains dropdown lists?

Question

I'm working on an application built with JHipster in Angular 4.3. I'm searching for an angular tree component and I'm trying with PrimeNG.

I need something like this, with nodes and inside the last node, there are dropdownlists. The value displayed is the one saved in the database, but when the user clicks, he can see the other available values and choose another one if he wants to.

I've chosen Prime NG and done the example in the documentation. (And as you can see, I've a display bug, the arrows are displayed even if it's the last child... And I don't know how to correct it too)

But I haven't found how to proceed in order to customize the nodes, I've just this balise in the html :

<p-tree class="myTree" [value]="files"></p-tree>

"files" are the json given in the tutorial (I haven't my services yet).

Has anyone ever done something like this ?

Answer 1

By using templating features, you shoud be able to reproduce what you need :

    <ng-template let-node  pTemplate="default">

      <div>
        {{node.label}}

        <select *ngIf="!node.children">
          <option value="val1">1st value</option> 
          <option value="val2">2nd value</option>
          <option value="val3">3rd value</option>
        </select>

      </div>

    </ng-template>

As you can see, the select element is displayed only if a node has no children i.e. if a node is a leaf.

See working Plunker