fix(selection-list): fix option value coercion and selection events

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

@@ -4,7 +4,7 @@ import {createKeyboardEvent, dispatchFakeEvent} from '@angular/cdk/testing';
 import {Component, DebugElement} from '@angular/core';
 import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
-import {MatListModule, MatListOption, MatSelectionList} from './index';
+import {MatListModule, MatListOption, MatSelectionList, MatSelectionListOptionEvent} from './index';
 
 
 describe('MatSelectionList', () => {
@@ -483,9 +483,88 @@ describe('MatSelectionList', () => {
       expect(listItemContent.nativeElement.classList).toContain('mat-list-item-content-reverse');
     });
   });
-});
 
 
+  describe('with multiple values', () => {
+    let fixture: ComponentFixture<SelectionListWithMultipleValues>;
+    let listOption: DebugElement[];
+    let listItemEl: DebugElement;
+    let selectionList: DebugElement;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [MatListModule],
+        declarations: [
+          SelectionListWithMultipleValues
+        ],
+      });
+
+      TestBed.compileComponents();
+    }));
+
+    beforeEach(async(() => {
+      fixture = TestBed.createComponent(SelectionListWithMultipleValues);
+      listOption = fixture.debugElement.queryAll(By.directive(MatListOption));
+      listItemEl = fixture.debugElement.query(By.css('.mat-list-item'));
+      selectionList = fixture.debugElement.query(By.directive(MatSelectionList));
+      fixture.detectChanges();
+    }));
+
+    it('should have a value for each item', () => {
+      expect(listOption[0].componentInstance.value).toBe(1);
+      expect(listOption[1].componentInstance.value).toBe('a');
+      expect(listOption[2].componentInstance.value).toBe(true);
+    });
+
+  });
+
+  describe('with option selected events', () => {
+    let fixture: ComponentFixture<SelectionListWithOptionEvents>;
+    let testComponent: SelectionListWithOptionEvents;
+    let listOption: DebugElement[];
+    let selectionList: DebugElement;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [MatListModule],
+        declarations: [
+          SelectionListWithOptionEvents
+        ],
+      });
+
+      TestBed.compileComponents();
+    }));
+
+    beforeEach(async(() => {
+      fixture = TestBed.createComponent(SelectionListWithOptionEvents);
+      testComponent = fixture.debugElement.componentInstance;
+      listOption = fixture.debugElement.queryAll(By.directive(MatListOption));
+      selectionList = fixture.debugElement.query(By.directive(MatSelectionList));
+      fixture.detectChanges();
+    }));
+
+    it('should trigger the selected and deselected events when clicked in succession.', () => {
+
+      let selected: boolean = false;
+
+      spyOn(testComponent, 'onOptionSelectionChange')
+        .and.callFake((event: MatSelectionListOptionEvent) => {
+          selected = event.selected;
+        });
+
+      listOption[0].nativeElement.click();
+      expect(testComponent.onOptionSelectionChange).toHaveBeenCalledTimes(1);
+      expect(selected).toBe(true);
+
+      listOption[0].nativeElement.click();
+      expect(testComponent.onOptionSelectionChange).toHaveBeenCalledTimes(2);
+      expect(selected).toBe(false);
+    });
+
+  });
+
+});
+
 @Component({template: `
   <mat-selection-list id="selection-list-1">
     <mat-list-option checkboxPosition="before" disabled="true" value="inbox">
@@ -579,3 +658,28 @@ class SelectionListWithTabindexBinding {
   tabIndex: number;
   disabled: boolean;
 }
+
+@Component({template: `
+<mat-selection-list id = "selection-list-5">
+  <mat-list-option [value]="1" checkboxPosition="after">
+    1
+  </mat-list-option>
+  <mat-list-option value="a" checkboxPosition="after">
+    a
+  </mat-list-option>
+  <mat-list-option [value]="true" checkboxPosition="after">
+    true
+  </mat-list-option>
+</mat-selection-list>`})
+class SelectionListWithMultipleValues {
+}
+
+@Component({template: `
+<mat-selection-list id = "selection-list-6">
+  <mat-list-option (selectionChange)="onOptionSelectionChange($event)">
+    Inbox
+  </mat-list-option>
+</mat-selection-list>`})
+class SelectionListWithOptionEvents {
+  onOptionSelectionChange: (event?: MatSelectionListOptionEvent) => void = () => {};
+}

src/lib/list/selection-list.ts

@@ -52,8 +52,9 @@ export class MatListOptionBase {}
 export const _MatListOptionMixinBase = mixinDisableRipple(MatListOptionBase);
 
 /** Event emitted by a selection-list whenever the state of an option is changed. */
-export interface MatSelectionListOptionEvent {
+export class MatSelectionListOptionEvent {
   option: MatListOption;
+  selected: boolean;
 }
 
 /**
@@ -86,7 +87,6 @@ export interface MatSelectionListOptionEvent {
 export class MatListOption extends _MatListOptionMixinBase
     implements AfterContentInit, OnInit, OnDestroy, FocusableOption, CanDisableRipple {
   private _lineSetter: MatLineSetter;
-  private _selected: boolean = false;
   private _disabled: boolean = false;
 
   /** Whether the option has focus. */
@@ -97,34 +97,29 @@ export class MatListOption extends _MatListOptionMixinBase
   /** Whether the label should appear before or after the checkbox. Defaults to 'after' */
   @Input() checkboxPosition: 'before' | 'after' = 'after';
 
-  /** Value of the option */
-  @Input() value: any;
-
   /** Whether the option is disabled. */
   @Input()
   get disabled() { return (this.selectionList && this.selectionList.disabled) || this._disabled; }
   set disabled(value: any) { this._disabled = coerceBooleanProperty(value); }
 
+  /** Value of the option */
+  @Input() value: any;
+
   /** Whether the option is selected. */
   @Input()
-  get selected() { return this._selected; }
+  get selected() { return this.selectionList.selectedOptions.isSelected(this); }
   set selected(value: boolean) {
     const isSelected = coerceBooleanProperty(value);
 
-    if (isSelected !== this._selected) {
-      const selectionModel = this.selectionList.selectedOptions;
-
-      this._selected = isSelected;
-      isSelected ? selectionModel.select(this) : selectionModel.deselect(this);
+    if (isSelected !== this.selected) {
+      this.selectionList.selectedOptions.toggle(this);
       this._changeDetector.markForCheck();
+      this.selectionChange.emit(this._createChangeEvent());
     }
   }
 
-  /** Emitted when the option is selected. */
-  @Output() selectChange = new EventEmitter<MatSelectionListOptionEvent>();
-
-  /** Emitted when the option is deselected. */
-  @Output() deselected = new EventEmitter<MatSelectionListOptionEvent>();
+  /** Emitted when the option is selected or deselected. */
+  @Output() selectionChange = new EventEmitter<MatSelectionListOptionEvent>();
 
   constructor(private _renderer: Renderer2,
               private _element: ElementRef,
@@ -174,6 +169,16 @@ export class MatListOption extends _MatListOptionMixinBase
     this.selectionList._setFocusedOption(this);
   }
 
+  /** Creates a selection event object from the specified option. */
+  private _createChangeEvent(option: MatListOption = this): MatSelectionListOptionEvent {
+    let event = new MatSelectionListOptionEvent();
+
+    event.option = option;
+    event.selected = option.selected;
+
+    return event;
+  }
+
   /** Retrieves the DOM element of the component host. */
   _getHostElement(): HTMLElement {
     return this._element.nativeElement;