feat(module:tree-select): render title of selected node in innerHTML (#9259)

Author: Laffery

components/cascader/cascader.component.ts

@@ -106,18 +106,14 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
         @if (nzMultiple) {
           @for (node of selectedNodes | slice: 0 : nzMaxTagCount; track node) {
             <nz-select-item
-              [deletable]="true"
+              deletable
               [disabled]="nzDisabled"
               [label]="nzDisplayWith(getAncestorOptionList(node))"
               (delete)="removeSelected(node)"
             ></nz-select-item>
           }
           @if (selectedNodes.length > nzMaxTagCount) {
-            <nz-select-item
-              [deletable]="false"
-              [disabled]="false"
-              [label]="'+ ' + (selectedNodes.length - nzMaxTagCount) + ' ...'"
-            ></nz-select-item>
+            <nz-select-item [label]="'+ ' + (selectedNodes.length - nzMaxTagCount) + ' ...'"></nz-select-item>
           }
         }
 
@@ -141,7 +137,6 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
 
         @if (showLabelRender) {
           <nz-select-item
-            [deletable]="false"
             [disabled]="nzDisabled"
             [label]="labelRenderText"
             [contentTemplateOutlet]="isLabelRenderTemplate ? nzLabelRender : null"

components/select/select-item.component.ts

@@ -5,6 +5,7 @@
 
 import { NgTemplateOutlet } from '@angular/common';
 import {
+  booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
@@ -24,10 +25,10 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <ng-container *nzStringTemplateOutlet="contentTemplateOutlet; context: templateOutletContext">
-      @if (deletable) {
-        <div class="ant-select-selection-item-content">{{ label }}</div>
+      @if (displayLabelInHtml) {
+        <div [class.ant-select-selection-item-content]="deletable" [innerHTML]="label"></div>
       } @else {
-        {{ label }}
+        <div [class.ant-select-selection-item-content]="deletable">{{ label }}</div>
       }
     </ng-container>
     @if (deletable && !disabled) {
@@ -48,9 +49,14 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   imports: [NgTemplateOutlet, NzOutletModule, NzIconModule]
 })
 export class NzSelectItemComponent {
-  @Input() disabled = false;
+  @Input({ transform: booleanAttribute }) disabled = false;
   @Input() label: string | number | null | undefined = null;
-  @Input() deletable = false;
+  /**
+   * @internal Internally used, please do not use it directly.
+   * @description Whether the label is in HTML format.
+   */
+  @Input({ transform: booleanAttribute }) displayLabelInHtml = false;
+  @Input({ transform: booleanAttribute }) deletable = false;
   @Input() removeIcon: TemplateRef<NzSafeAny> | null = null;
   @Input() contentTemplateOutletContext: NzSafeAny | null = null;
   @Input() contentTemplateOutlet: string | TemplateRef<NzSafeAny> | null = null;

components/select/select-top-control.component.ts

@@ -55,8 +55,6 @@ import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } f
         ></nz-select-search>
         @if (isShowSingleLabel) {
           <nz-select-item
-            [deletable]="false"
-            [disabled]="false"
             [removeIcon]="removeIcon"
             [label]="listOfTopItem[0].nzLabel"
             [contentTemplateOutlet]="customTemplate"
@@ -72,7 +70,7 @@ import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } f
             [label]="item.nzLabel"
             [disabled]="item.nzDisabled || disabled"
             [contentTemplateOutlet]="item.contentTemplateOutlet"
-            [deletable]="true"
+            deletable
             [contentTemplateOutletContext]="item.contentTemplateOutletContext"
             (delete)="onDeleteItem(item.contentTemplateOutletContext)"
           ></nz-select-item>

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

@@ -168,18 +168,17 @@ const listOfPositions = [
       @if (isMultiple) {
         @for (node of selectedNodes | slice: 0 : nzMaxTagCount; track node.key) {
           <nz-select-item
-            [deletable]="true"
+            deletable
             [disabled]="node.isDisabled || nzDisabled"
             [label]="nzDisplayWith(node)"
+            displayLabelInHtml
             (delete)="removeSelected(node, true)"
           ></nz-select-item>
         }
         @if (selectedNodes.length > nzMaxTagCount) {
           <nz-select-item
             [contentTemplateOutlet]="nzMaxTagPlaceholder"
             [contentTemplateOutletContext]="selectedNodes | slice: nzMaxTagCount"
-            [deletable]="false"
-            [disabled]="false"
             [label]="'+ ' + (selectedNodes.length - nzMaxTagCount) + ' ...'"
           ></nz-select-item>
         }
@@ -205,11 +204,7 @@ const listOfPositions = [
       }
 
       @if (!isMultiple && selectedNodes.length === 1 && !isComposing && inputValue === '') {
-        <nz-select-item
-          [deletable]="false"
-          [disabled]="false"
-          [label]="nzDisplayWith(selectedNodes[0])"
-        ></nz-select-item>
+        <nz-select-item [label]="nzDisplayWith(selectedNodes[0])" displayLabelInHtml></nz-select-item>
       }
 
       @if (!isMultiple) {