feat(select): custom text for multiple selected values

add input property to set a callback which will display a custom text if multiple values are selected. Similar to MdAutocomplete.displayWith.

fixes #6218

Author: davidreher

src/lib/select/select.spec.ts

@@ -2435,6 +2435,42 @@ describe('MdSelect', () => {
       expect(trigger.textContent).toContain('Tacos, Pizza, Steak');
     });
 
+    it('should display a custom text if multipleDisplayWith is set', () => {
+      testInstance.select.multipleDisplayWith = (values: string[]): string => {
+        return `${values.length} selected`;
+      };
+      trigger.click();
+      fixture.detectChanges();
+
+      const options = overlayContainerElement.querySelectorAll('md-option') as
+          NodeListOf<HTMLElement>;
+
+      options[0].click();
+      options[2].click();
+      options[5].click();
+      fixture.detectChanges();
+
+      expect(trigger.textContent).toContain('3 selected');
+    });
+
+    it('should only affect the text if multipleDisplayWith is set', () => {
+      testInstance.select.multipleDisplayWith = (values: string[]): string => {
+        return `${values.length} selected`;
+      };
+      trigger.click();
+      fixture.detectChanges();
+
+      const options = overlayContainerElement.querySelectorAll('md-option') as
+          NodeListOf<HTMLElement>;
+
+      options[0].click();
+      options[2].click();
+      options[5].click();
+      fixture.detectChanges();
+
+      expect(testInstance.control.value).toEqual(['steak-0', 'tacos-2', 'eggs-5']);
+    });
+
     it('should throw an exception when trying to set a non-array value', async(() => {
       expect(() => {
         testInstance.control.setValue('not-an-array');

src/lib/select/select.ts

@@ -318,6 +318,9 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
     this._multiple = coerceBooleanProperty(value);
   }
 
+  /** Function that maps the selected values to (a single) display value in the trigger. */
+  @Input() multipleDisplayWith: ((viewValues: any[]) => string) | null = null;
+
   /** Whether to float the placeholder text. */
   @Input()
   get floatPlaceholder(): FloatPlaceholderType { return this._floatPlaceholder; }
@@ -531,6 +534,10 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
     if (this._multiple) {
       let selectedOptions = this._selectionModel.selected.map(option => option.viewValue);
 
+      if (this.multipleDisplayWith) {
+        return this.multipleDisplayWith(selectedOptions);
+      }
+
       if (this._isRtl()) {
         selectedOptions.reverse();
       }