Angular animations - :leave transition with *ngIf not removing element from DOM #30693
Description
🐞 bug report
Affected Package
The issue is caused by package @angular/...
Is this a regression?
Unsure
Description
When using a :leave transition on an element with *ngIf, the element is not removed from the DOM after the animation completes. This only happens when using a query in the :leave transition to target children.
transition(':leave', [
query('header, section', [
animate('400ms', style({ opacity: 0 }))
])
])
🔬 Minimal Reproduction
https://stackblitz.com/edit/angular-gfutup
Click the Toggle button twice to see expected behaviour on :enter & :leave.
Uncomment lines 33 & 35 to see current behaviour
🌍 Your Environment
Angular Version:
Angular CLI: 7.3.9
Node: 11.12.0
OS: darwin x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.13.9
@angular-devkit/build-angular 0.13.9
@angular-devkit/build-optimizer 0.13.9
@angular-devkit/build-webpack 0.13.9
@angular-devkit/core 7.3.9
@angular-devkit/schematics 7.3.9
@angular/cdk 7.3.7
@angular/cli 7.3.9
@angular/material 7.3.7
@ngtools/webpack 7.3.9
@schematics/angular 7.3.9
@schematics/update 0.13.9
rxjs 6.3.3
typescript 3.2.4
webpack 4.29.0