feat(module:select): support custom template in select component (#3071)

close #2946

components/select/demo/custom-template.md

@@ -0,0 +1,15 @@
+---
+order: 18
+title:
+  zh-CN: 自定义选择器内容
+  en-US: Custom Select Template
+---
+
+## zh-CN
+
+通过 `nzCustomTemplate` 自定义 nz-select 显示的内容。
+
+## en-US
+
+Custom the content of nz-select via `nzCustomTemplate`.
+

components/select/demo/custom-template.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-select-custom-template',
+  template: `
+    <nz-select
+      style="width: 200px;"
+      nzAllowClear
+      nzPlaceHolder="Select OS"
+      [(ngModel)]="selectedOS"
+      [nzCustomTemplate]="custom"
+    >
+      <nz-option nzCustomContent nzLabel="Windows" nzValue="windows"><i nz-icon type="windows"></i> Windows</nz-option>
+      <nz-option nzCustomContent nzLabel="Mac" nzValue="mac"><i nz-icon type="apple"></i> Mac</nz-option>
+      <nz-option nzCustomContent nzLabel="Android" nzValue="android"><i nz-icon type="android"></i> Android</nz-option>
+    </nz-select>
+    <ng-template #custom let-selected>
+      <span>Label: {{ selected.nzLabel }} Value: {{ selected.nzValue }}</span>
+    </ng-template>
+  `
+})
+export class NzDemoSelectCustomTemplateComponent {
+  selectedOS = null;
+}

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

@@ -41,6 +41,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzDropdownClassName]` | className of dropdown menu | `string` | - |
 | `[nzDropdownMatchSelectWidth]` | Whether dropdown's with is same with select. | `boolean` | `true` |
 | `[nzDropdownStyle]` | style of dropdown menu | `object` | - |
+| `[nzCustomTemplate]` | The custom template of select | `TemplateRef<{ $implicit: NzOptionComponent }>` | - |
 | `[nzServerSearch]` | nz-option will not be filtered when set to true | `boolean` | `false` |
 | `[nzFilterOption]` | Filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | `(input?: string, option?: NzOptionComponent) => boolean;` | - |
 | `[nzMaxMultipleCount]` |  Max selected option can be selected | `number` | `Infinity` |

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

@@ -42,6 +42,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzDropdownClassName]` | 下拉菜单的 className 属性 | `string` | - |
 | `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` |
 | `[nzDropdownStyle]` | 下拉菜单的 style 属性 | `object` | - |
+| `[nzCustomTemplate]` | 自定义选择框的Template内容 | `TemplateRef<{ $implicit: NzOptionComponent }>` | - |
 | `[nzServerSearch]` | 是否使用服务端搜索，当为 true 时，将不再在前端对 nz-option 进行过滤 | `boolean` | `false` |
 | `[nzFilterOption]` | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `(input?: string, option?: NzOptionComponent) => boolean;` | - |
 | `[nzMaxMultipleCount]` | 最多选中多少个标签| `number` | `Infinity` |

components/select/nz-select-top-control.component.html

@@ -21,7 +21,9 @@
       class="ant-select-selection-selected-value"
       [attr.title]="nzSelectService.listOfCachedSelectedOption[0]?.nzLabel"
       [ngStyle]="selectedValueStyle">
-      {{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }}
+      <ng-container *nzStringTemplateOutlet="nzCustomTemplate; context: { $implicit: nzSelectService.listOfCachedSelectedOption[0] }">
+        <div class="ant-select-selection__choice__content">{{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }}</div>
+      </ng-container>
     </div>
     <!--show search-->
     <div *ngIf="nzShowSearch"
@@ -34,13 +36,15 @@
   </ng-container>
   <!--multiple or tags mode-->
   <ul *ngIf="nzSelectService.isMultipleOrTags">
-    <ng-container *ngFor="let option of nzSelectService.listOfCachedSelectedOption | slice: 0 : nzMaxTagCount;trackBy:trackValue;">
+    <ng-container *ngFor="let option of nzSelectService.listOfCachedSelectedOption | slice: 0 : nzMaxTagCount;trackBy:trackValue; let index = index">
       <li [@zoomMotion]
         [nzNoAnimation]="noAnimation?.nzNoAnimation"
         [attr.title]="option.nzLabel"
         [class.ant-select-selection__choice__disabled]="option.nzDisabled"
         class="ant-select-selection__choice">
