chore(chips): update API per #6677

src/demo-app/chips/chips-demo.html

@@ -25,7 +25,7 @@ <h4>Advanced</h4>
         <md-chip color="accent" selected="true">Selected/Colored</md-chip>
 
         <md-chip color="warn" selected="true" *ngIf="visible"
-                 (destroy)="displayMessage('chip destroyed')" (remove)="toggleVisible()">
+                 (destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
           With Events
           <md-icon mdChipRemove>cancel</md-icon>
         </md-chip>
@@ -49,7 +49,7 @@ <h4>Form Field</h4>
       <md-form-field>
         <md-chip-list mdPrefix #chipList1>
           <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
-                   [removable]="removable" (remove)="remove(person)">
+                   [removable]="removable" (removed)="remove(person)">
             {{person.name}}
             <md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
           </md-chip>
@@ -70,7 +70,7 @@ <h4>Form Field</h4>
 
       <md-chip-list #chipList2>
         <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
-                 [removable]="removable" (remove)="remove(person)">
+                 [removable]="removable" (removed)="remove(person)">
           {{person.name}}
           <md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
         </md-chip>

src/lib/chips/chip.spec.ts

@@ -2,7 +2,7 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component, DebugElement}  from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {createKeyboardEvent} from '@angular/cdk/testing';
-import {MdChipList, MdChip, MdChipEvent, MdChipsModule} from './index';
+import {MdChipList, MdChip, MdChipEvent, MdChipSelectionEvent, MdChipsModule} from './index';
 import {SPACE, DELETE, BACKSPACE} from '@angular/material/core';
 import {Directionality} from '@angular/material/core';
 
