Angular primeng v11.x how to achieve treeselect functionality in tree component

Question

I am using primeng v11.x and i am using p-tree to display hierarchy view with checkbox. but i want to display this inside a dropdown as in p-treeselect. unfortunately i can't upgrade primeng at the moment. is there a way to achieve this? because the p-tree is taking too much height, wanted to move to dropdown option.

Current code:

<p-tree
    #tree
    [value]="nodes"
    selectionMode="checkbox"
    [propagateSelectionUp]="true"
    [propagateSelectionDown]="true"
    (onNodeUnselect)="onNodeUnselect()"
    (onNodeSelect)="onNodeSelect()"
    disabled="disabled || readonly"
></p-tree>

expected functionality as in https://www.primefaces.org/primeng/treeselect

Thanks

Answer 1

You can place the p-tree component inside a p-overlayPanel component.

<p-overlayPanel #op [showCloseIcon]="true" [style]="{ width: '450px' }">
  <ng-template pTemplate>
    <p-tree
      [value]="files"
      selectionMode="checkbox"
      (onNodeSelect)="nodeSelect($event)"
      (onNodeUnselect)="nodeUnselect($event)"
      [(selection)]="selectedFiles"
    ></p-tree>
  </ng-template>
</p-overlayPanel>

I created a demo here.