Tree

When To Use#

Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The Tree component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a Tree.

Import this Component Individually#

You can get more detail here.

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

Examples

  • parent 1
    • parent 1-0
      • leaf 1-0-0
      • leaf 1-0-1
    • parent 1-1

The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.

expand codeexpand code
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/core';
import { NzTreeComponent } from 'ng-zorro-antd/tree';

@Component({
  selector: 'nz-demo-tree-basic',
  template: `
    <nz-tree
      #nzTreeComponent
      [nzData]="nodes"
      nzCheckable
      [nzCheckedKeys]="defaultCheckedKeys"
      [nzExpandedKeys]="defaultExpandedKeys"
      [nzSelectedKeys]="defaultSelectedKeys"
      (nzClick)="nzClick($event)"
      (nzCheckBoxChange)="nzCheck($event)"
      (nzExpandChange)="nzCheck($event)"
    >
    </nz-tree>
  `
})
export class NzDemoTreeBasicComponent implements AfterViewInit {
  @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent: NzTreeComponent;
  defaultCheckedKeys = ['10020'];
  defaultSelectedKeys = ['10010'];
  defaultExpandedKeys = ['100', '1001'];

  nodes: NzTreeNodeOptions[] = [
    {
      title: 'parent 1',
      key: '100',
      children: [
        {
          title: 'parent 1-0',
          key: '1001',
          disabled: true,
          children: [
            { title: 'leaf 1-0-0', key: '10010', disableCheckbox: true, isLeaf: true },
            { title: 'leaf 1-0-1', key: '10011', isLeaf: true }
          ]
        },
        {
          title: 'parent 1-1',
          key: '1002',
          children: [
            { title: 'leaf 1-1-0', key: '10020', isLeaf: true },
            { title: 'leaf 1-1-1', key: '10021', isLeaf: true }
          ]
        }
      ]
    }
  ];

  nzClick(event: NzFormatEmitEvent): void {
    console.log(event);
  }

  nzCheck(event: NzFormatEmitEvent): void {
    console.log(event);
  }

  // nzSelectedKeys change
  nzSelect(keys: string[]): void {
    console.log(keys, this.nzTreeComponent.getSelectedNodeList());
  }

  ngAfterViewInit(): void {
    // get node by key: '10011'
    console.log(this.nzTreeComponent.getTreeNodeByKey('10011'));
    // use tree methods
    console.log(
      this.nzTreeComponent.getTreeNodes(),
      this.nzTreeComponent.getCheckedNodeList(),
      this.nzTreeComponent.getSelectedNodeList(),
      this.nzTreeComponent.getExpandedNodeList()
    );
  }
}
  • 0-0
    • 0-0-0
      • 0-0-0-0
      • 0-0-0-1
      • 0-0-0-2
    • 0-0-1
    • 0-0-2
  • 0-1
  • 0-2

Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.

expand codeexpand code
import { Component } from '@angular/core';
import { NzFormatEmitEvent } from 'ng-zorro-antd/core';

@Component({
  selector: 'nz-demo-tree-draggable',
  template: `
    <nz-tree [nzData]="nodes" nzDraggable nzBlockNode (nzOnDrop)="nzEvent($event)"> </nz-tree>
  `
})
export class NzDemoTreeDraggableComponent {
  nodes = [
    {
      title: '0-0',
      key: '00',
      expanded: true,
      children: [
        {
          title: '0-0-0',
          key: '000',
          expanded: true,
          children: [
            { title: '0-0-0-0', key: '0000', isLeaf: true },
            { title: '0-0-0-1', key: '0001', isLeaf: true },
            { title: '0-0-0-2', key: '0002', isLeaf: true }
          ]
        },
        {
          title: '0-0-1',
          key: '001',
          children: [
            { title: '0-0-1-0', key: '0010', isLeaf: true },
            { title: '0-0-1-1', key: '0011', isLeaf: true },
            { title: '0-0-1-2', key: '0012', isLeaf: true }
          ]
        },
        {
          title: '0-0-2',
          key: '002'
        }
      ]
    },
    {
      title: '0-1',
      key: '01',
      children: [
        {
          title: '0-1-0',
          key: '010',
          children: [
            { title: '0-1-0-0', key: '0100', isLeaf: true },
            { title: '0-1-0-1', key: '0101', isLeaf: true },
            { title: '0-1-0-2', key: '0102', isLeaf: true }
          ]
        },
        {
          title: '0-1-1',
          key: '011',
          children: [
            { title: '0-1-1-0', key: '0110', isLeaf: true },
            { title: '0-1-1-1', key: '0111', isLeaf: true },
            { title: '0-1-1-2', key: '0112', isLeaf: true }
          ]
        }
      ]
    },
    {
      title: '0-2',
      key: '02',
      isLeaf: true
    }
  ];

