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();