Rename to selectionChange. Add deprecated selectionChange event on option

Author: devversion

src/lib/list/selection-list.spec.ts

@@ -61,7 +61,7 @@ describe('MatSelectionList without forms', () => {
       });
     });
 
-    it('should not emit a change event if an option changed programmatically', () => {
+    it('should not emit a selectionChange event if an option changed programmatically', () => {
       spyOn(fixture.componentInstance, 'onValueChange');
 
       expect(fixture.componentInstance.onValueChange).toHaveBeenCalledTimes(0);
@@ -72,7 +72,7 @@ describe('MatSelectionList without forms', () => {
       expect(fixture.componentInstance.onValueChange).toHaveBeenCalledTimes(0);
     });
 
-    it('should not emit a change event if an option got clicked', () => {
+    it('should emit a selectionChange event if an option got clicked', () => {
       spyOn(fixture.componentInstance, 'onValueChange');
 
       expect(fixture.componentInstance.onValueChange).toHaveBeenCalledTimes(0);
@@ -83,6 +83,20 @@ describe('MatSelectionList without forms', () => {
       expect(fixture.componentInstance.onValueChange).toHaveBeenCalledTimes(1);
     });
 
+    it('should emit a deprecated selectionChange event on the list option that got clicked', () => {
+      const optionInstance = listOptions[2].componentInstance as MatListOption;
+      const selectionChangeSpy = jasmine.createSpy('selectionChange spy');
+
+      optionInstance.selectionChange.subscribe(selectionChangeSpy);
+
+      expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
+
+      dispatchFakeEvent(listOptions[2].nativeElement, 'click');
+      fixture.detectChanges();
+
+      expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
+    });
+
     it('should be able to dispatch one selected item', () => {
       let testListItem = listOptions[2].injector.get<MatListOption>(MatListOption);
       let selectList =
@@ -662,7 +676,7 @@ describe('MatSelectionList with forms', () => {
 
 
 @Component({template: `
-  <mat-selection-list id="selection-list-1" (change)="onValueChange($event)">
+  <mat-selection-list id="selection-list-1" (selectionChange)="onValueChange($event)">
     <mat-list-option checkboxPosition="before" disabled="true" value="inbox">
       Inbox (disabled selection-option)
     </mat-list-option>

src/lib/list/selection-list.ts

@@ -93,6 +93,7 @@ export class MatSelectionListChange {
 })
 export class MatListOption extends _MatListOptionMixinBase
     implements AfterContentInit, OnDestroy, OnInit, FocusableOption, CanDisableRipple {
+
   private _lineSetter: MatLineSetter;
   private _selected: boolean = false;
   private _disabled: boolean = false;
@@ -132,6 +133,13 @@ export class MatListOption extends _MatListOptionMixinBase
     }
   }
 
+  /**
+   * Emits a change event whenever the selected state of an option changes.
+   * @deprecated Use the `selectionChange` event on the `<mat-selection-list>` instead.
+   */
+  @Output() selectionChange: EventEmitter<MatSelectionListChange> =
+    new EventEmitter<MatSelectionListChange>();
+
   constructor(private _renderer: Renderer2,
               private _element: ElementRef,
               private _changeDetector: ChangeDetectorRef,
@@ -180,6 +188,9 @@ export class MatListOption extends _MatListOptionMixinBase
 
       // Emit a change event if the selected state of the option changed through user interaction.
       this.selectionList._emitChangeEvent(this);
+
+      // TODO: the `selectionChange` event on the option is deprecated. Remove that in the future.
+      this._emitDeprecatedChangeEvent();
     }
   }
 
@@ -214,6 +225,12 @@ export class MatListOption extends _MatListOptionMixinBase
 
     this._changeDetector.markForCheck();
   }
+
+  /** Emits a selectionChange event for this option. */
+  _emitDeprecatedChangeEvent() {
+    // TODO: the `selectionChange` event on the option is deprecated. Remove that in the future.
+    this.selectionChange.emit(new MatSelectionListChange(this.selectionList, this));
+  }
 }
 
 
@@ -250,7 +267,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
   @ContentChildren(MatListOption) options: QueryList<MatListOption>;
 
   /** Emits a change event whenever the selected state of an option changes. */
-  @Output() change: EventEmitter<MatSelectionListChange> =
+  @Output() selectionChange: EventEmitter<MatSelectionListChange> =
       new EventEmitter<MatSelectionListChange>();
 
   /** The currently selected options. */
@@ -330,7 +347,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
 
   /** Emits a change event if the selected state of an option changed. */
   _emitChangeEvent(option: MatListOption) {
-    this.change.emit(new MatSelectionListChange(this, option));
+    this.selectionChange.emit(new MatSelectionListChange(this, option));
   }
 
   /** Implemented as part of ControlValueAccessor. */
@@ -390,6 +407,9 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
         // Emit a change event because the focused option changed its state through user
         // interaction.
         this._emitChangeEvent(focusedOption);
+
+        // TODO: the `selectionChange` event on the option is deprecated. Remove that in the future.
+        focusedOption._emitDeprecatedChangeEvent();
       }
     }
   }