fix(table): error if row definition is on an ng-container (#12462)

Fixes the table throwing an error if the row definitions are on an `ng-container`.

Fixes #12460.

Author: crisbeto

src/cdk/table/sticky-styler.ts

@@ -45,7 +45,14 @@ export class StickyStyler {
    */
   clearStickyPositioning(rows: HTMLElement[], stickyDirections: StickyDirection[]) {
     for (const row of rows) {
+      // If the row isn't an element (e.g. if it's an `ng-container`),
+      // it won't have inline styles or `children` so we skip it.
+      if (row.nodeType !== row.ELEMENT_NODE) {
+        continue;
+      }
+
       this._removeStickyStyle(row, stickyDirections);
+
       for (let i = 0; i < row.children.length; i++) {
         const cell = row.children[i] as HTMLElement;
         this._removeStickyStyle(cell, stickyDirections);

src/lib/table/table.spec.ts

@@ -1,6 +1,13 @@
 import {DataSource} from '@angular/cdk/collections';
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {async, ComponentFixture, fakeAsync, flushMicrotasks, TestBed} from '@angular/core/testing';
+import {
+  async,
+  ComponentFixture,
+  fakeAsync,
+  flushMicrotasks,
+  TestBed,
+  tick,
+} from '@angular/core/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {BehaviorSubject, Observable} from 'rxjs';
 import {MatPaginator, MatPaginatorModule} from '../paginator/index';
@@ -22,6 +29,7 @@ describe('MatTable', () => {
         MatTableWithSortApp,
         MatTableWithPaginatorApp,
         StickyTableApp,
+        TableWithNgContainerRow,
       ],
     }).compileComponents();
   }));
@@ -127,6 +135,16 @@ describe('MatTable', () => {
     expect(stuckCellElement.classList).toContain('mat-table-sticky');
   });
 
+  // Note: needs to be fakeAsync so it catches the error.
+  it('should not throw when a row definition is on an ng-container', fakeAsync(() => {
+    const fixture = TestBed.createComponent(TableWithNgContainerRow);
+
+    expect(() => {
+      fixture.detectChanges();
+      tick();
+    }).not.toThrow();
+  }));
+
   describe('with MatTableDataSource and sort/pagination/filter', () => {
     let tableElement: HTMLElement;
     let fixture: ComponentFixture<ArrayDataSourceMatTableApp>;
@@ -750,6 +768,27 @@ class MatTableWithPaginatorApp implements OnInit {
   }
 }
 
+@Component({
+  template: `
+    <mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="column_a">
+        <mat-header-cell *matHeaderCellDef>Column A</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{row.a}}</mat-cell>
+      </ng-container>
+
+      <mat-header-row *matHeaderRowDef="columnsToRender"></mat-header-row>
+      <ng-container *matRowDef="let row; columns: columnsToRender">
+        <mat-row></mat-row>
+      </ng-container>
+    </mat-table>
+  `
+})
+class TableWithNgContainerRow {
+  dataSource: FakeDataSource | null = new FakeDataSource();
+  columnsToRender = ['column_a'];
+}
+
+
 function getElements(element: Element, query: string): Element[] {
   return [].slice.call(element.querySelectorAll(query));
 }