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?

I could not find anything else in the change log either, but it seems that true false is no longer supported without your workaround. If you dont want to use .toString() you can just make your state 0 or 1 instead of true or false. — Piotr Stulinski
– Piotr Stulinski, Commented Apr 13, 2017 at 3:02
Yeah it seems that it's not supported anymore, for now I'll use the workaround. I prefer to work with a boolean in this case. — Daniel Grima
– Daniel Grima, Commented Apr 17, 2017 at 9:34

PaulR · Accepted Answer · 2017-08-18 10:54:16Z

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';
}

edited Aug 18, 2017 at 10:54

PaulR

3,74717 silver badges25 bronze badges

answered Aug 18, 2017 at 10:21

gaurav bankoti

2241 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aperezbaena · Accepted Answer · 2017-09-01 12:12:09Z

1

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.

edited Sep 1, 2017 at 12:12

answered Sep 1, 2017 at 11:53

aperezbaena

1511 silver badge4 bronze badges

Comments

david · Accepted Answer · 2017-09-18 09:44:45Z

1

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

answered Sep 18, 2017 at 9:44

david

7575 silver badges8 bronze badges

Collectives™ on Stack Overflow

Angular 4 Animations boolean triggers

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related