I'm testing a simple fade in/fade out animation on a button using Angular 4 Animations. The issue I'm having is that because I'm using boolean values nothing is being triggered. From the dev tools it looks like an .ng-animating class is added to the element but nothing is changed.

This is a sample of the code I have:

@Component({
    selector: 'fade-btn-test',
    styles: [
        require('./fade-btn-test.component.scss')
    ],
    template: `
        <button [@test]="isActive" (click)="isActive = !isActive">My Button</button>
    `,
    animations: [
        trigger('test', [
            state('true', style({ opacity: 0 })),
            state('false', style({ opacity: 1 })),
            transition('0 <=> 1', animate(500))
        ])
    ]
})

export class FadeBtnTestComponent {
    isActive: boolean = false;
}

I know that the above code used to work with Angular 2, however in this case it's not working. The only solution I've found is to work using a string instead of a boolean.

@Component({
    selector: 'fade-btn-test',
    styles: [
        require('./fade-btn-test.component.scss')
    ],
    template: `
        <button [@test]="isActive.toString()" (click)="isActive = !isActive">My Button</button>
    `,
    animations: [
        trigger('test', [
            state('true', style({ opacity: 0 })),
            state('false', style({ opacity: 1 })),
            transition('true <=> false', animate(500))
        ])
    ]
})

export class FadeBtnTestComponent {
    isActive: boolean = false;
}

From the above code you will note that the animation trigger @test is reading a string (isActive.toString()) and the transition function has true <=> false passed instead of 0 <=> 1.

Although I got it to work I'm not sure if there was any update to the Animation module itself. Is anyone aware of any changes to the Animation module with the Angular 4 update?