diff --git a/src/demo-app/select/select-demo.html b/src/demo-app/select/select-demo.html index f1e903f4824b..375d066f673b 100644 --- a/src/demo-app/select/select-demo.html +++ b/src/demo-app/select/select-demo.html @@ -18,7 +18,7 @@ + [floatingPlaceholder]="floatingPlaceholder" #drinkControl="ngModel"> {{ drink.viewValue }} @@ -30,6 +30,7 @@ + diff --git a/src/demo-app/select/select-demo.ts b/src/demo-app/select/select-demo.ts index 4196edbc633d..cc5f0dbf38c6 100644 --- a/src/demo-app/select/select-demo.ts +++ b/src/demo-app/select/select-demo.ts @@ -14,6 +14,7 @@ export class SelectDemo { showSelect = false; currentDrink: string; latestChangeEvent: MdSelectChange; + floatingPlaceholder = true; foodControl = new FormControl('pizza-1'); foods = [ diff --git a/src/lib/select/select.html b/src/lib/select/select.html index 61e55e51a4e9..109db2119673 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 5f57794bdd80..3b16084c42b5 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -26,7 +26,8 @@ describe('MdSelect', () => { SelectInitWithoutOptions, SelectWithChangeEvent, CustomSelectAccessor, - CompWithCustomSelect + CompWithCustomSelect, + FloatingPlaceholderSelect ], providers: [ {provide: OverlayContainer, useFactory: () => { @@ -1221,6 +1222,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'); + }); + }); describe('change event', () => { @@ -1433,6 +1448,29 @@ class CompWithCustomSelect { @ViewChild(CustomSelectAccessor) customAccessor: CustomSelectAccessor; } +@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; +} + /** * TODO: Move this to core testing utility until Angular has event faking diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 92b7d2efb366..d0c737da8eb0 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -222,6 +222,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: EventEmitter = new EventEmitter();