title: animation in angular 2
body: <p>I try to add an animation in child template:</p>
  
  <pre><code>&lt;div class="panel panel-default" [@AnimationState]="item.animateState" (click)="toggleAnimateState()"&gt;
  </code></pre>
  
  <p>the function toggleAnimateState() in item.component.ts:</p>
  
  <pre><code> toggleAnimateState() {
     this.item.animateState = this.item.animateState === 'inactive' ? 'active' : 'inactive'; 
  }
  </code></pre>
  
  <p>And in the same component :</p>
  
  <pre><code>import { Component, Input ,Output, EventEmitter, trigger, state, style, transition, animate } from "@angular/core";
  import { Item as ItemModel} from "./models/Item";
  
  @Component({
      selector: 'item',
      templateUrl: 'app/item.component.html' ,
      styleUrls : ['app/app.component.css'],
      animations : [
        trigger('AnimationState',[
          state('inactive', style({color:'red'})),
          state('active', style({color: 'blue'})),
          transition('inactive =&gt; active' , animate('1000ms eas-in')),
          transition('active =&gt; inactive' , animate('5000ms eas-in')),
        ])
      ]
    })
    export class Item {
  @Input() item : ItemModel;
  }
  </code></pre>
  
  <p>ANd in the app.componet.html:</p>
  
  <pre><code>&lt;div *ngFor="let item of collection | itemFilter:listFilter.value" &gt;
          &lt;item [item]="item" (onGetDetails)="onGetDetails($event)"&gt;&lt;/item&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>But i get this error :</p>
  
  <pre><code>EXCEPTION: Template parse errors:
  Can't bind to '@AnimationState' since it isn't a known native property (" 
  
    &lt;div class="panel panel-default" [ERROR -&gt;][@AnimationState]="item.animateState" (click)="toggleAnimateState()"&gt;
  
      &lt;div class="panel-he"): Item@2:35
  </code></pre>