  nzEvent(event: NzFormatEmitEvent): void {
    console.log(event);
  }
}
  • Expand to load
  • Expand to load
  • Tree Node

To load data asynchronously when click to expand a treeNode.

expand codeexpand code
import { Component } from '@angular/core';
import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/core';

@Component({
  selector: 'nz-demo-tree-dynamic',
  template: `
    <nz-tree [nzData]="nodes" nzAsyncData (nzClick)="nzEvent($event)" (nzExpandChange)="nzEvent($event)"> </nz-tree>
  `
})
export class NzDemoTreeDynamicComponent {
  nodes = [
    { title: 'Expand to load', key: '0' },
    { title: 'Expand to load', key: '1' },
    { title: 'Tree Node', key: '2', isLeaf: true }
  ];

  nzEvent(event: Required<NzFormatEmitEvent>): void {
    console.log(event);
    // load child async
    if (event.eventName === 'expand') {
      const node = event.node;
      if (node && node.getChildren().length === 0 && node.isExpanded) {
        this.loadNode().then(data => {
          node.addChildren(data);
        });
      }
    }
  }

  loadNode(): Promise<NzTreeNodeOptions[]> {
    return new Promise(resolve => {
      setTimeout(
        () =>
          resolve([
            { title: 'Child Node', key: `${new Date().getTime()}-0` },
            { title: 'Child Node', key: `${new Date().getTime()}-1` }
          ]),
        1000
      );
    });
  }
}
  • parent 1
    • parent 1-0
      • leaf
      • leaf
      • leaf
    • parent 1-1
    • parent 1-2

Tree With Line.

expand codeexpand code
import { Component } from '@angular/core';
import { NzFormatEmitEvent } from 'ng-zorro-antd/core';

@Component({
  selector: 'nz-demo-tree-line',
  template: `
    <nz-tree [nzData]="nodes" nzShowLine (nzClick)="nzEvent($event)"> </nz-tree>
  `
})
export class NzDemoTreeLineComponent {
  nodes = [
    {
      title: 'parent 1',
      key: '100',
      expanded: true,
      children: [
        {
          title: 'parent 1-0',
          key: '1001',
          expanded: true,
          children: [
            { title: 'leaf', key: '10010', isLeaf: true },
            { title: 'leaf', key: '10011', isLeaf: true },
            { title: 'leaf', key: '10012', isLeaf: true }
          ]
        },
        {
          title: 'parent 1-1',
          key: '1002',
          children: [{ title: 'leaf', key: '10020', isLeaf: true }]
        },
        {
          title: 'parent 1-2',
          key: '1003',
          children: [{ title: 'leaf', key: '10030', isLeaf: true }, { title: 'leaf', key: '10031', isLeaf: true }]
        }
      ]
    }
  ];

  nzEvent(event: NzFormatEmitEvent): void {
    console.log(event);
  }
}
  • parent 0created by ng zorro
    • leaf 0-0modified by ng zorro
    • leaf 0-1modified by ng zorro
  • parent 1created by ng zorro

Customize directory tree(with nzTreeTemplate, supported contextmenu).

expand codeexpand code
import { Component } from '@angular/core';
import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd/core';

