feat(module:tree-select): add nzSelectedTemplate option

components/tree-select/demo/customized-selected-node.md

@@ -0,0 +1,14 @@
+---
+order: 10
+title:
+  zh-CN: 自定义图标
+  en-US: Custom Top Render
+---
+
+## zh-CN
+
+通过 `nzSelectedTemplate` 自定义 nz-tree-select 显示的内容。
+
+## en-US
+
+Custom the content of nz-tree-select via `nzSelectedTemplate`.

components/tree-select/demo/customized-selected-node.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzTreeNodeOptions } from 'ng-zorro-antd/core/tree';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
+
+function createNodes(): NzTreeNodeOptions[] {
+  return [
+    {
+      title: 'parent 1',
+      key: '100',
+      expanded: true,
+      icon: 'smile',
+      children: [
+        { title: 'leaf 1-0-0', key: '10010', icon: 'meh', isLeaf: true },
+        { title: 'leaf 1-0-1', key: '10011', icon: 'frown', isLeaf: true }
+      ]
+    }
+  ];
+}
+
+@Component({
+  selector: 'nz-demo-tree-select-customized-selected-node',
+  imports: [FormsModule, NzIconModule, NzTreeSelectModule],
+  template: `
+    <nz-tree-select
+      style="width: 250px"
+      [(ngModel)]="value"
+      [nzNodes]="nodes1"
+      [nzSelectedTemplate]="nzSelectedTemplate"
+      nzPlaceHolder="Please select"
+      nzShowIcon
+    ></nz-tree-select>
+    <br />
+    <nz-tree-select
+      style="width: 250px; margin-top: 20px;"
+      [(ngModel)]="multipleValue"
+      [nzNodes]="nodes2"
+      [nzSelectedTemplate]="nzSelectedTemplate"
+      nzMultiple
+      nzPlaceHolder="Please select"
+    >
+    </nz-tree-select>
+    <ng-template #nzSelectedTemplate let-node>
+      <span class="ant-tree-node-content-wrapper" [class.ant-tree-node-selected]="node.isSelected">
+        <span>
+          <span nz-icon [nzType]="node.icon"></span>
+          {{ node.title }}
+        </span>
+      </span>
+    </ng-template>
+  `
+})
+export class NzDemoTreeSelectCustomizedSelectedNodeComponent {
+  value?: string;
+  readonly nodes1 = createNodes();
+
+  multipleValue?: string[];
+  readonly nodes2 = createNodes();
+}

components/tree-select/doc/index.en-US.md

@@ -49,6 +49,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 | `[nzMaxTagCount]`              | Max tag count to show                                                                                                                                 | number                                          | -                                  |
 | `[nzMaxTagPlaceholder]`        | Placeholder for not showing tags                                                                                                                      | TemplateRef<{ $implicit: NzTreeNode[] }>        | -                                  |
 | `[nzTreeTemplate]`             | Custom Nodes                                                                                                                                          | `TemplateRef<{ $implicit: NzTreeNode }>`        | -                                  |
