feat(module:select): support placeholder for basic select (#703)

close #413
NG-ZORRO · Dec 8, 2017 · a842cdd · a842cdd
1 parent 3d4213f
commit a842cdd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/components/select/nz-select.component.ts b/src/components/select/nz-select.component.ts
@@ -54,6 +54,11 @@ import { NzOptionPipe } from './nz-option.pipe';
       (keydown.ArrowUp)="handleKeyUpEvent($event)"
       (keydown.ArrowDown)="handleKeyDownEvent($event)">
       <div class="ant-select-selection__rendered" *ngIf="!nzShowSearch">
+        <div class="ant-select-selection__placeholder">
+          <ng-template [ngIf]="!_selectedOption">
+            {{ nzPlaceHolder }}
+          </ng-template>
+        </div>
         <div class="ant-select-selection-selected-value">
           {{ _selectedOption?.nzLabel }}
         </div>
@@ -173,7 +178,7 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent
   _selectionPrefixCls = `${this._prefixCls}-selection`;
   _size: string;
   _value: string[] | string;
-  _placeholder = 'Placeholder';
+  _placeholder = 'placeholder';
   _notFoundContent = this._locale.translate('Select.notFoundContent');
   _searchText = '';
   _triggerWidth = 0;

diff --git a/src/showcase/nz-demo-select/nz-demo-select-basic.component.ts b/src/showcase/nz-demo-select/nz-demo-select-basic.component.ts
@@ -3,15 +3,15 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'nz-demo-select-basic',
   template: `
-    <nz-select style="width: 120px;" [(ngModel)]="selectedOption" nzAllowClear>
+    <nz-select style="width: 120px;" [(ngModel)]="selectedOption" [nzPlaceHolder]="'choose option'" nzAllowClear>
       <nz-option
         *ngFor="let option of options"
         [nzLabel]="option.label"
         [nzValue]="option"
         [nzDisabled]="option.disabled">
       </nz-option>
     </nz-select>
-    <nz-select style="width: 120px;" [(ngModel)]="selectedOption" nzDisabled>
+    <nz-select style="width: 120px;" [(ngModel)]="selectedOption" [nzPlaceHolder]="'choose option'" nzDisabled>
       <nz-option
         *ngFor="let option of options"
         [nzLabel]="option.label"