Angular 2 Animation - boolean trigger?

Question

I'm trying to trigger a transition bound to a boolean property, but this doesn't seem to fire.

Here is a cut down version of my animation trigger

trigger(   'trueFalseAnimation', [     transition('* => true', [       style({backgroundColor: '#00f7ad'}),       animate('2500ms', style({backgroundColor: '#fff'}))     ]),     transition('* => false', [       style({backgroundColor: '#ff0000'}),       animate('2500ms', style({backgroundColor: '#fff'}))     ])   ] ) 

HTML:

<div [@trueFalseAnimation]="model.someProperty">Content here</div> 

To test:

ngOnInit() {      setTimeout(() => {         this.model.someProperty = true;         setTimeOut(() => {             this.model.someProperty = false;         }, 5000);         }, 1000) } 

The trigger never happens when the someProperty changes.

As a quick test I changed the trigger to use a string and it works

trigger(       'trueFalseAnimation', [         transition('* => Success', [           style({backgroundColor: '#00f7ad'}),           animate('2500ms', style({backgroundColor: '#fff'}))         ]),         transition('* => Failed', [           style({backgroundColor: '#ff0000'}),           animate('2500ms', style({backgroundColor: '#fff'}))         ])       ]     ) 

To test:

ngOnInit() {      setTimeout(() => {         this.model.someProperty = "Success";         setTimeOut(() => {             this.model.someProperty = "Failed";         }, 5000);         }, 1000) } 

The second example works just fine

My questions are

1. Are boolean supported as triggers?
2. If yes to #1 what am I doing wrong?

Answer 1

1. It seems not. I saw that an an issue (12337) has already been raised for 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')) ])