diff --git a/src/cdk/table/sticky-styler.ts b/src/cdk/table/sticky-styler.ts index 8525fdb3e8b9..10edad73e593 100644 --- a/src/cdk/table/sticky-styler.ts +++ b/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); diff --git a/src/lib/table/table.spec.ts b/src/lib/table/table.spec.ts index b43348c33111..d8a8c8b0c086 100644 --- a/src/lib/table/table.spec.ts +++ b/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; @@ -750,6 +768,27 @@ class MatTableWithPaginatorApp implements OnInit { } } +@Component({ + template: ` + + + Column A + {{row.a}} + + + + + + + + ` +}) +class TableWithNgContainerRow { + dataSource: FakeDataSource | null = new FakeDataSource(); + columnsToRender = ['column_a']; +} + + function getElements(element: Element, query: string): Element[] { return [].slice.call(element.querySelectorAll(query)); }