title: Angular animation: respond to numeric value change
body: <p>I want to rotate an image based on a value from a slider using Angular animation.
  I can get the animation triggered using value change notifier :increment &amp; :decrement. But can't use the latest value in the css properties in animate style block.</p>
  
  <p>My code so far looks like this-</p>
  
  <p>for binding in template-</p>
  
  <pre><code>&lt;mat-slider [(ngModel)]="rotationAngle" ...&gt;
  &lt;img [@photoState]="rotationAngle" src="..."&gt;
  </code></pre>
  
  <p>in component class declaration-</p>
  
  <pre><code>  rotationAngle: number = 0;
  
    constructor() { }
  
    ngOnInit() {
      this.rotationAngle = 0;
    }
  
    get stateName() {
      return this.rotationAngle;
    }
  </code></pre>
  
  <p>now in @Component block- </p>
  
  <pre><code>animations: [
       trigger('photoState',
         [
            transition(':increment, :decrement', [
                      style('*'),
                      animate('500ms', style({transform: 'rotate({{ rotationAngle }}deg)'}))
                ],{
                    params: {
                      rotationAngle:  ... /* need to use the slider value here, I assume. Any other way? */
                    }
                })
          ])
    ]
  </code></pre>
  
  <p>Is there any way to do this? Should I try some other approach like AnimationBuilder (maybe) ?</p>