TreeSelect

import { TreeSelectModule } from 'primeng/treeselect';

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
@Component({
  selector: 'app-prime-treeselect',
  templateUrl: './prime-treeselect.component.html',
  styleUrls: ['./prime-treeselect.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PrimeTreeselectComponent implements OnInit {
  constructor() {}
 
  nodes1: any[] = _nodes1;
  nodes2: any[] = _nodes2;
  nodes3: any[] = _nodes3;
  nodes4: any[] = _nodes4;
 
  selectedNodes1: any[] = [];
  selectedNodes2: any[] = [];
  selectedNodes3: any[] = [];
 
  selectedNode: any;
 
  ngOnInit(): void {}
}
 
const _nodes1 = [
  {
    label: 'Documents',
    data: 'Documents Folder',
    expandedIcon: 'pi pi-folder-open',
    collapsedIcon: 'pi pi-folder',
    children: [
      {
        label: 'Work',
        data: 'Work Folder',
        expandedIcon: 'pi pi-folder-open',
        collapsedIcon: 'pi pi-folder',
        children: [
          { label: 'Expenses.doc', icon: 'pi pi-file', data: 'Expenses Document' },
          { label: 'Resume.doc', icon: 'pi pi-file', data: 'Resume Document' },
        ],
      },
      {
        label: 'Home',
        data: 'Home Folder',
        expandedIcon: 'pi pi-folder-open',
        collapsedIcon: 'pi pi-folder',
        children: [{ label: 'Invoices.txt', icon: 'pi pi-file', data: 'Invoices for this month' }],
      },
    ],
  },
  {
    label: 'Pictures',
    data: 'Pictures Folder',
    expandedIcon: 'pi pi-folder-open',
    collapsedIcon: 'pi pi-folder',
    children: [
      { label: 'barcelona.jpg', icon: 'pi pi-image', data: 'Barcelona Photo' },
      { label: 'logo.jpg', icon: 'pi pi-image', data: 'PrimeFaces Logo' },
      { label: 'primeui.png', icon: 'pi pi-image', data: 'PrimeUI Logo' },
    ],
  },
  {
    label: 'Movies',
    data: 'Movies Folder',
    expandedIcon: 'pi pi-folder-open',
    collapsedIcon: 'pi pi-folder',
    children: [
      {
        label: 'Al Pacino',
        data: 'Pacino Movies',
        children: [
          { label: 'Scarface', icon: 'pi pi-video', data: 'Scarface Movie' },
          { label: 'Serpico', icon: 'pi pi-video', data: 'Serpico Movie' },
        ],
      },
      {
        label: 'Robert De Niro',
        data: 'De Niro Movies',
        children: [
          { label: 'Goodfellas', icon: 'pi pi-video', data: 'Goodfellas Movie' },
          { label: 'Untouchables', icon: 'pi pi-video', data: 'Untouchables Movie' },
        ],
      },
    ],
  },
];
 
const _nodes2 = _nodes1;
const _nodes3 = _nodes1;
const _nodes4 = _nodes1;

<p-treeSelect [(ngModel)]="selectedNode" [options]="nodes1" placeholder="Select Item"></p-treeSelect>

<p-treeSelect [(ngModel)]="selectedValue1" [options]="nodes" selectionMode="single"  placeholder="Select Item"></p-treeSelect>
 
<p-treeSelect [(ngModel)]="selectedValue2" selectionMode="multiple" [options]="nodes" placeholder="Select Items"></p-treeSelect>
 
<p-treeSelect [(ngModel)]="selectedValue3" selectionMode="checkbox" [options]="nodes" placeholder="Select Items"></p-treeSelect>

<p-treeSelect [(ngModel)]="selectedValue" selectionMode="multiple" display="chip" [options]="nodes" placeholder="Select Items"></p-treeSelect>

<p-treeSelect [(ngModel)]="selectedNode" [options]="nodes1" placeholder="Select Item"></p-treeSelect>

<p-treeSelect
  [(ngModel)]="selectedNodes1"
  [options]="nodes2"
  [metaKeySelection]="false"
  selectionMode="multiple"
  placeholder="Select Item"
></p-treeSelect>

<p-treeSelect
  [(ngModel)]="selectedNodes2"
  [options]="nodes3"
  display="chip"
  [metaKeySelection]="false"
  selectionMode="checkbox"
  placeholder="Select Item"
></p-treeSelect>

<span class="p-float-label">
  <p-treeSelect [(ngModel)]="selectedNodes3" [options]="nodes4" [metaKeySelection]="false" selectionMode="multiple"></p-treeSelect>
  <label for="basic">Basic</label>
</span>