-
Notifications
You must be signed in to change notification settings - Fork 3.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(module:select): support custom template in select component #3071
Changes from 11 commits
8ac3982
9912caa
9eba5d7
9aa0512
7810dc7
c72b217
27ac7bf
854bce2
797c683
17237fd
a9889d2
4359d80
761c176
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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`. | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -36,7 +36,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]': 'nzSelectService.isSingleMode', | ||
'[class.ant-select-selection--multiple]': 'nzSelectService.isMultipleOrTags', | ||
'[style.cursor]': 'nzShowSearch ? "inherit" : "pointer"' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. any reason add this line? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hmm.. I can't recall it's been too long... let me try. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I couldn't replicate the issue I ran into... it might be fixed by other updates, so I just removed it. |
||
} | ||
}) | ||
export class NzSelectTopControlComponent implements OnInit, OnDestroy { | ||
inputValue: string; | ||
|
@@ -50,6 +55,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>; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
there is no need to add any className here
https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/select/nz-select.component.html#L18
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah this is because I moved these into the component's host https://github.com/NG-ZORRO/ng-zorro-antd/pull/3071/files#diff-290abbcec228b4006c68b790f2878cf5L18
I can change it back in order to be consistent.