@Component({
  selector: 'nz-demo-tree-directory',
  template: `
    <nz-tree
      [nzData]="nodes"
      (nzClick)="activeNode($event)"
      (nzDblClick)="openFolder($event)"
      [nzTreeTemplate]="nzTreeTemplate"
    ></nz-tree>
    <ng-template #nzTreeTemplate let-node>
      <span class="custom-node" [class.active]="activedNode?.key === node.key">
        <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, menu)">
          <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>
          <span class="folder-name">{{ node.title }}</span>
          <span class="folder-desc">created by {{ node?.origin?.author | lowercase }}</span>
        </span>
        <span *ngIf="node.isLeaf" (contextmenu)="contextMenu($event, menu)">
          <i nz-icon nzType="file"></i>
          <span class="file-name">{{ node.title }}</span>
          <span class="file-desc">modified by {{ node?.origin?.author | lowercase }}</span>
        </span>
      </span>
    </ng-template>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item (click)="selectDropdown()">Action 1</li>
        <li nz-menu-item (click)="selectDropdown()">Action 2</li>
      </ul>
    </nz-dropdown-menu>
  `,
  styles: [
    `
      :host ::ng-deep .ant-tree {
        overflow: hidden;
        margin: 0 -24px;
        padding: 0 24px;
      }

      :host ::ng-deep .ant-tree li {
        padding: 4px 0 0 0;
      }

      .custom-node {
        cursor: pointer;
        line-height: 24px;
        margin-left: 4px;
        display: inline-block;
        margin: 0 -1000px;
        padding: 0 1000px;
      }

      .active {
        background: #1890ff;
        color: #fff;
      }

      .file-name,
      .folder-name {
        margin-left: 4px;
      }

      .file-desc,
      .folder-desc {
        padding: 0 8px;
        display: inline-block;
        background: #87ceff;
        color: #ffffff;
        position: relative;
        left: 12px;
      }
    `
  ]
})
export class NzDemoTreeDirectoryComponent {
  // actived node
  activedNode: NzTreeNode;
  nodes = [
    {
      title: 'parent 0',
      key: '100',
      author: 'NG ZORRO',
      expanded: true,
      children: [
        { title: 'leaf 0-0', key: '1000', author: 'NG ZORRO', isLeaf: true },
        { title: 'leaf 0-1', key: '1001', author: 'NG ZORRO', isLeaf: true }
      ]
    },
    {
      title: 'parent 1',
      key: '101',
      author: 'NG ZORRO',
      children: [
        { title: 'leaf 1-0', key: '1010', author: 'NG ZORRO', isLeaf: true },
        { title: 'leaf 1-1', key: '1011', author: 'NG ZORRO', isLeaf: true }
      ]
    }
  ];

  openFolder(data: NzTreeNode | Required<NzFormatEmitEvent>): void {
    // do something if u want
    if (data instanceof NzTreeNode) {
      data.isExpanded = !data.isExpanded;
    } else {
      const node = data.node;
      if (node) {
        node.isExpanded = !node.isExpanded;
      }
    }
  }

  activeNode(data: NzFormatEmitEvent): void {
    this.activedNode = data.node!;
  }

  contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent): void {
    this.nzContextMenuService.create($event, menu);
  }

  selectDropdown(): void {
    // do something
  }

  constructor(private nzContextMenuService: NzContextMenuService) {}
}
  • 0-0
    • 0-0-0
      • 0-0-0-0
      • 0-0-0-1
      • 0-0-0-2
    • 0-0-1
      • 0-0-1-0
      • 0-0-1-1
      • 0-0-1-2
    • 0-0-2
  • 0-1
  • 0-2

basic controlled example.

expand codeexpand code
import { Component } from '@angular/core';
import { NzFormatEmitEvent } from 'ng-zorro-antd/core';

