Load data asynchronously

Checkable

Virtual Scroll

Custom empty state

Placement

TreeSelect

Tree selection control.

Import

Source

components/tree-select

Docs

Edit this page

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.

Examples#

parent 1-0

Basic

The most basic usage.

      Loading...

Please select

Load data asynchronously

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

      Loading...

Please select

Virtual Scroll

Set nzVirtualHeight to enable virtual scroll.

      Loading...

topLefttopRightbottomLeftbottomRight

Please select

Placement

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

      Loading...

parent 1

Variants

Variants of TreeSelect, there are four variants: outlined, filled, borderless and underlined.

      Loading...

20.0.0

Please select

Multiple Selection

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

      Loading...

Node1

Checkable

Multiple and checkable.

      Loading...

Please select

Custom empty state

Use nzNotFoundContent to customize empty data style

      Loading...

Error

Warning multiple

Status

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

      Loading...

Prefix

Prefix and Suffix

Custom nzPrefix and nzSuffixIcon.

      Loading...

API#

nz-tree-selectcomponent#

Property	Description	Type	Default	Global Config	Version
`[nzId]`	input id attribute inside the component	`string`	-
`[nzAllowClear]`	Whether allow clear	`boolean`	`false`
`[nzPlaceHolder]`	Placeholder of the select input	`string`	-
`[nzPlacement]`	The position where the selection box pops up	`'bottomLeft' \| 'bottomRight' \| 'topLeft' \| 'topRight'`	`'bottomLeft'`
`[nzDisabled]`	Disabled or not	`boolean`	`false`
`[nzShowIcon]`	Shows the icon before a TreeNode's title. There is no default style	`boolean`	`false`
`[nzShowSearch]`	Whether to display a search input in the dropdown menu(valid only in the single mode)	`boolean`	`false`	✅
`[nzNotFoundContent]`	Specify content to show when no result matches.	`'string' \| 'TemplateRef<void>'`	-
`[nzDropdownMatchSelectWidth]`	Determine whether the dropdown menu and the select input are the same width	`boolean`	`true`	✅
`[nzDropdownStyle]`	To set the style of the dropdown menu	`object`	-
`[nzDropdownClassName]`	classname of dropdown menu	`string`	-
`[nzMultiple]`	Support multiple or not, will be `true` when enable `nzCheckable`.	`boolean`	`false`
`[nzHideUnMatched]`	Hide unmatched nodes while searching	`boolean`	`false`	✅
`[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 treeNodes	`boolean`	`false`
`[nzCheckStrictly]`	Check treeNode precisely; parent treeNode and children treeNodes are not associated	`boolean`	`false`
`[nzShowExpand]`	Show a Expand Icon before the treeNodes	`boolean`	`true`
`[nzShowLine]`	Shows a connecting line	`boolean`	`false`
`[nzPrefix]`	The custom prefix	`TemplateRef<any> \| string`	-
`[nzSuffixIcon]`	The custom suffix icon	`TemplateRef<any> \| string`	-
`[nzAsyncData]`	Load data asynchronously (should be used with NzTreeNode.addChildren(...))	`boolean`	`false`
`[nzNodes]`	Data of the treeNodes	`NzTreeNodeOptions[]`	`[]`
`[nzDefaultExpandAll]`	Whether to expand all treeNodes by default	`boolean`	`false`
`[nzExpandedKeys]`	Default expanded treeNodes	`string[]`	-
`[nzDisplayWith]`	How to display the selected node value in the trigger	`(node: NzTreeNode) => string`	`(node: NzTreeNode) => node.title`
`[nzMaxTagCount]`	Max tag count to show	number	-
`[nzMaxTagPlaceholder]`	Placeholder for not showing tags	TemplateRef<{ $implicit: NzTreeNode[] }>	-
`[nzTreeTemplate]`	Custom Nodes	`TemplateRef<{ $implicit: NzTreeNode }>`	-
`[nzVariant]`	Variants of TreeSelect	`'outlined' \| 'borderless' \| 'filled' \| 'underlined'`	`'outlined'`	✅	20.0.0
`[nzVirtualHeight]`	The height of virtual scroll	`string`	`-`
`[nzVirtualItemSize]`	The size of the items in the list, same as cdk itemSize	`number`	`28`
`[nzVirtualMaxBufferPx]`	The number of pixels worth of buffer to render for when rendering new items, same as cdk maxBufferPx	`number`	`500`
`[nzVirtualMinBufferPx]`	The minimum amount of buffer rendered beyond the viewport (in pixels),same as cdk minBufferPx	`number`	`28`
`[nzBackdrop]`	whether or not the overlay should attach a backdrop	`boolean`	`false`
`(nzExpandChange)`	Callback function for when a treeNode is expanded or collapsed	`EventEmitter<NzFormatEmitEvent>`	-

Methods#

Property	Description	Type
`getTreeNodes`	get all nodes(NzTreeNode)	`NzTreeNode[]`
`getTreeNodeByKey`	get NzTreeNode with key	`NzTreeNode`
`getCheckedNodeList`	get checked nodes(merged)	`NzTreeNode[]`
`getSelectedNodeList`	get selected nodes	`NzTreeNode[]`
`getHalfCheckedNodeList`	get half checked nodes	`NzTreeNode[]`
`getExpandedNodeList`	get expanded nodes	`NzTreeNode[]`
`getMatchedNodeList`	get matched nodes(if `nzSearchValue` is not null)	`NzTreeNode[]`

FAQ#

Q: The overlay layer element does not follow the scroll position when scrolling#

By default, the overlay layer element uses body as the scroll container. If using another scroll container, add the CdkScrollable directive to the custom scroll container element. Note: You need to import the CdkScrollable directive or ScrollingModule module from @angular/cdk/scrolling.