fix(list): selection list not picking up indirect descendants (#15003)

Fixes `MatSelectionList` not picking up list options that aren't direct descendants.

**Note:** this approach can have some side-effects if somebody decided to nest selection lists which would result in the parent picking up the options of its children. We can handle that case with some extra code, however I decided not to for now since it doesn't make sense to nest lists.

Fixes #15000.

Author: crisbeto

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

@@ -36,7 +36,8 @@ describe('MatSelectionList without forms', () => {
           SelectionListWithListOptions,
           SelectionListWithCheckboxPositionAfter,
           SelectionListWithListDisabled,
-          SelectionListWithOnlyOneOption
+          SelectionListWithOnlyOneOption,
+          SelectionListWithIndirectChildOptions,
         ],
       });
 
@@ -505,6 +506,21 @@ describe('MatSelectionList without forms', () => {
       expect(selectionList.nativeElement.getAttribute('aria-multiselectable')).toBe('true');
     });
 
+    it('should be able to reach list options that are indirect descendants', () => {
+      const descendatsFixture = TestBed.createComponent(SelectionListWithIndirectChildOptions);
+      descendatsFixture.detectChanges();
+      listOptions = descendatsFixture.debugElement.queryAll(By.directive(MatListOption));
+      selectionList = descendatsFixture.debugElement.query(By.directive(MatSelectionList));
+      const list: MatSelectionList = selectionList.componentInstance;
+
+      expect(list.options.toArray().every(option => option.selected)).toBe(false);
+
+      list.selectAll();
+      descendatsFixture.detectChanges();
+
+      expect(list.options.toArray().every(option => option.selected)).toBe(true);
+    });
+
   });
 
   describe('with list option selected', () => {
@@ -1280,3 +1296,18 @@ class SelectionListWithAvatar {
 })
 class SelectionListWithIcon {
 }
+
+
+@Component({
+  // Note the blank `ngSwitch` which we need in order to hit the bug that we're testing.
+  template: `
+    <mat-selection-list>
+      <ng-container [ngSwitch]="true">
+        <mat-list-option [value]="1">One</mat-list-option>
+        <mat-list-option [value]="2">Two</mat-list-option>
+      </ng-container>
+    </mat-selection-list>`
+})
+class SelectionListWithIndirectChildOptions {
+  @ViewChildren(MatListOption) optionInstances: QueryList<MatListOption>;
+}

src/lib/list/selection-list.ts

@@ -305,7 +305,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
   _keyManager: FocusKeyManager<MatListOption>;
 
   /** The option components contained within this selection-list. */
-  @ContentChildren(MatListOption) options: QueryList<MatListOption>;
+  @ContentChildren(MatListOption, {descendants: true}) options: QueryList<MatListOption>;
 
   /** Emits a change event whenever the selected state of an option changes. */
   @Output() readonly selectionChange: EventEmitter<MatSelectionListChange> =