title: Animations on child elements don't fire :leave if the host component is changed to *ngIf="false"
body: <p>I am trying to create an enter/leave animation for a slide menu. The menu is opened with an *ngIf ( because I require ngOnInt )</p>
  
  <p>Externally:</p>
  
  <pre><code>&lt;app-slide-menu *ngIf="isOpen"&gt;&lt;/app-slide-menu&gt;
  </code></pre>
  
  <p>Internally:</p>
  
  <pre><code>&lt;div class="dark-overlay" [@fadeinout] &gt;&lt;/div&gt;
  &lt;nav class="menu" [@slideinout] &gt;
      &lt;a&gt;Link&lt;/a&gt;
      &lt;a&gt;Link&lt;/a&gt;
      &lt;a&gt;Link&lt;/a&gt;
      &lt;a&gt;Link&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>When <code>isOpen</code> is changed externally, the <code>:enter</code> animations for the child elements of <code>app-slide-menu</code> work, however, the <code>:leave</code> animations don't when <code>isOpen = false</code>. </p>
  
  <p>It seems like the <code>*ngIf</code> of the parent isn't delayed for the child animations/they don't even know they are dieing.</p>
  
  <p>Should I do something like pass in <code>isOpen: boolean</code> via <code>@Input()</code> and apply it to the children?</p>
  
  <p>Maybe even add an animation to the <code>HostBinding</code> that does nothing but delays it's <code>*ngIf</code>?</p>