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