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

[diverent2]

🐞 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

[diverent2]

#15798 (comment)
Describes a workaround. If that´s the way to go, the docs should be updated accordingly 😃

[Ocean-Blue]

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

[ElecTreeFrying]

bump. any update ?

[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>

[dario-piotrowicz]

Hi @diverent2, I believe this is the exact problem that also the issues you mentioned in you description (#29509, #29496) refer to.

I commented on those issues that the behaviour there was the expected one, I think that :leave can be a bit tricky to grasp and that this issue you are describing can also be the same.

You can check my comments in those issues, but tldr not all elements leaving the dom are considered for :leave transitions/queries, so you need to be careful (one quick rule of thumb is to have your *ngIf and trigger on the same element)

I hope this helps 🙂

---

I don't think that anything can be done in this issue since it doesn't have a minimal reproduction and what it is describing is too vague and can very easily relate to something working as expected (but not clearly documented)

If possible I would suggest to close this issue as it is either working as expected or it is a duplicate of the other two (or if you really believe that it is something different I think that a minimal reproduction is very much necessary here)

[jessicajaniuk]

It appears this behaves as expected, but as @dario-piotrowicz, it's not the clearest on how this works in the documentation. We have an issue open to track that documentation problem. If you still feel there is an issue, please re-open this issue or provide further details in a new issue.

[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.}