diff --git a/src/lib/select/index.ts b/src/lib/select/index.ts
index bf5f903905fb..83fcb32d6747 100644
--- a/src/lib/select/index.ts
+++ b/src/lib/select/index.ts
@@ -8,7 +8,7 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
-import {MdSelect, MD_SELECT_SCROLL_STRATEGY_PROVIDER} from './select';
+import {MdSelect, MdSelectTrigger, MD_SELECT_SCROLL_STRATEGY_PROVIDER} from './select';
import {MdCommonModule, OverlayModule, MdOptionModule} from '../core';
@@ -19,8 +19,8 @@ import {MdCommonModule, OverlayModule, MdOptionModule} from '../core';
MdOptionModule,
MdCommonModule,
],
- exports: [MdSelect, MdOptionModule, MdCommonModule],
- declarations: [MdSelect],
+ exports: [MdSelect, MdSelectTrigger, MdOptionModule, MdCommonModule],
+ declarations: [MdSelect, MdSelectTrigger],
providers: [MD_SELECT_SCROLL_STRATEGY_PROVIDER]
})
export class MdSelectModule {}
diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index 250d37f2079e..86a090bcca31 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -11,8 +11,12 @@
[@transformPlaceholder]="_getPlaceholderAnimationState()"
[style.opacity]="_getPlaceholderOpacity()"
[style.width.px]="_selectedValueWidth"> {{ placeholder }}
+
- {{ triggerValue }}
+
+ {{ triggerValue }}
+
+
diff --git a/src/lib/select/select.md b/src/lib/select/select.md
index 4e683475ebda..46f60b95a22f 100644
--- a/src/lib/select/select.md
+++ b/src/lib/select/select.md
@@ -72,6 +72,16 @@ Global default placeholder options can be specified by setting the `MD_PLACEHOLD
})
```
+### Customizing the trigger label
+If you want to display a custom trigger label inside a select, you can use the `md-select-trigger` element:
+
+```html
+
+ You have selected: {{ select.selected?.viewValue }}
+ {{ food.viewValue }}
+
+```
+
Here are the available global options:
| Name | Type | Values | Description |
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index b34f502d9f71..6f7e382e2a58 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -74,7 +74,8 @@ describe('MdSelect', () => {
BasicSelectWithoutForms,
BasicSelectWithoutFormsPreselected,
BasicSelectWithoutFormsMultiple,
- SelectInsideFormGroup
+ SelectInsideFormGroup,
+ SelectWithCustomTrigger
],
providers: [
{provide: OverlayContainer, useFactory: () => {
@@ -951,7 +952,6 @@ describe('MdSelect', () => {
});
-
describe('animations', () => {
let fixture: ComponentFixture;
let trigger: HTMLElement;
@@ -2529,6 +2529,21 @@ describe('MdSelect', () => {
expect(panel.classList).toContain('mat-warn');
});
+ it('should allow the user to customize the label', () => {
+ fixture.destroy();
+
+ const labelFixture = TestBed.createComponent(SelectWithCustomTrigger);
+ labelFixture.detectChanges();
+
+ labelFixture.componentInstance.control.setValue('pizza-1');
+ labelFixture.detectChanges();
+
+ const label = labelFixture.debugElement.query(By.css('.mat-select-value')).nativeElement;
+
+ expect(label.textContent).toContain('azziP',
+ 'Expected the displayed text to be "Pizza" in reverse.');
+ });
+
});
describe('reset values', () => {
@@ -3212,3 +3227,24 @@ class BasicSelectWithoutFormsMultiple {
@ViewChild(MdSelect) select: MdSelect;
}
+
+@Component({
+ selector: 'select-with-custom-trigger',
+ template: `
+
+
+ {{ select.selected?.viewValue.split('').reverse().join('') }}
+
+
+ {{ food.viewValue }}
+
+
+ `
+})
+class SelectWithCustomTrigger {
+ foods: any[] = [
+ { value: 'steak-0', viewValue: 'Steak' },
+ { value: 'pizza-1', viewValue: 'Pizza' },
+ ];
+ control = new FormControl();
+}
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 7a53b46b53c9..169e870f6934 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -9,6 +9,7 @@
import {
AfterContentInit,
Component,
+ ContentChild,
ContentChildren,
ElementRef,
EventEmitter,
@@ -27,6 +28,7 @@ import {
Inject,
ChangeDetectionStrategy,
InjectionToken,
+ Directive,
} from '@angular/core';
import {NgForm, FormGroupDirective} from '@angular/forms';
import {MdOption, MdOptionSelectionChange, MdOptgroup} from '../core/option/index';
@@ -147,6 +149,16 @@ export class MdSelectBase {
}
export const _MdSelectMixinBase = mixinColor(mixinDisabled(MdSelectBase), 'primary');
+
+/**
+ * Allows the user to customize the trigger that is displayed when the select has a value.
+ */
+@Directive({
+ selector: 'md-select-trigger, mat-select-trigger'
+})
+export class MdSelectTrigger {}
+
+
@Component({
moduleId: module.id,
selector: 'md-select, mat-select',
@@ -293,6 +305,9 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
/** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */
@Input() panelClass: string|string[]|Set|{[key: string]: any};
+ /** User-supplied override of the trigger element. */
+ @ContentChild(MdSelectTrigger) customTrigger: MdSelectTrigger;
+
/** Placeholder to be shown if no value has been selected. */
@Input()
get placeholder() { return this._placeholder; }