diff --git a/components/select/demo/custom-template.md b/components/select/demo/custom-template.md
new file mode 100644
index 00000000000..19f0fc79b58
--- /dev/null
+++ b/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`.
+
diff --git a/components/select/demo/custom-template.ts b/components/select/demo/custom-template.ts
new file mode 100644
index 00000000000..4964039a0d0
--- /dev/null
+++ b/components/select/demo/custom-template.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-select-custom-template',
+ template: `
+
+ Windows
+ Mac
+ Android
+
+
+ Label: {{ selected.nzLabel }} Value: {{ selected.nzValue }}
+
+ `
+})
+export class NzDemoSelectCustomTemplateComponent {
+ selectedOS = null;
+}
diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md
index 13a3c071e15..fee1b7d4d60 100644
--- a/components/select/doc/index.en-US.md
+++ b/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` |
diff --git a/components/select/doc/index.zh-CN.md b/components/select/doc/index.zh-CN.md
index dd9524cb5cc..a5ba20c5973 100644
--- a/components/select/doc/index.zh-CN.md
+++ b/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` |
diff --git a/components/select/nz-select-top-control.component.html b/components/select/nz-select-top-control.component.html
index cf7670dcea8..913813c68a6 100644
--- a/components/select/nz-select-top-control.component.html
+++ b/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 }}
+
+ {{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }}
+
-
+
-
-
{{ option.nzLabel }}
+
+ {{ option.nzLabel }}
+
;
@Input() nzSuffixIcon: TemplateRef;
@Input() nzClearIcon: TemplateRef;
@Input() nzRemoveIcon: TemplateRef;
diff --git a/components/select/nz-select.component.html b/components/select/nz-select.component.html
index d0faae40c0b..e7c0bfc5ab6 100644
--- a/components/select/nz-select.component.html
+++ b/components/select/nz-select.component.html
@@ -10,6 +10,7 @@
[nzMaxTagCount]="nzMaxTagCount"
[nzShowArrow]="nzShowArrow"
[nzLoading]="nzLoading"
+ [nzCustomTemplate]="nzCustomTemplate"
[nzSuffixIcon]="nzSuffixIcon"
[nzClearIcon]="nzClearIcon"
[nzRemoveIcon]="nzRemoveIcon"
diff --git a/components/select/nz-select.component.spec.ts b/components/select/nz-select.component.spec.ts
index 2bd536b8efa..9aa239133ea 100644
--- a/components/select/nz-select.component.spec.ts
+++ b/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,6 +425,7 @@ describe('nz-select component', () => {
[nzDropdownMatchSelectWidth]="dropdownMatchSelectWidth"
[nzDropdownStyle]="dropdownStyle"
[nzDropdownClassName]="'test-class'"
+ [nzCustomTemplate]="custom"
(nzOnSearch)="onSearch($event)"
[nzPlaceHolder]="placeholder"
>
@@ -413,6 +433,10 @@ describe('nz-select component', () => {
+
+ Label: {{ selected.nzLabel }}
+ Value: {{ selected.nzValue }}
+
`
})
export class NzTestSelectDefaultComponent {
@@ -442,11 +466,15 @@ export class NzTestSelectDefaultComponent {
@Component({
template: `
-
+
Disabled
+
+ Label: {{ selected.nzLabel }}
+ Value: {{ selected.nzValue }}
+
`
})
export class NzTestSelectTagsComponent {
diff --git a/components/select/nz-select.component.ts b/components/select/nz-select.component.ts
index 3fb4d9b16f6..3554b5a988a 100644
--- a/components/select/nz-select.component.ts
+++ b/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;
+ @Input() nzCustomTemplate: TemplateRef<{ $implicit: NzOptionComponent }>;
@Input() nzSuffixIcon: TemplateRef;
@Input() nzClearIcon: TemplateRef;
@Input() nzRemoveIcon: TemplateRef;