Table: ERROR TypeError: Cannot set property 'left' of undefined

[felikf]

Bug, enhancement request, or proposal:

• regression

After upgrading from 5.2.4 to 6.4.1 i see the following error in console:

preview-fe7237b13d780dbf847da.js:1 ERROR TypeError: Cannot set property 'left' of undefined
    at StickyStyler._removeStickyStyle (sticky-styler.ts:159)
    at StickyStyler.clearStickyPositioning (sticky-styler.ts:48)
    at MatTable.CdkTable.updateStickyColumnStyles (table.ts:596)
    at MatTable.CdkTable.renderRows (table.ts:472)
    at SafeSubscriber.eval [as _next] (table.ts:794)
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:270)
    at SafeSubscriber.next (Subscriber.ts:212)
    at Subscriber._next (Subscriber.ts:142)
    at Subscriber.next (Subscriber.ts:102)
    at TakeUntilSubscriber.Subscriber._next (Subscriber.ts:142)

It is related to table component, code fragment that causes the error:

<ng-container *matRowDef="let row; columns: displayedColumns;">
    <mat-row ></mat-row>
</ng-container>

This works without error in console:

    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

CodePen and steps to reproduce the issue:

https://stackblitz.com/edit/angular-5vkqs1?file=app/table-pagination-example.html

Detailed Reproduction Steps:

1. open https://stackblitz.com/edit/angular-5vkqs1
2. look in the console
3. observe the error

What is the expected behavior?

no error in console for mat-row using ng-container:

<ng-container *matRowDef="let row; columns: displayedColumns;">
    <mat-row ></mat-row>
</ng-container>

What is the current behavior?

What is the use-case or motivation for changing an existing behavior?

My use case is that I need to render special kind of summary rows like that:

<ng-container *matRowDef="let row; columns: displayedColumns;">
    <div *ngIf="summaryRow">
         This is summary row which is related to group of other rows and displays number summaries
    </div>

    <mat-row [style.display]="summaryRow 'none' : 'flex'">     
    </mat-row>
</ng-container>

Which versions of Angular, Material, OS, and browsers are affected?

• Angular: 6.0.3
• Angular Material: 6.4.1
• OS:
• Browsers: Chrome Version 67.0.3396.87 (Official Build) (64-bit)

Is there anything else we should know? Stack Traces, Screenshots, etc.

[felikf]

@crisbeto thanks for fixing this

current workaround - replace ng-container with div:

<div *matRowDef="let row; columns: displayedColumns;">
    <div *ngIf="summaryRow">
         This is summary row which is related to group of other rows and displays number summaries
    </div>

    <mat-row [style.display]="summaryRow 'none' : 'flex'">     
    </mat-row>
</div>

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}