Hide element after transition

Question

How do you hide(remove from DOM — like when using '*ngIf') element after animation ends?

Here's some code:

 state('inactive', style({
   backgroundColor: '#eee',
   transform: 'scale(1)'
 })),
 state('active',   style({
   backgroundColor: '#cfd8dc',
   transform: 'scale(1.1)'
 })),

How do I hide element after "inactive" animation ends?

Answer 1

Take a look here:

https://angular.io/docs/ts/latest/guide/animations.html#!#animation-callbacks

Look for the info on "animation callbacks". In "yourAnimation.done", you'd set up a callback, then hide your element there.