diff --git a/src/lib/list/selection-list.spec.ts b/src/lib/list/selection-list.spec.ts
index 216c3760abb3..b31c1ed5ec2c 100644
--- a/src/lib/list/selection-list.spec.ts
+++ b/src/lib/list/selection-list.spec.ts
@@ -572,7 +572,9 @@ describe('MatSelectionList with forms', () => {
imports: [MatListModule, FormsModule, ReactiveFormsModule],
declarations: [
SelectionListWithModel,
- SelectionListWithFormControl
+ SelectionListWithFormControl,
+ SelectionListWithPreselectedOption,
+ SelectionListWithPreselectedOptionAndModel
]
});
@@ -735,6 +737,34 @@ describe('MatSelectionList with forms', () => {
expect(listOptions[2].selected).toBe(true, 'Expected third option to be selected.');
});
});
+
+ describe('preselected values', () => {
+ it('should add preselected options to the model value', fakeAsync(() => {
+ const fixture = TestBed.createComponent(SelectionListWithPreselectedOption);
+ const listOptions = fixture.debugElement.queryAll(By.directive(MatListOption))
+ .map(optionDebugEl => optionDebugEl.componentInstance);
+
+ fixture.detectChanges();
+ tick();
+
+ expect(listOptions[1].selected).toBe(true);
+ expect(fixture.componentInstance.selectedOptions).toEqual(['opt2']);
+ }));
+
+ it('should handle preselected option both through the model and the view', fakeAsync(() => {
+ const fixture = TestBed.createComponent(SelectionListWithPreselectedOptionAndModel);
+ const listOptions = fixture.debugElement.queryAll(By.directive(MatListOption))
+ .map(optionDebugEl => optionDebugEl.componentInstance);
+
+ fixture.detectChanges();
+ tick();
+
+ expect(listOptions[0].selected).toBe(true);
+ expect(listOptions[1].selected).toBe(true);
+ expect(fixture.componentInstance.selectedOptions).toEqual(['opt1', 'opt2']);
+ }));
+
+ });
});
@@ -858,3 +888,27 @@ class SelectionListWithModel {
class SelectionListWithFormControl {
formControl = new FormControl();
}
+
+
+@Component({
+ template: `
+
+ Option 1
+ Option 2
+ `
+})
+class SelectionListWithPreselectedOption {
+ selectedOptions: string[];
+}
+
+
+@Component({
+ template: `
+
+ Option 1
+ Option 2
+ `
+})
+class SelectionListWithPreselectedOptionAndModel {
+ selectedOptions = ['opt1'];
+}
diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts
index 02849ebd3d2b..0e9ce47bd3df 100644
--- a/src/lib/list/selection-list.ts
+++ b/src/lib/list/selection-list.ts
@@ -163,13 +163,13 @@ export class MatListOption extends _MatListOptionMixinBase
}
ngOnInit() {
- if (this.selected) {
+ if (this._selected) {
// List options that are selected at initialization can't be reported properly to the form
// control. This is because it takes some time until the selection-list knows about all
// available options. Also it can happen that the ControlValueAccessor has an initial value
// that should be used instead. Deferring the value change report to the next tick ensures
// that the form control value is not being overwritten.
- Promise.resolve(() => this.selected && this.selectionList._reportValueChange());
+ Promise.resolve().then(() => this.selected = true);
}
}