TreeSelect

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 this Component Individually#

You can get more detail here.

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

Examples

parent 1-0

The most basic usage.

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

@Component({
  selector: 'nz-demo-tree-select-basic',
  template: `
    <nz-tree-select
      style="width: 250px"
      [nzDefaultExpandedKeys]="expandKeys"
      [nzNodes]="nodes"
      nzShowSearch
      nzPlaceHolder="Please select"
      [(ngModel)]="value"
      (ngModelChange)="onChange($event)"
    >
    </nz-tree-select>
  `
})
export class NzDemoTreeSelectBasicComponent implements OnInit {
  expandKeys = ['100', '1001'];
  value: string;
  nodes = [
    {
      title: 'parent 1',
      key: '100',
      children: [
        {
          title: 'parent 1-0',
          key: '1001',
          children: [
            { title: 'leaf 1-0-0', key: '10010', 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 }]
        }
      ]
    }
  ];

  onChange($event: string): void {
    console.log($event);
  }

  ngOnInit(): void {
    // mock async
    setTimeout(() => {
      this.value = '1001';
    }, 1000);
  }
}
Please select

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

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

@Component({
  selector: 'nz-demo-tree-select-async',
  template: `
    <nz-tree-select
      style="width: 250px"
      nzPlaceHolder="Please select"
      [nzDefaultExpandedKeys]="expandKeys"
      [nzDropdownMatchSelectWidth]="true"
      [nzDropdownStyle]="{ 'max-height': '300px' }"
      [(ngModel)]="value"
      [nzNodes]="nodes"
      [nzAsyncData]="true"
      (nzExpandChange)="onExpandChange($event)"
    >
    </nz-tree-select>
  `
})
export class NzDemoTreeSelectAsyncComponent implements OnInit {
  expandKeys = ['0-0'];
  value: string;
  nodes = [
    {
      title: 'Node1',
      value: '0-0',
      key: '0-0',
      children: [
        {
          title: 'Child Node1',
          value: '0-0-1',
          key: '0-0-1'
        },
        {
          title: 'Child Node2',
          value: '0-0-2',
          key: '0-0-2'
        }
      ]
    },
    {
      title: 'Node2',
      value: '0-1',
      key: '0-1'
    }
  ];

  onExpandChange(e: Required<NzFormatEmitEvent>): void {
    const node = e.node;
    if (node && node.getChildren().length === 0 && node.isExpanded) {
      this.loadNode().then(data => {
        node.addChildren(data);
      });
    }
  }

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

  ngOnInit(): void {}
}
Please select

Please select

You can customize icons for different nodes.

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

@Component({
  selector: 'nz-demo-tree-select-customized-icon',
  template: `
    <nz-tree-select style="width: 250px" [nzNodes]="nodes" [(ngModel)]="value" nzPlaceHolder="Please select" nzShowIcon>
    </nz-tree-select>
    <br />
    <nz-tree-select
      style="width: 250px; margin-top: 20px;"
      [nzNodes]="nodes"
      [(ngModel)]="value"
      nzPlaceHolder="Please select"
    >
      <ng-template #nzTreeTemplate let-node>
        <span class="ant-tree-node-content-wrapper" [class.ant-tree-node-selected]="node.isSelected">
          <span> <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'"></i> {{ node.title }} </span>
        </span>
      </ng-template>
    </nz-tree-select>
  `
})
export class NzDemoTreeSelectCustomizedIconComponent {
  value: string;
  nodes = [
    {
      title: 'parent 1',
      key: '100',
      expanded: true,
      icon: 'anticon anticon-smile-o',
      children: [
        { title: 'leaf 1-0-0', key: '10010', icon: 'anticon anticon-meh-o', isLeaf: true },
        { title: 'leaf 1-0-1', key: '10011', icon: 'anticon anticon-frown-o', isLeaf: true }
      ]
    }
  ];
}
    Please select

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

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

@Component({
  selector: 'nz-demo-tree-select-multiple',
  template: `
    <nz-tree-select
      style="width: 250px"
      nzPlaceHolder="Please select"
      [nzMaxTagCount]="3"
      [nzMaxTagPlaceholder]="omittedPlaceHolder"
      [nzNodes]="nodes"
      [nzDefaultExpandAll]="true"
      [nzAllowClear]="false"
      [(ngModel)]="value"
      [nzMultiple]="true"
      (ngModelChange)="onChange($event)"
    >
    </nz-tree-select>
    <ng-template #omittedPlaceHolder let-omittedValues> and {{ omittedValues.length }} more... </ng-template>
  `
})
export class NzDemoTreeSelectMultipleComponent implements OnInit {
  value: string[] = [];
  nodes = [
    {
      title: 'parent 1',
      key: '100',
      children: [
        {
          title: 'parent 1-0',
          key: '1001',
          children: [
            { title: 'leaf 1-0-0', key: '10010', 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 }]
        }
      ]
    }
  ];

  onChange($event: string[]): void {
    console.log($event);
  }

  ngOnInit(): void {}
}
  • Node1

Multiple and checkable.

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

@Component({
  selector: 'nz-demo-tree-select-checkable',
  template: `
    <nz-tree-select
      style="width: 250px"
      [nzNodes]="nodes"
      nzShowSearch
      nzCheckable
      nzPlaceHolder="Please select"
      [(ngModel)]="value"
      (ngModelChange)="onChange($event)"
    >
    </nz-tree-select>
  `
})
export class NzDemoTreeSelectCheckableComponent implements OnInit {
  value: string[] = ['0-0-0'];
  nodes = [
    {
      title: 'Node1',
      value: '0-0',
      key: '0-0',
      children: [
        {
          title: 'Child Node1',
          value: '0-0-0',
          key: '0-0-0',
          isLeaf: true
        }
      ]
    },
    {
      title: 'Node2',
      value: '0-1',
      key: '0-1',
      children: [
        {
          title: 'Child Node3',
          value: '0-1-0',
          key: '0-1-0',
          isLeaf: true
        },
        {
          title: 'Child Node4',
          value: '0-1-1',
          key: '0-1-1',
          isLeaf: true
        },
        {
          title: 'Child Node5',
          value: '0-1-2',
          key: '0-1-2',
          isLeaf: true
        }
      ]
    }
  ];

  onChange($event: string[]): void {
    console.log($event);
  }

  ngOnInit(): void {}
}

API#

nz-tree-select#

PropertyDescriptionTypeDefault
[nzAllowClear]Whether allow clearbooleanfalse
[nzPlaceHolder]Placeholder of the select inputstring-
[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-
[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'
[nzCheckable]Whether to show checkbox on the treeNodesbooleanfalse
[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
[nzDefaultExpandedKeys]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[] }>-
(nzExpandChange)Callback function for when a treeNode is expanded or collapsedEventEmitter<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[]