title: Bind animation input parameters to a component properties in Angular 4.2.0
body: <p>I want to bind an animation input parameters to a component properties. Is there way to do it using new animation features of angular <strong>4.2.0</strong> ?</p>
  
  <p>For example, I want user to set coordinates of the object and an object should move accordingly:</p>
  
  <p><a href="https://i.stack.imgur.com/Xr3dE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xr3dE.png" alt="enter image description here"></a></p>
  
  <p>My <strong>app.component.ts</strong>:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { trigger,state,style,animate,transition,animation,useAnimation} from '@angular/animations';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations: [trigger('move', [
      transition('start &lt;=&gt; finish', 
      useAnimation(animation([
        animate(1000, style({top: '{{x}}px',left:'{{y}}px'}))
      ], { params: { x: 100, y: 100 }})))
    ])]
  })
  export class AppComponent {
    moveAnimation = { value: 'start', x: 10, y: 10 };
    move() {
      this.moveAnimation.value = this.moveAnimation.value == 'finish' ? 'start' : 'finish';
    }
  }
  </code></pre>
  
  <p>And <strong>app.component.html</strong>:</p>
  
  <pre><code>X:&lt;input type="number" [(ngModel)]="moveAnimation.x"&gt;&lt;br/&gt;
  Y:&lt;input type="number" [(ngModel)]="moveAnimation.y"&gt;&lt;br/&gt;
  &lt;button (click)="move()"&gt;Move&lt;/button&gt;&lt;br/&gt;
  &lt;div class="container"&gt;
    &lt;div class="box" [@move]="moveAnimation"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And <strong>app.component.css</strong></p>
  
  <pre><code>.container {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid black;
  }
  
  .box {
    background-color: pink;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    top: 50px;
    left: 50px;
  }
  </code></pre>