title: Angular2 trigger animation from parent component
body: <p>I'm trying to trigger an animation on an hidden element of a child component. To be simple, the animation should occur when the element appears, and then each time a user click on a button from the parent component.</p>
  
  <p>Here is simple code : 
  (tried to plunkr it, but impossible to import trigger component from angular core)</p>
  
  <p><strong>app.ts</strong></p>
  
  <pre><code>import {ChildComponent} from './child';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;button id="showChildButton" (click)="setShowChild()"&gt;Show Child&lt;/button&gt;
      &lt;button id="triggerAnimation"&gt;Trigger animation&lt;/button&gt;
      &lt;child-component *ngIf="showChild"&gt;&lt;/child-component&gt;
    `
    .....
  })
  export class App {
  
    showChild: boolean = false;
  
    setShowChild() {
      this.showChild = true;
    }
  }
  </code></pre>
  
  <p><strong>child.ts</strong></p>
  
  <pre><code>import {
      Component,
      trigger,
      state,
      style,
      transition,
      animate
  } from '@angular/core'
  
  @Component({
    selector: 'child-component',
    template: `&lt;h1 [@inflateIn]&gt;Hello&lt;/h1&gt;`,
    animations: [
          trigger('inflateIn', [
              transition('void =&gt; *', [
                  animate(100, style({ transform: 'scale(1.1)'}))
              ]),
              transition('* =&gt; *', [
                  animate(100, style({ transform: 'scale(1.1)'}))
              ])
          ])
      ]
  })
  export class ChildComponent {
  
  }
  </code></pre>
  
  <p>I am able to animate the , the first time it appears, but I can't figure out how to trigger this animation again, when clicking on button #triggerAnimation of the parent component.
  I searched for examples but I didn't find anything that solve my case.</p>
  
  <p>Thanks for your help</p>