The Tree component supports three kinds of selections such as single, multiple, and checkbox. The single selection is provided by enabling both the selectionMode property and the selection attribute, which holds a selected tree node.

The Tree component with a single selection feature to select a favorite tourist place would be written as follows:

<p-tree [value]="singleSelectionTree" selectionMode="single" [(selection)]="selectedPlace" (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)"></p-tree>
<div>Selected Node: {{selectedPlace ? selectedPlace.label : 'none'}}</div>

The following screenshot shows a snapshot result of the Tree component with a single selection as an example:

Here, multiple selection is enabled by setting selectionMode as multiple (selectionMode="multiple"). In this case, the selection property holds an array of objects as selected nodes. The multiple selection is also provided through the checkbox selection. This can be achieved just by setting selectionMode="checkbox".

The Tree component with a multi checkbox selection feature to select multiple tourist places would be written as follows:

<p-tree [value]="checkboxSelectionTree" selectionMode="checkbox"
  [(selection)]="selectMultiplePlaces"></p-tree>
<div>Selected Nodes: <span *ngFor="let place of selectMultiplePlaces">{{place.label}} </span></div>

The following screenshot shows a snapshot result of the Tree component with checkbox selection as an example:

The selection feature supports two event callbacks such as onRowSelect and onRowUnselect, which provide selected and unselected tree nodes. Refer to the events section for more details.

The propagation (upward and downward directions) of selection nodes is controlled through propagateSelectionUp and propagateSelectionDown properties, which are enabled by default.