title: Animating the Removal of a dynamic Angular Component?
body: <p><a href="https://stackblitz.com/edit/angular-fadeinout?file=app%2Falert.component.ts" rel="nofollow noreferrer">In this stackblitz demo</a> when we click <code>Create success</code> the components view display is animated (From opacity 0 to opacity 1 over 5 seconds.).</p>
  
  <p>If we clear the container (<code>this.container.clear()</code>) the removal of the element is not animated.  The animations attribute looks like this:</p>
  
  <pre><code>  animations: [
      trigger('fadeInOut', [
        transition(':enter', [
          style({ opacity: 0 }),
          animate(5000, style({ opacity: 1 }))
        ]),
        transition(':leave', [
          animate(5000, style({ opacity: 0 }))
        ])
      ])
    ],
  </code></pre>
  
  <p>How would we enable the triggering of the <code>leave</code> animation in this case?</p>