Angular 2 Animation - boolean trigger?

1. It seems not. I saw that an an issue (12337) has already been raisedfor this, but there has been no update so far.
2. One other alternative is to use 1 and 0 instead of true and false.

See the plunker from here.

trigger('isVisibleChanged', [      state('true' , style({ opacity: 1, transform: 'scale(1.0)' })),      state('false', style({ opacity: 0, transform: 'scale(0.0)'  })),      transition('1 => 0', animate('300ms')),      transition('0 => 1', animate('900ms'))])

I'm having the same issue. Not sure if boolean are supported as triggers, but the workaround I found was to define a string property with a getter to return the boolean value as string. Something like this:

get somePropertyStr():string {    return this.someProperty.toString();}

Then you should bind your animation to that somePropertyStr property.

Once again, this is an ugly workaround, best thing would be able to use the boolean value.

A state is defined as being a string, so we need to stick to that.

The simplest - but ickiest - way based on your code is this

<div [@trueFalseAnimation]="model.someProperty?.toString()">Content here</div>

But this is pretty awful, so this is probably better

<div [@trueFalseAnimation]="model.someProperty ? 'active' : 'inactive'">Content here</div><div [@trueFalseAnimation]="model.someProperty ? 'visible' : 'hidden'">Content here</div><div [@trueFalseAnimation]="model.someProperty ? 'up' : 'down'">Content here</div><div [@trueFalseAnimation]="model.someProperty ? 'left' : 'right'">Content here</div>

The best advice here would be to use a state that corresponds to what it really means. What does true and false really mean in this context anyway?

I considered making a pipe to convert a boolean, but the only benefit of that would be to make sure you're being consistent with your state strings.