Skip to content
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

Select component dont support custom option #227

Closed
create-share opened this issue Sep 5, 2017 · 6 comments · Fixed by #689
Closed

Select component dont support custom option #227

create-share opened this issue Sep 5, 2017 · 6 comments · Fixed by #689
Assignees

Comments

@create-share
Copy link
Contributor

I'm submitting a...


[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

In the current implementation, the nz-option component does not render, so the content projection can not be added to the nz-option.

Expected behavior

Support custom option like this:

<nz-select [(ngModel)]="selectedOption" nzAllowClear>
  <nz-option *ngFor="let option of options" [nzValue]="option" [nzDisabled]="option.disabled">
    <!-- custom option here -->
    <icon class="an-icon"><icon>{{option.label}}
  </nz-option>
</nz-select>

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Angular version: X.Y.Z

ng-zorro-antd version: X.Y.Z

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

@wilsoncook
Copy link
Member

wilsoncook commented Sep 12, 2017

An easy implementation would be, let the nzLabel attribute to support html strings, of cause, if the html option being chosen, here needs to strip all html tags to be shown as selected. Such like: <nz-option [nzLabel]="'<b><i>test</i></b>'"></nz-option>

@create-share
Copy link
Contributor Author

@wilsoncook Hi. I think that immediately using nz-option(use the node projection for nz-option in nz-select) instead of now using a pipe to transform it as a object is a better way. After that users could customize their template that would be projected to the ng-content of nz-option component.

Such like follow fake code:

<!-- template of nzSelectComponent -->
<select>
  <ng-content></ng-content>
</select>
<!-- template of nzOptionComponent -->
<option>
  <ng-content></ng-content>
</option>

Template of user's component:

<nz-select>
  <nz-option *ngFor="..."> freestyle here </nz-option>
</nz-select>

@wilsoncook
Copy link
Member

@deart1mer Yes the way using content projection is standard and easy to use like this issue illustrated above. Since the code of nz-select that formerly archived business goals in a short time, it's complicated and quite a bit redundant with potential issues, the code maybe refactored in the near future, so, i'm thinking about an easy implementation as said.
(It is pleasure to have a PR in your spare time, if any) :-)

@create-share
Copy link
Contributor Author

@wilsoncook Got it. It is my pleasure if I could do any help. This project is really great.

@wilsoncook
Copy link
Member

@deart1mer Thank you sincerely for supporting!

@lock
Copy link

lock bot commented Feb 18, 2019

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

@lock lock bot locked as resolved and limited conversation to collaborators Feb 18, 2019
hsuanxyz pushed a commit to hsuanxyz/ng-zorro-antd that referenced this issue Aug 5, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants