ngIf="false" will prevent transition(":leave") animation

🐞 bug report

This ticket summarizes my findings to the issue described bellow. I´m aware that there are similar reports already, but none of them quite fit my problem.

Affected Package

The issue is likely caused by package @angular/animations

Is this a regression?

Yes, the previous version in which this bug was not present was: 7.2.7 according to this comment: Downgrading didn´t fix it for me though.

Description

I´m trying to add and remove an element to the DOM using *ngIf="someValue". I want to be able to play a fade-in animation using [@animation] when it get´s added to the DOM-tree. This works fine using

trigger('animation', 
transition(":enter", [...])
)

👍

According to https://angular.io/guide/animations this should work for :leave too.

For elements entering or leaving a page (inserted or removed from the DOM), you can make the animations conditional. For example, use *ngIf with the animation trigger in the HTML template.

Sadly, it doesn´t. 👎

According to this old Stackoverflow post

*ngIf removes the element from the DOM when the expression becomes false. You can’t have a transition on a non-existing element.

❓ If that´s the case, :leave (* => void) wouldn´t work at all? Am I missing something or is it a bug?

🔬 Minimal Reproduction

Will follow 🤷‍♀

🌍 Your Environment

Angular Version:

Angular CLI: 7.3.9
Node: 10.15.3
OS: darwin x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

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
@angular/pwa                      0.12.4
@ngtools/webpack                  7.3.9
@schematics/angular               7.2.4
@schematics/update                0.13.9
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

Anything else relevant? Possibly related issues: #29509, #29496

[2martens]

This issue seems to persist even in Angular 12. In my case the ngIf is on the div of the animation. But only the enter animation is played.

Layout:

<section *ngFor="let item of items; let idx = index">
  <div>
    <button (click)="toggleOpen(idx)">Button</button
  </div>
  <div *ngIf="isOpen(idx)" @ngIfAnimation>
  <!-- content -->
  </div>
</section>

[Ocean-Blue]

Any update about this issue? I am on version 9.1.10, and seems like the issue still exists.