feat(select): allow setting viewValue to override text content

Author: kara

src/lib/core/option/option.ts

@@ -56,6 +56,8 @@ export class MdOption {
 
   private _id: string = `md-option-${_uniqueIdCounter++}`;
 
+  private _viewValue: string;
+
   /** The unique ID of the option. */
   get id() { return this._id; }
 
@@ -89,11 +91,16 @@ export class MdOption {
 
   /**
    * The displayed value of the option. It is necessary to show the selected option in the
-   * select's trigger.
+   * select's trigger. If not set explicitly, it defaults to the text content of the option
+   * element.
    */
+  @Input()
   get viewValue(): string {
-    // TODO(kara): Add input property alternative for node envs.
-    return this._getHostElement().textContent.trim();
+    return this._viewValue || this._getHostElement().textContent.trim();
+  }
+
+  set viewValue(value: string) {
+    this._viewValue = value;
   }
 
   /** Selects the option. */

src/lib/select/select.spec.ts

@@ -26,7 +26,8 @@ describe('MdSelect', () => {
         SelectInitWithoutOptions,
         SelectWithChangeEvent,
         CustomSelectAccessor,
-        CompWithCustomSelect
+        CompWithCustomSelect,
+        ViewValueSelect
       ],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
@@ -543,20 +544,6 @@ describe('MdSelect', () => {
 
   });
 
-  describe('misc forms', () => {
-    it('should support use inside a custom value accessor', () => {
-      const fixture = TestBed.createComponent(CompWithCustomSelect);
-      spyOn(fixture.componentInstance.customAccessor, 'writeValue');
-      fixture.detectChanges();
-
-      expect(fixture.componentInstance.customAccessor.select._control)
-          .toBe(null, 'Expected md-select NOT to inherit control from parent value accessor.');
-      expect(fixture.componentInstance.customAccessor.writeValue).toHaveBeenCalled();
-    });
-
-  });
-
-
   describe('animations', () => {
     let fixture: ComponentFixture<BasicSelect>;
     let trigger: HTMLElement;
@@ -1254,7 +1241,38 @@ describe('MdSelect', () => {
 
       expect(fixture.componentInstance.changeListener).toHaveBeenCalledTimes(1);
     });
+
+  });
+
+  describe('misc', () => {
+    it('should support use inside a custom value accessor', () => {
+      const fixture = TestBed.createComponent(CompWithCustomSelect);
+      spyOn(fixture.componentInstance.customAccessor, 'writeValue');
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.customAccessor.select._control)
+          .toBe(null, 'Expected md-select NOT to inherit control from parent value accessor.');
+      expect(fixture.componentInstance.customAccessor.writeValue).toHaveBeenCalled();
+    });
+
+    it('should display the viewValue in the trigger instead of textContent if it is set', () => {
+      const fixture = TestBed.createComponent(ViewValueSelect);
+      fixture.detectChanges();
+
+      const trigger = fixture.debugElement.query(By.css('.md-select-trigger')).nativeElement;
+      trigger.click();
+      fixture.detectChanges();
+
+      const option = overlayContainerElement.querySelector('md-option') as HTMLElement;
+      option.click();
+      fixture.detectChanges();
+
+      expect(trigger.textContent).toContain('Steak', 'Expected trigger to contain viewValue.');
+      expect(trigger.textContent).not.toContain('0', 'Expected trigger to contain viewValue.');
+    });
+
   });
+
 });
 
 @Component({
@@ -1289,6 +1307,25 @@ class BasicSelect {
   @ViewChildren(MdOption) options: QueryList<MdOption>;
 }
 
+@Component({
+  selector: 'view-value-select',
+  template: `
+    <md-select placeholder="Food">
+      <md-option *ngFor="let food of foods" [value]="food.value" [viewValue]="food.name">
+        {{ food.id }}: {{food.name}}
+      </md-option>
+    </md-select>
+  `
+})
+class ViewValueSelect {
+  foods: any[] = [
+    { value: 'steak-0', name: 'Steak' , id: 0},
+    { value: 'pizza-1', name: 'Pizza' , id: 1},
+    { value: 'tacos-2', name: 'Tacos', id: 2},
+  ];
+}
+
+
 @Component({
   selector: 'ng-model-select',
   template: `