How to define animations with parameters in Angular

Question

I followed the instructions of this post to add parameters for my Angular animation but it didn't work. I am using Angular 2+ more specifically Angular 5.

This is my animation:

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

export const AnimacaoPassosCadastroImovel = trigger("animarPasso" ,[


state("inicial", style({

     width: '{{ passoInicial }}',
     border: "3px solid black"

}), {params: { passoInicial: 0 } ),

state("final", style({

   width: '{{ passoFinal }}',
   border: "3px solid blue"

}), {params: { passoFinal: 40 } ),

  transition("inicial => final", animate("800ms"))

]);

My console:

You wrote "=>" instead of "<=>" in the transition. If you've only two states. — Niral Munjariya, Feb 09 '18 at 12:27

Niral Munjariya · Answer 1 · 2018-02-09T13:45:29.793

0

Correct animation:

import { trigger, transition, style, state, animate} from '@angular/core';
export const AnimacaoPassosCadastroImovel = trigger("animarPasso" ,[
state("inicial", style({

     width: '{{ passoInicial }}',
     border: "3px solid black"

}), {params: { passoInicial: 0 }} ),

state("final", style({

   width: '{{ passoFinal }}',
   border: "3px solid blue"

}), {params: { passoFinal: 40 }} ),
  transition("inicial => final", animate("800ms"))
]);

edited Feb 09 '18 at 13:45

answered Feb 09 '18 at 12:24

Niral Munjariya

1,371
13
27

I Think my original title confused you I don't want to declare a simple animation, I was able to define a working simple animation, I want one with parameters. I updated the title to more accurate express my problem. – Diego Alves Feb 09 '18 at 13:27
You forgot to close the curly brace here {params: { passoInicial: 0 } } Please check the updated answer. – Niral Munjariya Feb 09 '18 at 13:43

How to define animations with parameters in Angular

1 Answers1