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

andrew-yangy · 2019-03-11T11:22:08Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: #2946

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

andrew-yangy · 2019-03-11T11:33:19Z

I also tried to add a nzSameContentInSelect property for nz-option so that the customContent template can be used for select component directly, like this

<ng-container *ngIf="nzSelectService.listOfCachedSelectedOption[0]?.nzSameContentInSelect; else customTemplate">
        <ng-template [ngTemplateOutlet]="nzSelectService.listOfCachedSelectedOption[0]?.template"></ng-template>
      </ng-container>
      <ng-template #customTemplate>
        <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>
      </ng-template>

However, <ng-template [ngTemplateOutlet]="nzSelectService.listOfCachedSelectedOption[0]?.template"></ng-template> </ng-container> this part will be cleared and rerendered every time click the select section, I guess this is something to do with this issue angular/angular#20810

codecov · 2019-03-11T11:38:44Z

Codecov Report

Merging #3071 into master will increase coverage by 0.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #3071      +/-   ##
==========================================
+ Coverage   95.45%   95.47%   +0.01%     
==========================================
  Files         685      685              
  Lines       14042    14077      +35     
  Branches     1865     1874       +9     
==========================================
+ Hits        13404    13440      +36     
+ Misses        231      226       -5     
- Partials      407      411       +4

Impacted Files	Coverage Δ
...mponents/select/nz-select-top-control.component.ts	`100% <100%> (ø)`	⬆️
components/select/nz-select.component.ts	`96.95% <100%> (+0.03%)`	⬆️
components/select/nz-option-container.component.ts	`95.34% <0%> (-2.33%)`	⬇️
components/carousel/nz-carousel-definitions.ts	`100% <0%> (ø)`	⬆️
components/i18n/languages/date-picker/sk_SK.ts	`100% <0%> (ø)`	⬆️
components/i18n/languages/date-picker/et_EE.ts	`100% <0%> (ø)`	⬆️
components/core/tree/nz-tree-base.service.ts	`94.66% <0%> (ø)`	⬆️
components/carousel/nz-carousel.component.ts	`93.71% <0%> (ø)`	⬆️
...mponents/input-number/nz-input-number.component.ts	`97.6% <0%> (+0.01%)`	⬆️
... and 4 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3c82f26...761c176. Read the comment docs.

netlify · 2019-03-11T12:03:20Z

Deploy preview for ng-zorro-master ready!

Built with commit 761c176

https://deploy-preview-3071--ng-zorro-master.netlify.com

vthinkxie

Hi @ddvkid
thanks a lot for your pr
plz make sure your pr meet the commit guideline https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit

andrew-yangy · 2019-03-12T02:39:02Z

Hi @ddvkid
thanks a lot for your pr
plz make sure your pr meet the commit guideline https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit

Thanks for your comments, can you be more specific what I need to change? how about merging all the commits into one with more meaningful message?

vthinkxie · 2019-03-12T02:40:44Z

https://github.com/NG-ZORRO/ng-zorro-antd/pulls?utf8=%E2%9C%93&q=is%3Apr+is%3Amerged
you can see the vaild commit format

andrew-yangy · 2019-03-12T04:32:37Z

@vthinkxie any idea why the checks failed, and is the new commit format okay?

andrew-yangy · 2019-03-23T08:42:39Z

@vthinkxie is this still going to be reviewed?

vthinkxie · 2019-03-28T02:07:30Z

@ddvkid commit message is ok, plz check your test and rebase onto the latest master

wzhudev · 2019-03-28T03:37:23Z

@ddvkid Hello! Please rebase to the master branch.

andrew-yangy · 2019-03-29T03:01:08Z

@vthinkxie @wendzhue the tests have been fixed, can you please have a review?

andrew-yangy · 2019-04-16T00:37:55Z

@vthinkxie updates?

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

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

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

andrew-yangy · 2019-05-08T11:56:40Z

@vthinkxie ?

vthinkxie · 2019-06-22T09:39:50Z

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