@Component({
  selector: 'nz-demo-tree-basic-controlled',
  template: `
    <nz-tree
      [nzData]="nodes"
      nzCheckable
      nzMultiple
      [nzCheckedKeys]="defaultCheckedKeys"
      [nzExpandedKeys]="defaultExpandedKeys"
      [nzSelectedKeys]="defaultSelectedKeys"
      (nzClick)="nzEvent($event)"
      (nzExpandChange)="nzEvent($event)"
      (nzCheckBoxChange)="nzEvent($event)"
    >
    </nz-tree>
  `
})
export class NzDemoTreeBasicControlledComponent {
  defaultCheckedKeys = ['0-0-0'];
  defaultSelectedKeys = ['0-0-0'];
  defaultExpandedKeys = ['0-0', '0-0-0', '0-0-1'];

  nodes = [
    {
      title: '0-0',
      key: '0-0',
      expanded: true,
      children: [
        {
          title: '0-0-0',
          key: '0-0-0',
          children: [
            { title: '0-0-0-0', key: '0-0-0-0', isLeaf: true },
            { title: '0-0-0-1', key: '0-0-0-1', isLeaf: true },
            { title: '0-0-0-2', key: '0-0-0-2', isLeaf: true }
          ]
        },
        {
          title: '0-0-1',
          key: '0-0-1',
          children: [
            { title: '0-0-1-0', key: '0-0-1-0', isLeaf: true },
            { title: '0-0-1-1', key: '0-0-1-1', isLeaf: true },
            { title: '0-0-1-2', key: '0-0-1-2', isLeaf: true }
          ]
        },
        {
          title: '0-0-2',
          key: '0-0-2',
          isLeaf: true
        }
      ]
    },
    {
      title: '0-1',
      key: '0-1',
      children: [
        { title: '0-1-0-0', key: '0-1-0-0', isLeaf: true },
        { title: '0-1-0-1', key: '0-1-0-1', isLeaf: true },
        { title: '0-1-0-2', key: '0-1-0-2', isLeaf: true }
      ]
    },
    {
      title: '0-2',
      key: '0-2',
      isLeaf: true
    }
  ];

  nzEvent(event: NzFormatEmitEvent): void {
    console.log(event);
  }
}
  • 0-0
    • 0-0-0
    • 0-0-1

nzBeforeDrop: Validate before drop event, for example: only allow to drag inside(delay 1s)、 validate using modal .etc.

expand codeexpand code
import { Component } from '@angular/core';
import { NzFormatBeforeDropEvent } from 'ng-zorro-antd/core';
import { of, Observable } from 'rxjs';
import { delay } from 'rxjs/operators';

@Component({
  selector: 'nz-demo-tree-draggable-confirm',
  template: `
    <nz-tree [nzData]="nodes" nzDraggable nzBlockNode [nzBeforeDrop]="beforeDrop"> </nz-tree>
  `
})
export class NzDemoTreeDraggableConfirmComponent {
  nodes = [
    {
      title: '0-0',
      key: '100',
      expanded: true,
      children: [
        {
          title: '0-0-0',
          key: '1001',
          children: [{ title: '0-0-0-0', key: '10010', isLeaf: true }, { title: '0-0-0-1', key: '10011', isLeaf: true }]
        },
        {
          title: '0-0-1',
          key: '1002',
          children: [{ title: '0-0-1-0', key: '10020', isLeaf: true }]
        }
      ]
    }
  ];

  beforeDrop(arg: NzFormatBeforeDropEvent): Observable<boolean> {
    // if insert node into another node, wait 1s
    if (arg.pos === 0) {
      return of(true).pipe(delay(1000));
    } else {
      return of(false);
    }
  }
}
  • parent 1
    • leaf
    • leaf
  • parent 1
    • leaf
    • leaf

