angular2 animation with variable styles
<p>Using Typescript &amp; Angular 2.0.0-rc.4</p>

<p>How can I specify style property values from the template so that I can re-use buttons? For example, if I wanted to specify a different background-color for each button based on some property that is bound by the template. See below</p>

<p>Assume the following component:</p>

<pre><code>import {
  Component,
  OnInit,
  OnDestroy,
  Input,
  style,
  state,
  animate,
  transition,
  trigger
} from '@angular/core';

@Component({
  selector: 'my-toggle-button',
  template: `&lt;div @state="state" (click)="click()"&gt;{{bgColor}}&lt;/div&gt;`,
  animations: [
    trigger('state', [
      state('inactive', style({
        'color': '#606060'
      })),
      state('active', style({
        'color': '#fff',
        'background-color': '#606060' // I want this to be bgColor
      })),
      transition('inactive &lt;=&gt; active', animate('100ms ease-out'))
    ])
  ]
})

export class ToggleButtonComponent implements OnInit {
  @Input() bgColor: string;
  state: string = 'inactive';
  active: boolean = false;

  ngOnInit() {
    this.state = this.active ? 'active' : 'inactive';
  }

  click() {
    this.active = !this.active;
    this.state = this.active ? 'active' : 'inactive';
  }
}
</code></pre>

<p>calling template:</p>

<pre><code>&lt;h1&gt;Animated Directive&lt;/h1&gt;
&lt;my-toggle-button [bgColor]="'#f00'"&gt;&lt;/my-toggle-button&gt;
&lt;my-toggle-button [bgColor]="'#0f0'"&gt;&lt;/my-toggle-button&gt;
&lt;my-toggle-button [bgColor]="'#00f'"&gt;&lt;/my-toggle-button&gt;
</code></pre>

<p><a href="http://plnkr.co/edit/KBO2pgS8B0lSAPLIf0Js?p=preview" rel="noreferrer">http://plnkr.co/edit/KBO2pgS8B0lSAPLIf0Js?p=preview</a></p>