bug(table): ngOnDestroy clears view before route animations finish

[brandom]

Reproduction

https://angular-components-8057.stackblitz.io (updated to 9.2.4)

Steps to reproduce:

1. Navigate to "Page" and the table view is destroyed immediately.

Expected Behavior

Table should remain in DOM until animations finish.

Actual Behavior

Table is removed from DOM as soon as routing begins.

Environment

• Angular: 9.1.9
• CDK/Material: 9.2.4
• Browser(s): Google Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[jelbourn]

@andrewseguin I looked at the reproduction and something does seem odd. Any idea what's going on?

[brandom]

@jelbourn I did some digging and this appears to be caused by the row and header view containers being cleared in the CdkTable ngOnDestroy method. I was able to fix the issue by moving the view container clear calls inside of a debounced ngZone.onStable event emitter. Not sure if this is a great solution, but I couldn't find any "all animations complete" event emitters in the Angular API. I'll submit my changes as a PR if you want to take a look.

Another possible solution would be to allow consumers of DataSource to return an observable from the disconnect method and only clear the view containers when it emits to give the consumer control of the table destruction.

[jelbourn]

Zone stable seems like a reasonable point right now. @matsko do you have any other suggestions?

[jelbourn]

@brandom feel free to open a PR and mention @andrewseguin

[hanyu-natsu]

any update on this ?

[francesconi]

Any updates on this issue?

[Niaro]

Guuuys! We need thiiis)

[Pastafarian]

This is causing issues on our project. Be great to get a fix for this soon.

[NZainchkovskiy]

It's a critical issue. Now I can't use router animation with components with table. Because table dissapears when animation starts. Fix it, please.

[Niaro]

@crisbeto cc @devversion cc @jelbourn cc @andrewseguin cc

[RPicster]

It's still an open issue and makes router animations very unpleasant when using this component...

[seopei]

Any updates?

[Ancient74]

As a workaround I did like so: export const rowAnimation = trigger('rowAnimation', [ transition('* => void', [ animate('0ms', style({ display: 'none'})) ]) ]); And then I applied it to mat-header-row and mat-row like this: <mat-header-row @rowAnimation *matHeaderRowDef="columnsToDisplay"></mat-header-row> <mat-row @rowAnimation *matRowDef="let row; columns: columnsToDisplay"></mat-row>

[BazylPL]

