Tree selection control.

When To Use#

TreeSelect is similar to Select, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.

import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';


Please select

The most basic usage.

expand codeexpand code
Please select

To load data asynchronously when click to expand a treeNode, loading state keeps until excute addChildren().

expand codeexpand code
Please select

Set nzVirtualHeight to enable virtual scroll.

expand codeexpand code
  Warning multiple

Add status to TreeSelect with nzStatus, which could be error or warning.

expand codeexpand code
  Please select

Multiple selection usage, max 3 option will display at the same time by nzMaxTagCount.

expand codeexpand code

Multiple and checkable.

expand codeexpand code
  Please select

You can manually specify the position of the popup via nzPlacement.

expand codeexpand code



PropertyDescriptionTypeDefaultGlobal Config
[nzId]input id attribute inside the componentstring-
[nzAllowClear]Whether allow clearbooleanfalse
[nzPlaceHolder]Placeholder of the select inputstring-
[nzPlacement]The position where the selection box pops upbottomLeftbottomRighttopLefttopRightbottomLeft
[nzDisabled]Disabled or notbooleanfalse
[nzShowIcon]Shows the icon before a TreeNode's title. There is no default stylebooleanfalse
[nzShowSearch]Whether to display a search input in the dropdown menu(valid only in the single mode)booleanfalse
[nzNotFoundContent]Specify content to show when no result matches.string-
[nzDropdownMatchSelectWidth]Determine whether the dropdown menu and the select input are the same widthbooleantrue
[nzDropdownStyle]To set the style of the dropdown menuobject-
[nzDropdownClassName]classname of dropdown menustring-
[nzMultiple]Support multiple or not, will be true when enable nzCheckable.booleanfalse
[nzHideUnMatched]Hide unmatched nodes while searchingbooleanfalse
[nzSize]To set the size of the select input'large' | 'small' | 'default''default'
[nzStatus]Set validation status'error' | 'warning'-
[nzCheckable]Whether to show checkbox on the treeNodesbooleanfalse
[nzCheckStrictly]Check treeNode precisely; parent treeNode and children treeNodes are not associatedbooleanfalse
[nzShowExpand]Show a Expand Icon before the treeNodesbooleantrue
[nzShowLine]Shows a connecting linebooleanfalse
[nzAsyncData]Load data asynchronously (should be used with NzTreeNode.addChildren(...))booleanfalse
[nzNodes]Data of the treeNodesNzTreeNodeOptions[][]
[nzDefaultExpandAll]Whether to expand all treeNodes by defaultbooleanfalse
[nzExpandedKeys]Default expanded treeNodesstring[]-
[nzDisplayWith]How to display the selected node value in the trigger(node: NzTreeNode) => string(node: NzTreeNode) => node.title
[nzMaxTagCount]Max tag count to shownumber-
[nzMaxTagPlaceholder]Placeholder for not showing tagsTemplateRef<{ $implicit: NzTreeNode[] }>-
[nzTreeTemplate]Custom NodesTemplateRef<{ $implicit: NzTreeNode }>-
[nzVirtualHeight]The height of virtual scrollstring-
[nzVirtualItemSize]The size of the items in the list, same as cdk itemSizenumber28
[nzVirtualMaxBufferPx]The number of pixels worth of buffer to render for when rendering new items, same as cdk maxBufferPxnumber500
[nzVirtualMinBufferPx]The minimum amount of buffer rendered beyond the viewport (in pixels),same as cdk minBufferPxnumber28
[nzBackdrop]whether or not the overlay should attach a backdropbooleanfalse
(nzExpandChange)Callback function for when a treeNode is expanded or collapsedEventEmitter<NzFormatEmitEvent>-


getTreeNodesget all nodes(NzTreeNode)NzTreeNode[]
getTreeNodeByKeyget NzTreeNode with keyNzTreeNode
getCheckedNodeListget checked nodes(merged)NzTreeNode[]
getSelectedNodeListget selected nodesNzTreeNode[]
getHalfCheckedNodeListget half checked nodesNzTreeNode[]
getExpandedNodeListget expanded nodesNzTreeNode[]
getMatchedNodeListget matched nodes(if nzSearchValue is not null)NzTreeNode[]