fix(table): not picking up indirect descendant defs (#17340)

Fixes the table not picking descendants that aren't direct descendants. Currently this isn't a huge problem, however with Ivy it'll become an issue that'll prevent consumers from setting an `ngIf` around the defs.

Fixes #17339.

Author: crisbeto

src/cdk/table/table.spec.ts

@@ -541,6 +541,10 @@ describe('CdkTable', () => {
         .toThrowError(getTableUnknownColumnError('column_a').message);
   });
 
+  it('should pick up columns that are indirect descendants', () => {
+    expect(() => createComponent(TableWithIndirectDescendantDefs).detectChanges()).not.toThrow();
+  });
+
   it('should throw an error if a column definition is requested but not defined after render',
      fakeAsync(() => {
        const columnDefinitionMissingAfterRenderFixture =
@@ -2322,6 +2326,26 @@ class NativeHtmlTableWithCaptionApp {
   @ViewChild(CdkTable) table: CdkTable<TestData>;
 }
 
+@Component({
+  // Note that we need the `ngSwitch` below in order to surface the issue we're testing for.
+  template: `
+    <cdk-table [dataSource]="dataSource">
+      <ng-container [ngSwitch]="true">
+        <ng-container cdkColumnDef="column_a">
+          <cdk-header-cell *cdkHeaderCellDef> Column A</cdk-header-cell>
+          <cdk-cell *cdkCellDef="let row"> {{row.a}}</cdk-cell>
+        </ng-container>
+      </ng-container>
+
+      <cdk-header-row *cdkHeaderRowDef="['column_a']"></cdk-header-row>
+      <cdk-row *cdkRowDef="let row; columns: ['column_a']"></cdk-row>
+    </cdk-table>
+  `
+})
+class TableWithIndirectDescendantDefs {
+  dataSource = new FakeDataSource();
+}
+
 function getElements(element: Element, query: string): Element[] {
   return [].slice.call(element.querySelectorAll(query));
 }

src/cdk/table/table.ts

@@ -375,16 +375,20 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
    * The column definitions provided by the user that contain what the header, data, and footer
    * cells should render for each column.
    */
-  @ContentChildren(CdkColumnDef) _contentColumnDefs: QueryList<CdkColumnDef>;
+  @ContentChildren(CdkColumnDef, {descendants: true}) _contentColumnDefs: QueryList<CdkColumnDef>;
 
   /** Set of data row definitions that were provided to the table as content children. */
-  @ContentChildren(CdkRowDef) _contentRowDefs: QueryList<CdkRowDef<T>>;
+  @ContentChildren(CdkRowDef, {descendants: true}) _contentRowDefs: QueryList<CdkRowDef<T>>;
 
   /** Set of header row definitions that were provided to the table as content children. */
-  @ContentChildren(CdkHeaderRowDef) _contentHeaderRowDefs: QueryList<CdkHeaderRowDef>;
+  @ContentChildren(CdkHeaderRowDef, {
+    descendants: true
+  }) _contentHeaderRowDefs: QueryList<CdkHeaderRowDef>;
 
   /** Set of footer row definitions that were provided to the table as content children. */
-  @ContentChildren(CdkFooterRowDef) _contentFooterRowDefs: QueryList<CdkFooterRowDef>;
+  @ContentChildren(CdkFooterRowDef, {
+    descendants: true
+  }) _contentFooterRowDefs: QueryList<CdkFooterRowDef>;
 
   constructor(
       protected readonly _differs: IterableDiffers,