You can customize icons for different nodes.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-tree-customized-icon',
  template: `
    <nz-tree [nzData]="nodes" nzShowIcon [nzExpandedIcon]="expandedIconTpl">
      <ng-template #expandedIconTpl let-node>
        <i nz-icon [nzType]="node.origin.icon" class="ant-tree-switcher-icon"></i>
      </ng-template>
    </nz-tree>
    <nz-tree [nzData]="nodes" nzShowIcon [nzExpandedIcon]="mutiExpandedIconTpl">
      <ng-template #mutiExpandedIconTpl let-node>
        <i
          *ngIf="!node.origin.isLeaf"
          nz-icon
          [nzType]="node.isExpanded ? 'folder-open' : 'folder'"
          class="ant-tree-switcher-line-icon"
        ></i>
        <i *ngIf="node.origin.isLeaf" nz-icon nzType="file" class="ant-tree-switcher-line-icon"></i>
      </ng-template>
    </nz-tree>
  `
})
export class NzDemoTreeCustomizedIconComponent {
  nodes = [
    {
      title: 'parent 1',
      key: '100',
      expanded: true,
      icon: 'anticon anticon-smile-o',
      children: [
        { title: 'leaf', key: '1001', icon: 'anticon anticon-meh-o', isLeaf: true },
        { title: 'leaf', key: '1002', icon: 'anticon anticon-frown-o', isLeaf: true }
      ]
    }
  ];
}

API#

nz-tree#

PropertyDescriptionTypeDefaultGlobal Config
[nzData]Tree data (Reference NzTreeNode)NzTreeNodeOptions[] | NzTreeNode[][]
[nzBlockNode]Whether treeNode fill remaining horizontal spacebooleanfalse
[nzCheckable]Adds a Checkbox before the treeNodesbooleanfalse
[nzShowExpand]Show a Expand Icon before the treeNodesbooleantrue
[nzShowLine]Shows a connecting linebooleanfalse
[nzExpandedIcon]Customize an expand iconTemplateRef<{ $implicit: NzTreeNode }>-
[nzShowIcon]Shows the icon before a TreeNode's title. There is no default stylebooleanfalse
[nzAsyncData]Load data asynchronously (should be used with NzTreeNode.addChildren(...))booleanfalse
[nzDraggable]Specifies whether this Tree is draggable (IE > 8)booleanfalse
[nzMultiple]Allows selecting multiple treeNodesbooleanfalse
[nzHideUnMatched]Hide unmatched nodes while searchingbooleanfalse
[nzCheckStrictly]Check treeNode precisely; parent treeNode and children treeNodes are not associatedbooleanfalse
[nzTreeTemplate]Custom NodesTemplateRef<{ $implicit: NzTreeNode }>-
[nzExpandAll]Whether to expand all treeNodesbooleanfalse
[nzExpandedKeys]Specify the keys of the default expanded treeNodesstring[][]
[nzCheckedKeys]Specifies the keys of the default checked treeNodesstring[][]
[nzSelectedKeys]Specifies the keys of the default selected treeNodesstring[][]
[nzSearchValue]Filter (highlight) treeNodes (see demo Searchable), two-way bindingstringnull
[nzBeforeDrop]Drop before the second check, allowing the user to decide whether to allow placement(confirm: NzFormatBeforeDropEvent) => Observable<boolean>-
(nzClick)Callback function for when the user clicks a treeNodeEventEmitter<NzFormatEmitEvent>-
(nzDblClick)Callback function for when the user double clicks a treeNodeEventEmitter<NzFormatEmitEvent>-
(nzContextMenu)Callback function for when the user right clicks a treeNodeEventEmitter<NzFormatEmitEvent>-
(nzCheckBoxChange)Callback function for when user clicks the CheckboxEventEmitter<NzFormatEmitEvent>-
(nzExpandChange)Callback function for when a treeNode is expanded or collapsedEventEmitter<NzFormatEmitEvent>-
(nzSearchValueChange)Callback function for when filter treeNodes(used with nzSearchValue)EventEmitter<NzFormatEmitEvent>-
(nzOnDragStart)Callback function for when the onDragStart event occursEventEmitter<NzFormatEmitEvent>-
(nzOnDragEnter)Callback function for when the onDragEnter event occursEventEmitter<NzFormatEmitEvent>-
(nzOnDragOver)Callback function for when the onDragOver event occursEventEmitter<NzFormatEmitEvent>-
(nzOnDragLeave)Callback function for when the onDragLeave event occursEventEmitter<NzFormatEmitEvent>-
(nzOnDrop)Callback function for when the onDrop event occursEventEmitter<NzFormatEmitEvent>-
(nzOnDragEnd)Callback function for when the onDragEnd event occursEventEmitter<NzFormatEmitEvent>-