-        <div class="ant-select-selection__choice__content">{{ option.nzLabel }}</div>
+        <ng-container *nzStringTemplateOutlet="nzCustomTemplate; context:{ $implicit: nzSelectService.listOfCachedSelectedOption[index] }">
+          <div class="ant-select-selection__choice__content">{{ option.nzLabel }}</div>
+        </ng-container>
         <span *ngIf="!option.nzDisabled"
           class="ant-select-selection__choice__remove"
           (mousedown)="$event.preventDefault()"

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

@@ -50,6 +50,7 @@ export class NzSelectTopControlComponent implements OnInit, OnDestroy {
   @Input() nzAllowClear = false;
   @Input() nzShowArrow = true;
   @Input() nzLoading = false;
+  @Input() nzCustomTemplate: TemplateRef<{ $implicit: NzOptionComponent }>;
   @Input() nzSuffixIcon: TemplateRef<void>;
   @Input() nzClearIcon: TemplateRef<void>;
   @Input() nzRemoveIcon: TemplateRef<void>;

components/select/nz-select.component.html

@@ -10,6 +10,7 @@
   [nzMaxTagCount]="nzMaxTagCount"
   [nzShowArrow]="nzShowArrow"
   [nzLoading]="nzLoading"
+  [nzCustomTemplate]="nzCustomTemplate"
   [nzSuffixIcon]="nzSuffixIcon"
   [nzClearIcon]="nzClearIcon"
   [nzRemoveIcon]="nzRemoveIcon"

components/select/nz-select.component.spec.ts

@@ -162,6 +162,16 @@ describe('nz-select component', () => {
       expect(targetElement.style.width).toBe('');
       expect(targetElement.style.minWidth).toBe('10px');
     }));
+    it('should custom template work', () => {
+      select.nativeElement.click();
+      fixture.detectChanges();
+      expect(testComponent.open).toBe(true);
+      fixture.detectChanges();
+      overlayContainerElement.querySelector('li')!.click();
+      fixture.detectChanges();
+      const selection = select.nativeElement.querySelector('.ant-select-selection') as HTMLElement;
+      expect(selection.innerText).toContain('Label: Jack\nValue: jack');
+    });
     it('should click option close dropdown', () => {
       testComponent.showSearch = true;
       select.nativeElement.click();
@@ -279,6 +289,15 @@ describe('nz-select component', () => {
       fixture.detectChanges();
       expect(testComponent.selectedValue.length).toBe(0);
     }));
+    it('should custom template work', fakeAsync(() => {
+      fixture.detectChanges();
+      selectComponent.nzSelectService.updateListOfSelectedValue(['jack'], true);
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      const selection = select.nativeElement.querySelector('.ant-select-selection') as HTMLElement;
+      expect(selection.innerText).toContain('Label: Jack\nValue: jack');
+    }));
   });
 
   describe('form', () => {
@@ -406,13 +425,18 @@ describe('nz-select component', () => {
       [nzDropdownMatchSelectWidth]="dropdownMatchSelectWidth"
       [nzDropdownStyle]="dropdownStyle"
       [nzDropdownClassName]="'test-class'"
+      [nzCustomTemplate]="custom"
       (nzOnSearch)="onSearch($event)"
       [nzPlaceHolder]="placeholder"
     >
       <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
       <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
       <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
     </nz-select>
+    <ng-template #custom let-selected>
+      <div>Label: {{ selected.nzLabel }}</div>
+      <div>Value: {{ selected.nzValue }}</div>
+    </ng-template>
   `
 })
 export class NzTestSelectDefaultComponent {
@@ -442,11 +466,15 @@ export class NzTestSelectDefaultComponent {
 
 @Component({
   template: `
-    <nz-select [(ngModel)]="selectedValue" [nzAllowClear]="true" [nzMode]="'tags'">
+    <nz-select [(ngModel)]="selectedValue" [nzAllowClear]="true" [nzMode]="'tags'" [nzCustomTemplate]="custom">
       <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
       <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
       <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled nzCustomContent>Disabled</nz-option>
     </nz-select>
+    <ng-template #custom let-selected>
+      <div>Label: {{ selected.nzLabel }}</div>
+      <div>Value: {{ selected.nzValue }}</div>
+    </ng-template>
   `
 })
 export class NzTestSelectTagsComponent {

components/select/nz-select.component.ts

@@ -123,6 +123,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie
   @Input() nzPlaceHolder: string;
   @Input() nzMaxTagCount: number;
   @Input() nzDropdownRender: TemplateRef<void>;
+  @Input() nzCustomTemplate: TemplateRef<{ $implicit: NzOptionComponent }>;
   @Input() nzSuffixIcon: TemplateRef<void>;
   @Input() nzClearIcon: TemplateRef<void>;
   @Input() nzRemoveIcon: TemplateRef<void>;