fix(grid-list): not picking up indirect descendant lines (#17530)

Fixes the grid tile header/footer not picking up indirect descendant `mat-line`.

Author: crisbeto

src/material/grid-list/grid-list.spec.ts

@@ -475,6 +475,14 @@ describe('MatGridList', () => {
     expect(footer.nativeElement.classList.contains('mat-2-line')).toBe(true);
   });
 
+  it('should add class to footers with two indirect descendant lines', () => {
+    const fixture = createComponent(GridListWithFooterContainingTwoIndirectDescendantLines);
+    fixture.detectChanges();
+
+    const footer = fixture.debugElement.query(By.directive(MatGridTileText))!;
+    expect(footer.nativeElement.classList).toContain('mat-2-line');
+  });
+
   it('should not use calc() that evaluates to 0', () => {
     const fixture = createComponent(GirdListWithRowHeightRatio);
 
@@ -784,6 +792,19 @@ class GridListWithFootersWithoutLines { }
     </mat-grid-list>`})
 class GridListWithFooterContainingTwoLines { }
 
+@Component({template: `
+    <mat-grid-list cols="1">
+      <mat-grid-tile>
+        <mat-grid-tile-footer>
+          <ng-container [ngSwitch]="true">
+            <h3 mat-line>First line</h3>
+            <span mat-line>Second line</span>
+          </ng-container>
+        </mat-grid-tile-footer>
+      </mat-grid-tile>
+    </mat-grid-list>`})
+class GridListWithFooterContainingTwoIndirectDescendantLines { }
+
 @Component({template: `
   <mat-grid-list cols="5">
     <mat-grid-tile [rowspan]="1" [colspan]="3">1</mat-grid-tile>

src/material/grid-list/grid-tile.ts

@@ -70,7 +70,7 @@ export class MatGridTile {
   encapsulation: ViewEncapsulation.None,
 })
 export class MatGridTileText implements AfterContentInit {
-  @ContentChildren(MatLine) _lines: QueryList<MatLine>;
+  @ContentChildren(MatLine, {descendants: true}) _lines: QueryList<MatLine>;
 
   constructor(private _element: ElementRef<HTMLElement>) {}