How to conditionally animate a transition based on variables? (Angular Animations)

Question

I'm having the following animation

  animations: [
    trigger('someAnimation', [
      state('inactive', style({ opacity: 0 })),
      state('active', style({ opacity: 1 })),
      state('removed', style({ opacity: 0 })),
      transition(
        'inactive => active',
        animate('{{ variable }}')
      ),
      transition(
        'active => removed',
        animate('{{ secondVariable ? secondVariable : variable }}') // not working, just an example
      )
    ])
  ],

and this host binding:

  @HostBinding('@someAnimation')
  state = {
    value: 'inactive',
    params: {
      variable: this.getVariable(),
      secondVariable: this.getSecondVariable()
    }
  };

So I'm trying to fall back on the first variable if the second variable is not defined or does not have the value I want.

Do you know how can I achieve something like this? animate('{{ secondVariable ? secondVariable : variable }}')

PS: It's the first time when I use animations in Angular, I've read a couple of articles and checked the documentation but didn't find something similar yet.

Thanks in advance!

Answer 1

Actually, I only had to define the fallback when initializing the variables, not inside the animation.

So like this:

  @HostBinding('@someAnimation')
  state = {
    value: 'inactive',
    params: {
      variable: this.getVariable(),
      secondVariable: this.getSecondVariable() ? this.getSecondVariable() : this.getVariable()
    }
  };