-  templateUrl: './nz-select-top-control.component.html'
+  templateUrl: './nz-select-top-control.component.html',
+  host: {
+    '[class.ant-select-selection--single]': 'nzSelectService.isSingleMode',


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

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.

vthinkxie

https://github.com/NG-ZORRO/ng-zorro-antd/pull/3071/files#diff-df1d27763e040098623dc15b1f22c3f8R40
no need to add any className or style here

vthinkxie · 2019-06-22T10:34:02Z

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

-  templateUrl: './nz-select-top-control.component.html'
+  templateUrl: './nz-select-top-control.component.html',
+  host: {
+    '[style.cursor]': 'nzShowSearch ? "inherit" : "pointer"'


any reason add this line?

Hmm.. I can't recall it's been too long... let me try.

I couldn't replicate the issue I ran into... it might be fixed by other updates, so I just removed it.

vthinkxie

Everything looks great now, approved
Thanks a lot for your contribution!

…ZORRO#3071) close NG-ZORRO#2946

wzhudev requested a review from vthinkxie March 12, 2019 01:38

vthinkxie requested changes Mar 12, 2019

View reviewed changes

andrew-yangy changed the title ~~Feature/custom template select~~ feat(module:select): support custom template in select componet Mar 12, 2019

andrew-yangy changed the title ~~feat(module:select): support custom template in select componet~~ feat(module:select): support custom template in select component Mar 12, 2019

andrew-yangy force-pushed the feature/custom-template-select branch 2 times, most recently from c1a1f06 to c5f53d5 Compare March 12, 2019 04:13

vthinkxie self-requested a review March 12, 2019 06:41

andrew-yangy force-pushed the feature/custom-template-select branch 2 times, most recently from 541b371 to 6f583b1 Compare March 28, 2019 03:28

andrew-yangy force-pushed the feature/custom-template-select branch 2 times, most recently from f90d912 to a0241fa Compare March 28, 2019 06:11

weekly-digest bot mentioned this pull request Apr 1, 2019

Weekly Digest (25 March, 2019 - 1 April, 2019) #3196

Closed

wzhudev added the PR::eyes: Need Review label Apr 16, 2019

vthinkxie reviewed Apr 16, 2019

View reviewed changes

components/select/nz-select-top-control.component.ts Outdated Show resolved Hide resolved

vthinkxie reviewed Apr 16, 2019

View reviewed changes

components/select/nz-select-top-control.component.html Outdated Show resolved Hide resolved

vthinkxie reviewed Apr 16, 2019

View reviewed changes

components/select/nz-select-top-control.component.ts Outdated Show resolved Hide resolved

vthinkxie added PR::wave: Need Change and removed PR::eyes: Need Review labels Apr 18, 2019

andrew-yangy and others added 4 commits June 22, 2019 17:54

feat(module:select): fix templateRef type for customTemplate

7810dc7

feat(module:select): add support to multiple and tags

c72b217

fix(module:select): fix template

27ac7bf

feat(module:select): fix support for multiple and tag select.

854bce2

andrew-yangy force-pushed the feature/custom-template-select branch from 6e0171a to 854bce2 Compare June 22, 2019 09:05

andrew-yangy added 3 commits June 22, 2019 19:07

feat(module:select): fix doc

797c683

feat(module:select): simplify template

17237fd

feat(module:select): add tests for tags

a9889d2

vthinkxie reviewed Jun 22, 2019

View reviewed changes

vthinkxie added PR: reviewed-changes-requested and removed PR::wave: Need Change PR: unreviewed labels Jun 22, 2019

vthinkxie self-requested a review June 22, 2019 09:44

vthinkxie requested changes Jun 22, 2019

View reviewed changes

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels Jun 22, 2019

vthinkxie added PR: reviewed-changes-requested and removed PR: unreviewed labels Jun 22, 2019

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels Jun 22, 2019

feat(module:select): move class from host to template

4359d80

vthinkxie reviewed Jun 22, 2019

View reviewed changes

feat(module:select): remove unused style

761c176

vthinkxie approved these changes Jun 22, 2019

View reviewed changes

vthinkxie merged commit aad02a5 into NG-ZORRO:master Jun 22, 2019

pr-triage bot added PR: merged and removed PR: unreviewed labels Jun 22, 2019

weekly-digest bot mentioned this pull request Jun 23, 2019

Weekly Digest (16 June, 2019 - 23 June, 2019) #3630

Closed

Ricbet pushed a commit to Ricbet/ng-zorro-antd that referenced this pull request Apr 9, 2020

feat(module:select): support custom template in select component (NG-…

8f60af7

…ZORRO#3071) close NG-ZORRO#2946

hsuanxyz pushed a commit to hsuanxyz/ng-zorro-antd that referenced this pull request Aug 5, 2020

feat(module:select): support custom template in select component (NG-…

7a80350

…ZORRO#3071) close NG-ZORRO#2946

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

andrew-yangy commented Mar 11, 2019

andrew-yangy commented Mar 11, 2019

codecov bot commented Mar 11, 2019 •

edited

Loading

netlify bot commented Mar 11, 2019 •

edited

Loading

vthinkxie left a comment

andrew-yangy commented Mar 12, 2019

vthinkxie commented Mar 12, 2019

andrew-yangy commented Mar 12, 2019

andrew-yangy commented Mar 23, 2019

vthinkxie commented Mar 28, 2019

wzhudev commented Mar 28, 2019 •

edited

Loading

andrew-yangy commented Mar 29, 2019

andrew-yangy commented Apr 16, 2019

andrew-yangy commented May 8, 2019

vthinkxie Jun 22, 2019 •

edited

Loading

andrew-yangy Jun 22, 2019

vthinkxie left a comment

vthinkxie Jun 22, 2019

andrew-yangy Jun 22, 2019

andrew-yangy Jun 22, 2019

vthinkxie left a comment

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

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

Conversation

andrew-yangy commented Mar 11, 2019

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

andrew-yangy commented Mar 11, 2019

codecov bot commented Mar 11, 2019 • edited Loading

Codecov Report

netlify bot commented Mar 11, 2019 • edited Loading

vthinkxie left a comment

Choose a reason for hiding this comment

andrew-yangy commented Mar 12, 2019

vthinkxie commented Mar 12, 2019

andrew-yangy commented Mar 12, 2019

andrew-yangy commented Mar 23, 2019

vthinkxie commented Mar 28, 2019

wzhudev commented Mar 28, 2019 • edited Loading

andrew-yangy commented Mar 29, 2019

andrew-yangy commented Apr 16, 2019

andrew-yangy commented May 8, 2019

vthinkxie Jun 22, 2019 • edited Loading

Choose a reason for hiding this comment

andrew-yangy Jun 22, 2019

Choose a reason for hiding this comment

vthinkxie left a comment

Choose a reason for hiding this comment

vthinkxie Jun 22, 2019

Choose a reason for hiding this comment

andrew-yangy Jun 22, 2019

Choose a reason for hiding this comment

andrew-yangy Jun 22, 2019

Choose a reason for hiding this comment

vthinkxie left a comment

Choose a reason for hiding this comment

codecov bot commented Mar 11, 2019 •

edited

Loading

netlify bot commented Mar 11, 2019 •

edited

Loading

wzhudev commented Mar 28, 2019 •

edited

Loading

vthinkxie Jun 22, 2019 •

edited

Loading