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?

Answer 1

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>