diff --git a/src/demo-app/select/select-demo.html b/src/demo-app/select/select-demo.html index aae5985aae20..918879af6db0 100644 --- a/src/demo-app/select/select-demo.html +++ b/src/demo-app/select/select-demo.html @@ -19,7 +19,7 @@ + [floatingPlaceholder]="floatingPlaceholder" #drinkControl="ngModel"> {{ drink.viewValue }} @@ -31,6 +31,7 @@ + diff --git a/src/demo-app/select/select-demo.ts b/src/demo-app/select/select-demo.ts index ee2c542537c2..818304bfb5f8 100644 --- a/src/demo-app/select/select-demo.ts +++ b/src/demo-app/select/select-demo.ts @@ -12,6 +12,7 @@ export class SelectDemo { isDisabled = false; showSelect = false; currentDrink: string; + floatingPlaceholder = true; foodControl = new FormControl('pizza-1'); foods = [ diff --git a/src/lib/select/select.html b/src/lib/select/select.html index 8c64b1567c5d..7ad0b8fbaa6d 100644 --- a/src/lib/select/select.html +++ b/src/lib/select/select.html @@ -1,6 +1,11 @@
- {{ placeholder }} + {{ placeholder }} + {{ selected?.viewValue }}
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index c2e3e6a12d53..8a8fe2d6bd5a 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -16,7 +16,13 @@ describe('MdSelect', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [MdSelectModule.forRoot(), ReactiveFormsModule, FormsModule], - declarations: [BasicSelect, NgModelSelect, ManySelects, NgIfSelect], + declarations: [ + BasicSelect, + NgModelSelect, + ManySelects, + NgIfSelect, + FloatingPlaceholderSelect + ], providers: [ {provide: OverlayContainer, useFactory: () => { overlayContainerElement = document.createElement('div') as HTMLElement; @@ -1139,6 +1145,20 @@ describe('MdSelect', () => { }); })); + it('should be able to disable the floating placeholder', () => { + let fixture = TestBed.createComponent(FloatingPlaceholderSelect); + let placeholder = fixture.debugElement.query(By.css('.md-select-placeholder')).nativeElement; + + fixture.detectChanges(); + + expect(placeholder.style.visibility).toBe('visible'); + + fixture.componentInstance.control.setValue('pizza-1'); + fixture.detectChanges(); + + expect(placeholder.style.visibility).toBe('hidden'); + }); + }); }); @@ -1235,6 +1255,29 @@ class NgIfSelect { @ViewChild(MdSelect) select: MdSelect; } +@Component({ + selector: 'floating-placeholder-select', + template: ` + + + {{ food.viewValue }} + + + `, + +}) +class FloatingPlaceholderSelect { + floatingPlaceholder: boolean = false; + foods: any[] = [ + { value: 'steak-0', viewValue: 'Steak' }, + { value: 'pizza-1', viewValue: 'Pizza' }, + { value: 'tacos-2', viewValue: 'Tacos'} + ]; + control = new FormControl(); + + @ViewChild(MdSelect) select: MdSelect; +} /** diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 8f408c1f15fa..66b8865bbce9 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -213,6 +213,12 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr get required() { return this._required; } set required(value: any) { this._required = coerceBooleanProperty(value); } + /** Whether to float the placeholder text. */ + @Input() + get floatingPlaceholder(): boolean { return this._floatingPlaceholder; } + set floatingPlaceholder(value) { this._floatingPlaceholder = coerceBooleanProperty(value); } + private _floatingPlaceholder: boolean = true; + /** Event emitted when the select has been opened. */ @Output() onOpen = new EventEmitter();