How to use input parameters in angular 6 animation?

Question

In this animation I try to decrease the width from 100% to a dynamic start width "toolWidth" (percent). The variable "toolWidth" can be set by the user in the app.

Animation:

trigger('testAnimation', [
    state('opened', style({
      'width': '100%'
    })),
    state('*', style({
      'width': '{{toolWidth}}%'
    }), {params: {toolWidth: 30}}),
    transition('* => opened', animate('600ms ease-in')),
    transition('opened => *', animate('600ms ease-out'))
  ])

Template:

<div [@testAnimation]="{value: state, params: {toolWidth: newToolWidth}}"></div>

Problem:

If the variable "state" is changed to "closed", nothing happens. It seems that the animation does not get triggered with the new state "opened". The initial value of "state" is "opened". The variable "newToolWidth" is set by the user. If I don't use parameters it works very well.

Did I miss something?

It works now. I set false initial values and because of this animation seems not working. — julianpoemp, Jun 12 '18 at 09:00
May be useful to others to follow this tutorial : https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html — Simon_Weaver, Aug 28 '18 at 05:06
@Simon_Weaver Except the linked article is wrong in all exemples of code relating to params as it misses to use the `params` sub-object :/ — Jscti, Sep 12 '18 at 13:19

score 19 · Accepted Answer · answered Nov 11 '18 at 20:51

For others passing by this question... This is how I make reusable animations in Angular 7. It may also apply to Angular 6:

stackblitz demo here

animations.ts

Create your animations in a separate file e.g. animations.ts. Note the 'params' lines. These are merely default values, which can be changed at runtime:

import {
  trigger,
  animate,
  transition,
  style,
  state
} from '@angular/animations';

export const slidingDoorAnimation = trigger('slidingDoorAnimation', 
  [
    state('in', 
      style({ width: '{{ inWidth }}', overflow:'hidden'}),
      { params: { inWidth: '250px'}}
    ),
    state('out', 
      style({ width: '{{ outWidth }}'}),
      { params: { outWidth: '*'}}
    ),
    transition('* <=> *',animate('{{ time }}'))
  ]
);

app.component.ts

You can now use this animation in any component, simply by importing it from the animations file:

import { Component } from '@angular/core';
import { slidingDoorAnimation } from './animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [slidingDoorAnimation]
})
export class AppComponent  {
  name = 'Angular';
  public slidingDoorValue:string = 'out';

  toggleSlideContent() {
    this.slidingDoorValue = (this.slidingDoorValue == 'in')?'out':'in'; 
  }
}

app.component.html

In the html file, bind the parameters to public component variables. The variable slidingDoorValue is set to 'in' or 'out' according to the states defined in the animation. Parameters for styles are optional, since they have default values defined in the animation.

<div [@slidingDoorAnimation]="{value:slidingDoorValue,params:{inWidth:'100px',time:'1000ms'}}">Hello world</div>

Interestingly 'value' seems to be required even if normally you wouldn't need one (such as `[@fadeInOut]`). If that's the case you can just use `true`. `[@fadeInOut]="{ value: true, params: { fadeInDuration: 500, fadeOutDuration: 0 }}"` — Simon_Weaver, Jan 19 '22 at 08:03

MishkuMoss · Answer 2 · 2018-10-25T13:01:34.753

Animation:

trigger('openClose', [
  // ...
  state('open', style({

    backgroundColor: "{{newColor}}"
  }),{params:{ newColor: "yellow"}}),
  state('closed', style({

    backgroundColor: "{{newColor}}"
  }),{params:{ newColor: "red"}}),
  transition('open => closed', [
    animate('0.5s')
  ]),
  transition('closed => open', [
    animate('0.5s')
  ]),
]),

script:

ngOnInit() {
    setInterval(() => {
      this.toggle();
    }, 2000);
  }

  dynoColor:string="rgb(0,0,0)";
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
    let cRed = this.getRandom();
    let cGreen = this.getRandom();
    let cBlue = this.getRandom();
    this.dynoColor = "rgb("+cRed + ", " + cGreen + ", " + cBlue+")";
  }

  getRandom() {
    var x = Math.floor((Math.random() * 255) + 0);
    return x;
  }

Template:

<div [style.width.px]='100px' [style.height.px]='100px' [@openClose]="{value: (isOpen ? 'open' : 'closed'), params: {newColor: dynoColor}}" >

In my case I was changing background color randomly and it's working perfectly.

I was using angular version 5.2.10

How to use input parameters in angular 6 animation?

2 Answers2

animations.ts

app.component.ts

app.component.html