title: Angular 2 - Animation show/hide not work with component tag
body: <p>I'm working on animation for showing and hiding a component.</p>
  
  <p>My Plunker: <a href="https://embed.plnkr.co/BxT8SKBq8JwuPP16FDu4/" rel="nofollow noreferrer">https://embed.plnkr.co/BxT8SKBq8JwuPP16FDu4/</a> </p>
  
  <pre><code>&lt;animation [@toggleHeight]="isShow"&gt;&lt;/animation&gt;
  &lt;button (click)="isShow = (isShow==='show')? 'hide' : 'show'"&gt;Toggle&lt;/button&gt;
  &lt;calc&gt;&lt;/calc&gt;
  </code></pre>
  
  <p>When click the botton, I want the "animation" div disappear, but it doesn't. The content inside "animation" component still showing.</p>
  
  <p>Am I doing something wrong? Any help would be great. Thank you in advance.</p>