Issue reported in 2017 and still no proper fix :(

[TaridaGeorge]

I'm using the table with expandable rows and I can see some design glitches while transitioning between routes and I'm pretty sure that that's because of this issue.

[DanielsJR]

:(

[DutchKevv]

+1

Please fix, this is still an issue.

I make heavy use of mat-table and routing animations are pointless now.

[jarenasmuller]

As a workaround I did like so: export const rowAnimation = trigger('rowAnimation', [ transition('* => void', [ animate('0ms', style({ display: 'none'})) ]) ]); And then I applied it to mat-header-row and mat-row like this: <mat-header-row @rowAnimation *matHeaderRowDef="columnsToDisplay"></mat-header-row> <mat-row @rowAnimation *matRowDef="let row; columns: columnsToDisplay"></mat-row>

this is a good solution to make the bug invisible, but it requires extra work every time you want to use a table and animate routing thanks @Ancient74

[kamil-hammouche]

no fixes have been released yet ?

@Ancient74 's workaround didn't work for me...

As a workaround I did like so: export const rowAnimation = trigger('rowAnimation', [ transition('* => void', [ animate('0ms', style({ display: 'none'})) ]) ]); And then I applied it to mat-header-row and mat-row like this: <mat-header-row @rowAnimation *matHeaderRowDef="columnsToDisplay"></mat-header-row> <mat-row @rowAnimation *matRowDef="let row; columns: columnsToDisplay"></mat-row>

[Abasz]

As a workaround I did like so: export const rowAnimation = trigger('rowAnimation', [ transition('* => void', [ animate('0ms', style({ display: 'none'})) ]) ]); And then I applied it to mat-header-row and mat-row like this: <mat-header-row @rowAnimation *matHeaderRowDef="columnsToDisplay"></mat-header-row> <mat-row @rowAnimation *matRowDef="let row; columns: columnsToDisplay"></mat-row>

This worked for me as a workaround, but the issue still exists in version 11+.

[kamil-hammouche]

As a workaround I did like so: export const rowAnimation = trigger('rowAnimation', [ transition('* => void', [ animate('0ms', style({ display: 'none'})) ]) ]); And then I applied it to mat-header-row and mat-row like this: <mat-header-row @rowAnimation *matHeaderRowDef="columnsToDisplay"></mat-header-row> <mat-row @rowAnimation *matRowDef="let row; columns: columnsToDisplay"></mat-row>

This worked for me as a workaround, but the issue still exists in version 11+.

How did it work for you ? I applied it like this

my-component.html <tr mat-header-row @rowAnimation *matHeaderRowDef="columns"></tr> <tr mat-row @rowAnimation *matRowDef="let row; columns: columns;"></tr>

my-component.ts import { rowAnimation } from '../../../assets/animations/table-row.animation'; @Component({ selector: 'mycomponent', animations: [rowAnimation] })

and it doesn't work

[Abasz]

As a workaround I did like so: export const rowAnimation = trigger('rowAnimation', [ transition('* => void', [ animate('0ms', style({ display: 'none'})) ]) ]); And then I applied it to mat-header-row and mat-row like this: <mat-header-row @rowAnimation *matHeaderRowDef="columnsToDisplay"></mat-header-row> <mat-row @rowAnimation *matRowDef="let row; columns: columnsToDisplay"></mat-row>

This worked for me as a workaround, but the issue still exists in version 11+.

How did it work for you ? I applied it like this

my-component.html <tr mat-header-row @rowAnimation *matHeaderRowDef="columns"></tr> <tr mat-row @rowAnimation *matRowDef="let row; columns: columns;"></tr>

my-component.ts import { rowAnimation } from '../../../assets/animations/table-row.animation'; @Component({ selector: 'mycomponent', animations: [rowAnimation] })

and it doesn't work

Did you register the animation trigger in the my-component.ts like the below:

@Component({
    selector: "my-component",
    templateUrl: "./my-component.html",
    animations: [rowAnimation]
})

[kamil-hammouche]

As a workaround I did like so: export const rowAnimation = trigger('rowAnimation', [ transition('* => void', [ animate('0ms', style({ display: 'none'})) ]) ]); And then I applied it to mat-header-row and mat-row like this: <mat-header-row @rowAnimation *matHeaderRowDef="columnsToDisplay"></mat-header-row> <mat-row @rowAnimation *matRowDef="let row; columns: columnsToDisplay"></mat-row>

This worked for me as a workaround, but the issue still exists in version 11+.

How did it work for you ? I applied it like this my-component.html <tr mat-header-row @rowAnimation *matHeaderRowDef="columns"></tr> <tr mat-row @rowAnimation *matRowDef="let row; columns: columns;"></tr> my-component.ts import { rowAnimation } from '../../../assets/animations/table-row.animation'; @Component({ selector: 'mycomponent', animations: [rowAnimation] }) and it doesn't work

Did you register the animation trigger in the my-component.ts like the below:

@Component({
    selector: "my-component",
    templateUrl: "./my-component.html",
    animations: [rowAnimation]
})

Yes I did

[Abasz]

I am not sure whether its relevant or not, but I use mat-header-row and mat-row and not the native html tr with the attributes. Also I use square brackets with the animation directive (but this should not be relevant either).

[andrewseguin]

Unfortunately there is no ideal solution for this issue on our end. The framework should be handling this case in its animations module to ensure that the clear does not remove elements that are part of an animation.

[fxck]

Proposed workaround doesn't seem to have any effect, have you figured out why it doesn't work for you @kamil-hammouche? I'm using mat-header-row and mat-row just as @Abasz and it still doesn't work.

[fxck]

Ah, it looks like it has to be on the *matRowDef element when you are using that.