Animations on child elements don't fire :leave if the host component is changed to *ngIf="false"

Question

I am trying to create an enter/leave animation for a slide menu. The menu is opened with an *ngIf ( because I require ngOnInt )

Externally:

<app-slide-menu *ngIf="isOpen"></app-slide-menu>

Internally:

<div class="dark-overlay" [@fadeinout] ></div>
<nav class="menu" [@slideinout] >
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
</nav>

When isOpen is changed externally, the :enter animations for the child elements of app-slide-menu work, however, the :leave animations don't when isOpen = false.

It seems like the *ngIf of the parent isn't delayed for the child animations/they don't even know they are dieing.

Should I do something like pass in isOpen: boolean via @Input() and apply it to the children?

Maybe even add an animation to the HostBinding that does nothing but delays it's *ngIf?

Answer 1

this comment from Matsko worked for me.

Here is the gist of it:

Angular 4 introduced a few new animation features. The ones that help to make :leave animation work on child elements are query and animateChild.

Here is Matsko's example:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="toggle()">Toggle</button>
      <div *ngIf="show" @ngIfAnimation>
        <h3 @easeInOut>I'm inside ngIf</h3>
      </div>
    </div>
  `,
animations: [
  trigger('ngIfAnimation', [
    transition(':enter, :leave', [
      query('@*', animateChild())
    ])
  ])
  //...
]
})
class App {...}

Answer 2

Hi, I make small example:

https://embed.plnkr.co/RDL4yuex2Q7gGbHlcLsQ/

Definition of transition for showup:

transition('void => *', [...

And definition of transition for hide:

transition('* => void', [...

'void' : This state is reserved by Angular. void state means element is not the part of application anymore. void state example is that when ngIf expression value is false and that element is no more in DOM.

'*' : This is the default state. This is a state which has not been declared within the trigger function. * state is used for dynamic start and ending state in animation.