Skip to content

Commit f19f19c

Browse files
josephperrottandrewseguin
authored andcommitted
Set selected state of list option item in selection list OnInit. (#7189)
1 parent 217840c commit f19f19c

File tree

2 files changed

+43
-2
lines changed

2 files changed

+43
-2
lines changed

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,34 @@ describe('MatSelectionList', () => {
219219
});
220220
});
221221

222+
describe('with list option selected', () => {
223+
let fixture: ComponentFixture<SelectionListWithListOptions>;
224+
let listItemEl: DebugElement;
225+
let selectionList: DebugElement;
226+
227+
beforeEach(async(() => {
228+
TestBed.configureTestingModule({
229+
imports: [MdListModule],
230+
declarations: [SelectionListWithSelecedOption],
231+
});
232+
233+
TestBed.compileComponents();
234+
}));
235+
236+
beforeEach(async(() => {
237+
fixture = TestBed.createComponent(SelectionListWithSelecedOption);
238+
listItemEl = fixture.debugElement.query(By.directive(MdListOption));
239+
selectionList = fixture.debugElement.query(By.directive(MdSelectionList));
240+
fixture.detectChanges();
241+
}));
242+
243+
it('should set its initial selected state in the selectedOptions', () => {
244+
let optionEl = listItemEl.injector.get(MdListOption);
245+
let selectedOptions = selectionList.componentInstance.selectedOptions;
246+
expect(selectedOptions.isSelected(optionEl)).toBeTruthy();
247+
});
248+
});
249+
222250
describe('with single option', () => {
223251
let fixture: ComponentFixture<SelectionListWithOnlyOneOption>;
224252
let listOption: DebugElement;
@@ -456,6 +484,13 @@ class SelectionListWithDisabledOption {
456484
disableItem: boolean = false;
457485
}
458486

487+
@Component({template: `
488+
<mat-selection-list>
489+
<md-list-option [selected]="true">Item</md-list-option>
490+
</mat-selection-list>`})
491+
class SelectionListWithSelecedOption {
492+
}
493+
459494
@Component({template: `
460495
<mat-selection-list id = "selection-list-4">
461496
<mat-list-option checkboxPosition = "after" class="test-focus" id="123">

src/lib/list/selection-list.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
Inject,
2424
Input,
2525
OnDestroy,
26+
OnInit,
2627
Optional,
2728
Output,
2829
QueryList,
@@ -82,8 +83,7 @@ const FOCUSED_STYLE: string = 'mat-list-item-focus';
8283
changeDetection: ChangeDetectionStrategy.OnPush,
8384
})
8485
export class MatListOption extends _MatListOptionMixinBase
85-
implements AfterContentInit, OnDestroy, FocusableOption, CanDisableRipple {
86-
86+
implements AfterContentInit, OnInit, OnDestroy, FocusableOption, CanDisableRipple {
8787
private _lineSetter: MatLineSetter;
8888
private _selected: boolean = false;
8989
private _disabled: boolean = false;
@@ -129,6 +129,12 @@ export class MatListOption extends _MatListOptionMixinBase
129129
super();
130130
}
131131

132+
ngOnInit() {
133+
if (this.selected) {
134+
this.selectionList.selectedOptions.select(this);
135+
}
136+
}
137+
132138
ngAfterContentInit() {
133139
this._lineSetter = new MatLineSetter(this._lines, this._renderer, this._element);
134140

0 commit comments

Comments
 (0)