CODEWITHSUNDEEP
javascriptangularangular-animations
Sanky
Sanky

Reputation: 193

Angular animation: respond to numeric value change

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 & :decrement. But can't use the latest value in the css properties in animate style block.

My code so far looks like this-

for binding in template-

<mat-slider [(ngModel)]="rotationAngle" ...>
<img [@photoState]="rotationAngle" src="...">

in component class declaration-

  rotationAngle: number = 0;

  constructor() { }

  ngOnInit() {
    this.rotationAngle = 0;
  }

  get stateName() {
    return this.rotationAngle;
  }

now in @Component block- 

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? */
                  }
              })
        ])
  ]

Is there any way to do this? Should I try some other approach like AnimationBuilder (maybe) ?

Upvotes: 3

Views: 2119

Answers (2)

Sanky
Sanky

Reputation: 193

Though what @ravi has posted works, I think using a AnimationBuilder is a better approach. What I did is -

    /* use attribute #imageContainer with the element you want to perform animation on */        
    @ViewChild("imageContainer") imageContainerElement: ElementRef;

    rotationAngle:number;

    let animationFactory = this.animationBuilder.build([
                  style('*'),
                  animate('500ms', style({transform: 'rotate(' + this.rotationAngle + 'deg)'}))
                ]);

   animationFactory.create(this.imageContainerElement.nativeElement).play();

This solves my problem.

Upvotes: 1

ravi
ravi

Reputation: 1145

I have tried to rotate a div using angular animations, basically i have followed the parent child kind of components relationship, where parent passes the angle using to rotate the div, which child accepts it using @Input and i have used that value in the animations , to rotate

here the link you can take a look at it https://stackblitz.com/edit/angular-animations-params

my bad i have not followed proper naming conventions.....

Upvotes: 2

Related Questions