Tree View

When To Use#

More basic Tree component, allowing each of its parts to be defined in the template, and state to be managed manually. With better performance and customizability.

import { NzTreeViewModule } from 'ng-zorro-antd/tree-view';

Examples

parent 1

parent 1-0

leaf

parent 1-1

leaf

basic

The most basic usage including select, disable and expand features.

      Loading...

Fruit

Vegetables

Green

Orange

API#

nz-tree-viewcomponentstandalone#

Property	Description	Type	Default
[nzTreeControl]	The tree controller	TreeControl	-
[nzDataSource]	The data array to render	DataSource<T>	Observable<T[]>
[nzDirectoryTree]	Whether nodes are displayed as directory style	`boolean`	`false`
[nzBlockNode]	Whether tree nodes fill remaining horizontal space	`boolean`	`false`

nz-tree-virtual-scroll-viewcomponentstandalone#

The virtual scroll tree view, which can be accessed from the CdkVirtualScrollViewport instance through the virtualScrollViewport member of the component instance.

Property	Description	Type	Default
[nzTreeControl]	The tree controller	TreeControl	-
[nzDataSource]	The data array to render	DataSource<T>	Observable<T[]>
[nzDirectoryTree]	Whether nodes are displayed as directory style	`boolean`	`false`
[nzBlockNode]	Whether tree nodes fill remaining horizontal space	`boolean`	`false`
[nzItemSize]	The size of nodes in the tree (in pixels)	`number`	`28`
[nzMinBufferPx]	The minimum amount of buffer rendered allowed outside the viewport (in pixels)	`number`	`28 * 5`
[nzMaxBufferPx]	The amount of buffer required for rendering new nodes (in pixels)	`number`	`28 * 10`

[nzTreeNodeDef]directivestandalone#

Directive to define nz-tree-node.

Property	Description	Type	Default
[nzTreeNodeDefWhen]	A matching function which indicates whether inputted node should be used. It matches the very first node that makes this function return `true`. If no nodes that makes this function return `true`, the node which does not define this function would be matched instead.	`(index: number, nodeData: T) => boolean`	-

nz-tree-nodecomponentstandalone#

The tree node container component, which needs to be defined by the nzTreeNodeDef directive.

[nzTreeNodePadding]directivestandalone#

<nz-tree-node nzTreeNodePadding></nz-tree-node>

Show node indentation by adding paddingBest Performance.

nzTreeNodeIndentLinestandalone#

<nz-tree-node nzTreeNodeIndentLine></nz-tree-node>

Show node indentation by adding indent lines.

nz-tree-node-togglecomponentstandalone#

A toggle which is used to expand / collapse the node.

Property	Description	Type	Default
[nzTreeNodeToggleRecursive]	Is it recursively expand / collapse	`boolean`	`false`

nz-tree-node-toggle[nzTreeNodeNoopToggle]componentstandalone#

A toggle that does no actions. This can be used for placeholders or displays icons.

[nz-icon][nztreenodetogglerotateicon]directivestandalone#

Define an icon in the toggle, which it will automatically rotate depending on the collapse/expand state.

[nz-icon][nztreenodetoggleactiveicon]directivestandalone#

Define an icon in the toggle for an active style, which it can be used for the loading state.

nz-tree-node-optioncomponentstandalone#

Define the selectable feature of a node.

Property	Description	Type	Default
[nzSelected]	Whether the option is selected	`boolean`	`false`
[nzDisabled]	Whether the option is disabled	`boolean`	`false`
(nzClick)	Event on click	`EventEmitter<MouseEvent>`	-

nz-tree-node-checkboxcomponentstandalone#

Define the checkbox feature of a node.

Property	Description	Type	Default
[nzChecked]	Whether the checkbox is checked	`boolean`	`false`
[nzDisabled]	Whether the checkbox is disabled	`boolean`	`false`
[nzIndeterminate]	Whether the checkbox is indeterminate	`boolean`	`false`
(nzClick)	Event on click	`EventEmitter<MouseEvent>`	-

Classes#

NzTreeFlatDataSource extends DataSource#

Construction Parameters#

Name	Description
`treeControl: FlatTreeControl<F, K>`	The tree controller.
`treeFlattener: NzTreeFlattener<T, F, K>`	Flattener for convert nested nodes `T` into flattened nodes `F`.
`initialData: T[] = []`	Initialized data.

Methods#

Name	Description
`connect(collectionViewer: CollectionViewer): Observable<F[]>`	Call from the TreeView component to listen for data updates.
`disconnect(): void`	Call when TreeView component is destroyed.
`setData(value: T[]): void`	Set the origin data
`getData(): T[]`	Get the origin data

NzTreeFlattener#

Convert nested data with child nodes into node data with level information.

Construction Parameters#

Name	Description
`transformFunction: (node: T, level: number) => F`	Receive a nested node and return a flattened node
`getLevel: (node: F) => number`	Define the method to get the `level` property
`isExpandable: (node: F) => boolean`	Methods for defining whether a node is expandable
`getChildren: (node: T) => Observable<T[]> \| T[] \| undefined \| null`	Define methods to get children nodes from nested node

Methods#

Name	Description
`flattenNodes(structuredData: T[]): F[]`	Receive nested data and return flattened data
`expandFlattenedNodes(nodes: F[], treeControl: TreeControl<F, K>): F[]`	Get flattened node data based on expansion status