Selection features - single, multiple, and checkbox

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...