Angular 4 Animations boolean triggers

Question

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?

Answer 1

Use string values instead of Boolean values, and change the value of states accordingly:

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

export class FadeBtnTestComponent {
    value: string= 'active';
}

Answer 2

According to Angular changelog, transition boolean values bug was fixed in 4.0.0-rc6 (check PR).

However, the mixed syntax supported in Angular 2 is not working anymore. Boolean values must be used in both state definition and transition expression as in the sample below:

export const ANIMATION_SAMPLE = trigger('booleanTrigger', [
    state('1', style({ ...})),
    state('0', style({ ...})),
    transition('1 => 0', animate(...)),
    transition('0 => 1', animate(...))
]);

This answer comment suggests the same workaround to work with boolean triggers.

Answer 3

This was a bug which was reported here: https://github.com/angular/angular/issues/15247 and was fixed with this PR: https://github.com/angular/angular/pull/15311