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

close NG-ZORRO#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,23 @@
+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>
+      <div>
+        Label: {{selected.nzLabel}}
+      </div>
+      <div>
+        Value: {{ selected.nzValue }}
+      </div>
+    </ng-template>
+  `
+})
+export class NzDemoSelectCustomTemplateComponent {
+  selectedOS;
+}

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

@@ -33,6 +33,7 @@ Select component to select value from options.
 | `[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<void>` | - |
 | `[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

@@ -34,6 +34,7 @@ title: Select
 | `[nzDropdownClassName]` | 下拉菜单的 className 属性 | `string` | - |
 | `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` |
 | `[nzDropdownStyle]` | 下拉菜单的 style 属性 | `object` | - |
+| `[nzCustomTemplate]` | 自定义选择框的Template内容 | `TemplateRef<void>` | - |
 | `[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,12 @@
       class="ant-select-selection-selected-value"
       [attr.title]="nzSelectService.listOfCachedSelectedOption[0]?.nzLabel"
       [ngStyle]="selectedValueStyle">
-      {{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }}
+      <ng-container *ngIf="nzCustomTemplate; else noTemplate">
+        <ng-template [ngTemplateOutlet]="nzCustomTemplate" [ngTemplateOutletContext]="{ $implicit: nzSelectService.listOfCachedSelectedOption[0] }"></ng-template>
+      </ng-container>
+      <ng-template #noTemplate>
+        {{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }}
+      </ng-template>
     </div>
     <!--show search-->
     <div *ngIf="nzShowSearch"

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

@@ -26,7 +26,12 @@ import { NzSelectService } from './nz-select.service';
   animations         : [ zoomMotion ],
   changeDetection    : ChangeDetectionStrategy.OnPush,
   encapsulation      : ViewEncapsulation.None,
-  templateUrl        : './nz-select-top-control.component.html'
+  templateUrl        : './nz-select-top-control.component.html',
+  host               : {
+    '[class.ant-select-selection--single]'         : '!nzCustomTemplate && nzSelectService.isSingleMode',
+    '[class.ant-select-selection--multiple]'       : 'nzCustomTemplate || nzSelectService.isMultipleOrTags',
+    '[style.cursor]'                               : 'nzShowSearch ? "inherit" : "pointer"'
+  }
 })
 export class NzSelectTopControlComponent implements OnInit, OnDestroy {
   inputValue: string;
@@ -40,6 +45,7 @@ export class NzSelectTopControlComponent implements OnInit, OnDestroy {
   @Input() nzAllowClear = false;
   @Input() nzShowArrow = true;
   @Input() nzLoading = false;
+  @Input() nzCustomTemplate: TemplateRef<void>;
   @Input() nzSuffixIcon: TemplateRef<void>;
   @Input() nzClearIcon: TemplateRef<void>;
   @Input() nzRemoveIcon: TemplateRef<void>;

components/select/nz-select.component.html

@@ -10,13 +10,12 @@
   [nzMaxTagCount]="nzMaxTagCount"
   [nzShowArrow]="nzShowArrow"
   [nzLoading]="nzLoading"
+  [nzCustomTemplate]="nzCustomTemplate"
   [nzSuffixIcon]="nzSuffixIcon"
   [nzClearIcon]="nzClearIcon"
   [nzRemoveIcon]="nzRemoveIcon"
   [nzShowSearch]="nzShowSearch"
   [nzTokenSeparators]="nzTokenSeparators"
-  [class.ant-select-selection--single]="nzSelectService.isSingleMode"
-  [class.ant-select-selection--multiple]="nzSelectService.isMultipleOrTags"
   (keydown)="onKeyDown($event)">
 </div>
 <ng-template

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

@@ -156,6 +156,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.textContent).toContain('Label: Jack  Value: jack');
+    });
     it('should click option close dropdown', () => {
       testComponent.showSearch = true;
       select.nativeElement.click();
@@ -378,12 +388,21 @@ 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 {

components/select/nz-select.component.ts

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