feat(select): emit change event

Adds an event to `md-select` that is emitted when the selected option has changed.

Fixes #2248.

Author: crisbeto

src/demo-app/select/select-demo.html

@@ -3,7 +3,7 @@
 <div class="demo-select">
   <div *ngIf="showSelect">
     <md-card>
-      <md-select placeholder="Food i would like to eat" [formControl]="foodControl">
+      <md-select placeholder="Food i would like to eat" [formControl]="foodControl" (change)="changeListener($event)">
         <md-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }} </md-option>
       </md-select>
       <p> Value: {{ foodControl.value }} </p>
@@ -19,7 +19,7 @@
 
   <md-card>
     <md-select placeholder="Drink" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled"
-      #drinkControl="ngModel">
+      (change)="changeListener($event)" #drinkControl="ngModel">
       <md-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
         {{ drink.viewValue }}
       </md-option>

src/demo-app/select/select-demo.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
+import {MdSelectChange} from '@angular/material';
 
 @Component({
     moduleId: module.id,
@@ -36,4 +37,7 @@ export class SelectDemo {
     this.foodControl.enabled ? this.foodControl.disable() : this.foodControl.enable();
   }
 
+  changeListener(event: MdSelectChange) {
+    console.log(event);
+  };
 }

src/lib/select/select.spec.ts

@@ -237,6 +237,27 @@ describe('MdSelect', () => {
       expect(fixture.componentInstance.select.selected).not.toBeDefined();
     });
 
+
+    it('should emit an event when the selected option has changed', () => {
+      trigger.click();
+      fixture.detectChanges();
+
+      (overlayContainerElement.querySelector('md-option') as HTMLElement).click();
+
+      expect(fixture.componentInstance.changeListener).toHaveBeenCalled();
+    });
+
+    it('should not emit multiple change events for the same option', () => {
+      trigger.click();
+      fixture.detectChanges();
+
+      let option = overlayContainerElement.querySelector('md-option') as HTMLElement;
+
+      option.click();
+      option.click();
+
+      expect(fixture.componentInstance.changeListener).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('forms integration', () => {
@@ -1146,7 +1167,8 @@ describe('MdSelect', () => {
   selector: 'basic-select',
   template: `
     <div [style.height.px]="heightAbove"></div>
-    <md-select placeholder="Food" [formControl]="control" [required]="isRequired">
+    <md-select placeholder="Food" [formControl]="control" [required]="isRequired"
+      (change)="changeListener($event)">
       <md-option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
         {{ food.viewValue }}
       </md-option>
@@ -1169,6 +1191,7 @@ class BasicSelect {
   isRequired: boolean;
   heightAbove = 0;
   heightBelow = 0;
+  changeListener = jasmine.createSpy('MdSelect change listener');
 
   @ViewChild(MdSelect) select: MdSelect;
   @ViewChildren(MdOption) options: QueryList<MdOption>;

src/lib/select/select.ts

@@ -64,6 +64,11 @@ export const SELECT_PANEL_PADDING_Y = 16;
  */
 export const SELECT_PANEL_VIEWPORT_PADDING = 8;
 
+/** Change event object that is emitted when the select value has changed. */
+export class MdSelectChange {
+  constructor(public source: MdSelect, public value: any) { }
+}
+
 @Component({
   moduleId: module.id,
   selector: 'md-select, mat-select',
@@ -214,10 +219,13 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
   set required(value: any) { this._required = coerceBooleanProperty(value); }
 
   /** Event emitted when the select has been opened. */
-  @Output() onOpen = new EventEmitter();
+  @Output() onOpen: EventEmitter<void> = new EventEmitter<void>();
 
   /** Event emitted when the select has been closed. */
-  @Output() onClose = new EventEmitter();
+  @Output() onClose: EventEmitter<void> = new EventEmitter<void>();
+
+  /** Event emitted when the selected value has been changed by the user. */
+  @Output() change: EventEmitter<MdSelectChange> = new EventEmitter<MdSelectChange>();
 
   constructor(private _element: ElementRef, private _renderer: Renderer,
               private _viewportRuler: ViewportRuler, @Optional() private _dir: Dir,
@@ -429,8 +437,8 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
   private _listenToOptions(): void {
     this.options.forEach((option: MdOption) => {
       const sub = option.onSelect.subscribe((isUserInput: boolean) => {
-        if (isUserInput) {
-          this._onChange(option.value);
+        if (isUserInput && this._selected !== option) {
+          this._emitChangeEvent(option);
         }
         this._onSelect(option);
       });
@@ -444,6 +452,12 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
     this._subscriptions = [];
   }
 
+  /** Emits an event when the user selects an option. */
+  private _emitChangeEvent(option: MdOption): void {
+    this._onChange(option.value);
+    this.change.emit(new MdSelectChange(this, option.value));
+  }
+
   /** Records option IDs to pass to the aria-owns property. */
   private _setOptionIds() {
     this._optionIds = this.options.map(option => option.id).join(' ');