Methods#

PropertyDescriptionType
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[]

NzTreeNodeOptions props#

PropertyDescriptionTypeDefault
titleTitlestring'---'
keyMust be unique!stringnull
iconicon before the treeNode,used with nzShowIconstringnull
childrenTreeNode's childrenNzTreeNodeOptions[][]
isLeafDetermines if this is a leaf node(can not be dropped to)booleanfalse
checkedSet the treeNode be checkedbooleanfalse
selectedSet the treeNode be selectedbooleanfalse
expandedSet the treeNode be expanded ()booleanfalse
selectableSet whether the treeNode can be selectedbooleantrue
disabledDisables the treeNodebooleanfalse
disableCheckboxDisables the checkbox of the treeNodebooleanfalse
[key: string]Indexable Types, can be used with NzTreeNode.originany-

NzFormatEmitEvent props#

PropertyDescriptionTypeDefault
eventNameEvent Nameenum: clickdblclickcontextmenucheckexpandsearch & dragstartdragenterdragoverdragleavedropdragend-
nodeThe current operation node (such as the target node to drop while dragging)NzTreeNodenull
eventMouseEvent or DragEvent'MouseEvent' | 'DragEvent'null
dragNode?Current drag node (existing if dragged)NzTreeNodenull
selectedKeys?Selected nodes listNzTreeNode[][]
checkedKeys?Checked nodes listNzTreeNode[][]
matchedKeys?Matched keys list while searchingNzTreeNode[][]
keys?All nodes's keys list related event(except drag events)string[][]
nodes?All nodes related event(except drag events)NzTreeNode[][]

NzFormatBeforeDropEvent props#

PropertyDescriptionTypeDefault
dragNodeCurrent drag node (existing when dragged)NzTreeNode-
nodeThe current operation node (such as the target node to drop while dragging)NzTreeNode-
posposition to drop(-1: before the target node, 0: inside the target node, 1: behind the target node)number-

NzTreeNode props#

PropertyDescriptionTypeDefault
titleTitlestringNzTreeNodeOptions.title
keyKeystringNzTreeNodeOptions.key
levelTreeNode's level relative to the root nodenumbernumber
childrenChildrenNzTreeNode[][]
origintreeNode's raw data of NzTreeNodeOptions(user provided to show more datas)NzTreeNodeOptions-
getParentNodeGet parentNodefunctionnull
isLeafWhether treeNode is a Leaf Nodebooleanfalse
isExpandedWhether treeNode is expandedbooleanfalse
isDisabledWhether treeNode is disabledbooleanfalse
isDisableCheckboxWhether treeNode's checkbox can not be clickedbooleanfalse
isSelectableSet whether the treeNode can be selectedbooleantrue
isCheckedWhether treeNode is checkedbooleanfalse
isHalfCheckedPart of treeNode's children are checkedbooleanfalse
isSelectedWhether treeNode is selectedbooleanfalse
isLoadingWhether treeNode is loading(when nzAsyncData is true)booleanfalse
isMatchedWhether treeNode's title contains nzSearchValuebooleanfalse
setSyncCheckedset isChecked value and sync other nodes' state of checkBoxfunction-
getChildrenGet all childrenfunction-
addChildrenAdd child nodes, receive NzTreeNode or NzTreeNodeOptions array, the second parameter is the inserted index position(children: array, index?: number )=>{}-
clearChildrenClear the treeNode's childrenfunction-
removeClear current node(not root node)function-

Note#

  • NzTreeNodeOptions accepts your customized properties,use NzTreeNode.origin to get them.
  • If Tree Methods used with ViewChild, should be used in ngAfterViewInit.
  • Setting NzData with NzTreeNodeOptions[] is better,if you set nzData with NzTreeNode[], it will be deprecated in next major version(8.x).