Angular2 run animation on leave & observable filter : <p>I have a component that I can animate on entry like this, the entry animation works fine. The handleRemoval method gets executed and an event emitter filters the component from the list of components (using observables). But the :leave animation does not run:</p>

<pre><code>    @Component({
        animations: [
            trigger(
            'enterAnimation', [
                transition(':enter', [
                style({transform: 'translateY(100%)', opacity: 0}),
                animate('500ms', style({transform: 'translateY(0)', opacity: 1}))
                ]),
                transition(':leave', [
                style({transform: 'translateY(0)', opacity: 1}),
                animate('500ms', style({transform: 'translateY(100%)', opacity: 0}))
                ])
            ]
            )
        ],
        template: `
            &lt;div class="mb1 card text-xs-center rounded" [@enterAnimation]="show"&gt;
</code></pre>

<p>

    ...</p>

<pre><code>export class ContentPropertyComponent {

    show: boolean = false;

    constructor(private router: Router) {
        this.show = true;
     }

    handleRemoval(contentProperty: PropertyModel) {
        this.show = false;
        this.delete.emit(this.contentProperty);
    }
}
</code></pre>

<p>Any help appreciated.</p>
