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 leaf parent 1-1 leaf

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

expand codeexpand code
      Loading...
    
Vegetables

Directory tree.

expand codeexpand code
      Loading...
    
Show Leaf Icon:
parent 1 parent 1-0 leaf leaf parent 1-1 leaf parent 1-1-0 leaf leaf leaf parent 2 leaf leaf

Tree with connected line between nodes.

expand codeexpand code
      Loading...
    

Tree with checkboxes.

expand codeexpand code
      Loading...
    

To load data asynchronously when click to expand a treeNode.

expand codeexpand code
      Loading...
    
parent 1 parent 1-0 leaf leaf parent 1-1 leaf parent 2 leaf

Tree with add and delete actions.

expand codeexpand code
      Loading...
    

Use virtual scroll.

expand codeexpand code
      Loading...
    

API#

nz-tree-view#

PropertyDescriptionTypeDefault
[nzTreeControl]The tree controllerTreeControl-
[nzDataSource]The data array to renderDataSource<T>Observable<T[]>
[nzDirectoryTree]Whether nodes are displayed as directory stylebooleanfalse
[nzBlockNode]Whether tree nodes fill remaining horizontal spacebooleanfalse

nz-tree-virtual-scroll-view#

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

PropertyDescriptionTypeDefault
[nzTreeControl]The tree controllerTreeControl-
[nzDataSource]The data array to renderDataSource<T>Observable<T[]>
[nzDirectoryTree]Whether nodes are displayed as directory stylebooleanfalse
[nzBlockNode]Whether tree nodes fill remaining horizontal spacebooleanfalse
[nzItemSize]The size of nodes in the tree (in pixels)number28
[nzMinBufferPx]The minimum amount of buffer rendered allowed outside the viewport (in pixels)number28 * 5
[nzMaxBufferPx]The amount of buffer required for rendering new nodes (in pixels)number28 * 10

[nzTreeNodeDef]#

Directive to define nz-tree-node.

PropertyDescriptionTypeDefault
[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-node#

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

[nzTreeNodePadding]#

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

Show node indentation by adding paddingBest Performance.

nzTreeNodeIndentLine#

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

Show node indentation by adding indent lines.

nz-tree-node-toggle#

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

PropertyDescriptionTypeDefault
[nzTreeNodeToggleRecursive]Is it recursively expand / collapsebooleanfalse

nz-tree-node-toggle[nzTreeNodeNoopToggle]#

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

[nz-icon][nztreenodetogglerotateicon]#

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

[nz-icon][nztreenodetoggleactiveicon]#

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

nz-tree-node-option#

Define the selectable feature of a node.

PropertyDescriptionTypeDefault
[nzSelected]Whether the option is selectedbooleanfalse
[nzDisabled]Whether the option is disabledbooleanfalse
(nzClick)Event on clickEventEmitter<MouseEvent>-

nz-tree-node-checkbox#

Define the checkbox feature of a node.

PropertyDescriptionTypeDefault
[nzChecked]Whether the checkbox is checkedbooleanfalse
[nzDisabled]Whether the checkbox is disabledbooleanfalse
[nzIndeterminate]Whether the checkbox is indeterminatebooleanfalse
(nzClick)Event on clickEventEmitter<MouseEvent>-

Classes#

NzTreeFlatDataSource extends DataSource#

Construction Parameters#

NameDescription
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#

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

NzTreeFlattener#

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

Construction Parameters#

NameDescription
transformFunction: (node: T, level: number) => FReceive a nested node and return a flattened node
getLevel: (node: F) => numberDefine the method to get the level property
isExpandable: (node: F) => booleanMethods for defining whether a node is expandable
getChildren: (node: T) => Observable<T[]> | T[] | undefined | nullDefine methods to get children nodes from nested node

Methods#

NameDescription
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