+| `[nzSelectedTemplate]`         | The custom template of select                                                                                                                         | `TemplateRef<{ $implicit: NzTreeNode }>`        | -                                  |
 | `[nzVirtualHeight]`            | The height of virtual scroll                                                                                                                          | `string`                                        | `-`                                |
 | `[nzVirtualItemSize]`          | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api)                                              | `number`                                        | `28`                               |
 | `[nzVirtualMaxBufferPx]`       | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number`                                        | `500`                              |

components/tree-select/doc/index.zh-CN.md

@@ -49,6 +49,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 | `[nzMaxTagCount]`              | 最多显示多少个 tag                                                                                                   | number                                          | -                                  |
 | `[nzMaxTagPlaceholder]`        | 隐藏 tag 时显示的内容                                                                                                | TemplateRef<{ $implicit: NzTreeNode[] }>        | -                                  |
 | `[nzTreeTemplate]`             | 自定义节点                                                                                                           | `TemplateRef<{ $implicit: NzTreeNode }>`        | -                                  |
+| `[nzSelectedTemplate]`         | 自定义选择框的 Template 内容                                                                                          | `TemplateRef<{ $implicit: NzTreeNode }>`        | -                                  |
 | `[nzVirtualHeight]`            | 虚拟滚动的总高度                                                                                                     | `string`                                        | `-`                                |
 | `[nzVirtualItemSize]`          | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同                        | `number`                                        | `28`                               |
 | `[nzVirtualMaxBufferPx]`       | 缓冲区最大像素高度，与 [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) 相同                         | `number`                                        | `500`                              |

components/tree-select/tree-select.component.ts

@@ -170,6 +170,8 @@ const listOfPositions = [
             [deletable]="true"
             [disabled]="node.isDisabled || nzDisabled"
             [label]="nzDisplayWith(node)"
+            [contentTemplateOutlet]="selectedItemTemplate"
+            [contentTemplateOutletContext]="node"
             (delete)="removeSelected(node, true)"
           ></nz-select-item>
         }
@@ -208,6 +210,8 @@ const listOfPositions = [
           [deletable]="false"
           [disabled]="false"
           [label]="nzDisplayWith(selectedNodes[0])"
+          [contentTemplateOutlet]="selectedItemTemplate"
+          [contentTemplateOutletContext]="selectedNodes[0]"
         ></nz-select-item>
       }
 
@@ -325,6 +329,15 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
     return this.nzTreeTemplate || this.nzTreeTemplateChild;
   }
 
+  @Input() nzSelectedTemplate!: TemplateRef<{ $implicit: NzTreeNode; origin: NzTreeNodeOptions }>;
+  @ContentChild('nzSelectedTemplate', { static: true }) nzSelectedTemplateChild!: TemplateRef<{
+    $implicit: NzTreeNode;
+    origin: NzTreeNodeOptions;
+  }>;
+  get selectedItemTemplate(): TemplateRef<{ $implicit: NzTreeNode; origin: NzTreeNodeOptions }> {
+    return this.nzSelectedTemplate || this.nzSelectedTemplateChild;
+  }
+
   prefixCls: string = 'ant-select';
   statusCls: NgClassInterface = {};
   status: NzValidateStatus = '';

components/tree-select/tree-select.spec.ts

@@ -2,7 +2,7 @@ import { BACKSPACE } from '@angular/cdk/keycodes';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { TestKey } from '@angular/cdk/testing';
 import { UnitTestElement } from '@angular/cdk/testing/testbed';
-import { Component, DebugElement, NgZone, ViewChild } from '@angular/core';
+import { Component, DebugElement, NgZone, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -16,7 +16,7 @@ import {
   typeInElement
 } from 'ng-zorro-antd/core/testing';
 import { NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/core/tree';
-import { NzStatus } from 'ng-zorro-antd/core/types';
+import { NzSafeAny, NzStatus } from 'ng-zorro-antd/core/types';
 import { NzFormControlStatusType, NzFormModule } from 'ng-zorro-antd/form';
 
 import { NzTreeSelectComponent } from './tree-select.component';
@@ -349,6 +349,22 @@ describe('tree-select component', () => {
       expect(treeSelectComponent.isComposing).toBe(true);
       expect(treeSelectComponent.inputValue).toBe('');
     }));
+
+    it('should nzSelectedTemplate works', fakeAsync(() => {
+      testComponent.setNull();
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+      expect(treeSelect.nativeElement.querySelector('nz-select-item')).toBeFalsy();
+      testComponent.value = '100012';
+      testComponent.nzSelectedTemplate = testComponent.selectedTemplate;
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(treeSelect.nativeElement.querySelector('nz-select-item')!.textContent?.trim()).toBe(`selected: child1.2`);
+    }));
   });
 
   describe('checkable', () => {
@@ -678,18 +694,22 @@ describe('tree-select component', () => {
       [nzMaxTagCount]="maxTagCount"
       [nzDropdownStyle]="{ height: '120px' }"
       [nzBackdrop]="hasBackdrop"
+      [nzSelectedTemplate]="nzSelectedTemplate ?? null"
       nzDropdownClassName="class1 class2"
     ></nz-tree-select>
+    <ng-template #selectedTemplate let-selected>selected: {{ selected.title }}</ng-template>
   `
 })
 export class NzTestTreeSelectBasicComponent {
   @ViewChild(NzTreeSelectComponent, { static: false }) nzSelectTreeComponent!: NzTreeSelectComponent;
+  @ViewChild('selectedTemplate') selectedTemplate!: TemplateRef<NzSafeAny>;
   expandKeys = ['1001', '10001'];
   value: string | string[] | null = '10001';
   size = 'default';
   allowClear = false;
   disabled = false;
   showSearch = false;
+  nzSelectedTemplate?: TemplateRef<{ $implicit: NzTreeNode }>;
   dropdownMatchSelectWidth = true;
   multiple = false;
   maxTagCount = Infinity;