@@ -120,7 +120,7 @@ describe('Chips', () => {
         fixture.detectChanges();
 
         expect(chipNativeElement.classList).toContain('mat-chip-selected');
-        expect(testComponent.chipSelect).toHaveBeenCalledWith({chip: chipInstance});
+        expect(testComponent.chipSelect).toHaveBeenCalledWith({chip: chipInstance, selected: true});
       });
 
       it('allows removal', () => {
@@ -143,26 +143,25 @@ describe('Chips', () => {
 
         it('should selects/deselects the currently focused chip on SPACE', () => {
           const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE) as KeyboardEvent;
-          const CHIP_EVENT: MdChipEvent = {chip: chipInstance};
+          const CHIP_SELECT_EVENT: MdChipSelectionEvent = {chip: chipInstance, selected: true};
+          const CHIP_DESELECT_EVENT: MdChipSelectionEvent = {chip: chipInstance, selected: false};
 
           spyOn(testComponent, 'chipSelect');
-          spyOn(testComponent, 'chipDeselect');
 
           // Use the spacebar to select the chip
           chipInstance._handleKeydown(SPACE_EVENT);
           fixture.detectChanges();
 
           expect(chipInstance.selected).toBeTruthy();
-          expect(testComponent.chipSelect).toHaveBeenCalledTimes(1);
-          expect(testComponent.chipSelect).toHaveBeenCalledWith(CHIP_EVENT);
+          expect(testComponent.chipSelect).toHaveBeenCalledWith(CHIP_SELECT_EVENT);
 
           // Use the spacebar to deselect the chip
           chipInstance._handleKeydown(SPACE_EVENT);
           fixture.detectChanges();
 
           expect(chipInstance.selected).toBeFalsy();
-          expect(testComponent.chipDeselect).toHaveBeenCalledTimes(1);
-          expect(testComponent.chipDeselect).toHaveBeenCalledWith(CHIP_EVENT);
+          expect(testComponent.chipSelect).toHaveBeenCalledWith(CHIP_DESELECT_EVENT);
+          expect(testComponent.chipSelect).toHaveBeenCalledTimes(2);
         });
 
         it('should have correct aria-selected', () => {
@@ -280,9 +279,9 @@ describe('Chips', () => {
       <div *ngIf="shouldShow">
         <md-chip [selectable]="selectable" [removable]="removable"
                  [color]="color" [selected]="selected" [disabled]="disabled"
-                 (focus)="chipFocus($event)" (destroy)="chipDestroy($event)"
-                 (select)="chipSelect($event)" (deselect)="chipDeselect($event)"
-                 (remove)="chipRemove($event)">
+                 (focus)="chipFocus($event)" (destroyed)="chipDestroy($event)"
+                 (selectionChange)="chipSelect($event)"
+                 (removed)="chipRemove($event)">
           {{name}}
         </md-chip>
       </div>
@@ -300,7 +299,6 @@ class SingleChip {
   chipFocus: (event?: MdChipEvent) => void = () => {};
   chipDestroy: (event?: MdChipEvent) => void = () => {};
   chipSelect: (event?: MdChipEvent) => void = () => {};
-  chipDeselect: (event?: MdChipEvent) => void = () => {};
   chipRemove: (event?: MdChipEvent) => void = () => {};
 }
 

src/lib/chips/chip.ts

@@ -34,6 +34,11 @@ export interface MdChipEvent {
   chip: MdChip;
 }
 
+export interface MdChipSelectionEvent {
+    chip: MdChip;
+    selected: boolean;
+}
+
 // Boilerplate for applying mixins to MdChip.
 /** @docs-private */
 export class MdChipBase {
@@ -83,7 +88,12 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
   @Input() get selected(): boolean { return this._selected; }
   set selected(value: boolean) {
     this._selected = coerceBooleanProperty(value);
-    (this.selected ? this.select : this.deselect).emit({chip: this});
+    if (this.selected) {
+      this.select.emit({chip: this});
+    } else {
+      this.deselect.emit({chip: this});
+    }
+    this.selectionChange.emit({chip: this, selected: this.selected});
   }
   protected _selected: boolean = false;
 
@@ -118,15 +128,39 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
   /** Emits when the chip is focused. */
   _onFocus = new Subject<MdChipEvent>();
 
-  /** Emitted when the chip is selected. */
+  /**
+   * Emitted when the chip is selected.
+   * @deprecated Use `selectionChange` instead.
+   */
   @Output() select = new EventEmitter<MdChipEvent>();
 
-  /** Emitted when the chip is deselected. */
+  /** Emitted when the chip is selected. */
+  @Output() selectionChange = new EventEmitter<MdChipSelectionEvent>();
+
+  /**
+   * Emitted when the chip is deselected.
+   * @deprecated Use `selectionChange` instead.
+   */
   @Output() deselect = new EventEmitter<MdChipEvent>();
 
-  /** Emitted when the chip is destroyed. */
+  /**
+   * Emitted when the chip is destroyed.
+   * @deprecated Use `destroyed` instead.
+   */
   @Output() destroy = new EventEmitter<MdChipEvent>();
 
+  /** Emitted when the chip is destroyed. */
+  @Output() destroyed = new EventEmitter<MdChipEvent>();
+
+  /**
+   * Emitted when a chip is to be removed.
+   * @deprecated Use `removed` instead.
+   */
+  @Output('remove') onRemove = new EventEmitter<MdChipEvent>();
+
+  /** Emitted when a chip is to be removed. */
+  @Output() removed = new EventEmitter<MdChipEvent>();
+
   get ariaSelected(): string | null {
     return this.selectable ? this.selected.toString() : null;
   }
@@ -135,11 +169,9 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
     super(renderer, elementRef);
   }
 
-  /** Emitted when a chip is to be removed. */
-  @Output('remove') onRemove = new EventEmitter<MdChipEvent>();
-
   ngOnDestroy(): void {
     this.destroy.emit({chip: this});
+    this.destroyed.emit({chip: this});
   }
 
   /** Toggles the current selected state of this chip. */
@@ -162,12 +194,13 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
    */
   remove(): void {
     if (this.removable) {
+      this.removed.emit({chip: this});
       this.onRemove.emit({chip: this});
     }
   }
 
   /** Ensures events fire properly upon click. */
-  _handleClick(event: Event) {
+  _handleClick(event: Event): void {
     // Check disabled
     if (this.disabled) {
       return;
@@ -180,7 +213,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
   }
 
   /** Handle custom key presses. */
-  _handleKeydown(event: KeyboardEvent) {
+  _handleKeydown(event: KeyboardEvent): void {
     if (this.disabled) {
       return;
     }
@@ -231,7 +264,7 @@ export class MdChipRemove {
   constructor(protected _parentChip: MdChip) {}
 
   /** Calls the parent chip's public `remove()` method if applicable. */
-  _handleClick() {
+  _handleClick(): void {
     if (this._parentChip.removable) {
       this._parentChip.remove();
     }