Add animation when expression value changes - Angular 5

Question

I have an expression on a page called 'pointsBalance' that displays numeric value. Its hooked up to an observable, and when pointsBalance value goes up, I want to change the colour to green then back to its original colour, and red if it goes down in value. I thought I could use Angular 5 new animation aliases :increment and :decrement but I've been having problems with it.

HTML to display the points balance:

<div [@valueAnimation]="pointsBalance">{{ pointsBalance }}</div>

Code that sets the animation and the pointsBalance observable:

import { Component, OnInit, Input } from '@angular/core';
import { trigger, style, transition, animate, keyframes, query, 
    stagger, state, group } from '@angular/animations';
import { CompetitionsService } from "../../../shared/index";
@Component({
  selector: 'points',
  templateUrl: './...html',

  animations: [
    trigger('valueAnimation', [
      transition(':increment', group([
        query(':enter', [
          style({ color: 'green', fontSize: '50px' }),
          animate('0.8s ease-out', style('*'))
        ])
      ])),
      transition(':decrement', group([
        query(':enter', [
          style({ color: 'red', fontSize: '50px' }),
          animate('0.8s ease-out', style('*'))
        ])
      ]))
    ])
  ]
})
export class CompetitionDetailsComponent implements OnInit {

  pointsBalance: number;

  constructor(private competitionsService: CompetitionsService, ) { }

  ngOnInit() {

    this.competitionsService.updatePointsBalance$.subscribe(
      (pointsBalance) => {
        this.pointsBalance = pointsBalance;
      }
    )
  }
}

And when pointsBalance value changes I get this console error:

ERROR Error: Unable to process animations due to the following failed trigger transitions @valueAnimation has failed due to:

query(":enter") returned zero elements. (Use query(":enter", { optional: true }) if you wish to allow this.)

Does anyone know why I'm getting this error? Or is there another way to achieve this? Thanks.

The error message actually offers a workaround (which is nice). Did you give that a try? — R. Richards
– R. Richards, Commented Apr 8, 2018 at 14:19

Benjamin Kindle · Accepted Answer · 2019-04-21 01:26:46Z

3

the :enter animation will only animate elements that are newly created. Your "hacky" workaround works because it forces the inner span to get recreated whenever the value changes. I think what you want is to remove the :enter query. You want to animate when the number is in/decremented, and your animation has nothing to do with elements being added.

answered Apr 21, 2019 at 1:26

Benjamin Kindle

1,84415 silver badges25 bronze badges

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

2 Comments

Jose the hose Over a year ago

Hey Benjamin. Many thanks for your explanation. You are right, I want to animate as the number is in/decremented. Do you know how I can achieve this?

Benjamin Kindle Over a year ago

I think you just need to remove the enter query so it doesn't "filter" the animation to only apply to entering elements

Jose the hose · Accepted Answer · 2018-04-10 20:27:47Z

2

I found a fix from here and here.

<div [@valueAnimation]="pointsBalance"><span *ngFor="let pointsBalance of [ pointsBalance ]">{{ pointsBalance }}</span></div>

Feels a bit hacky though.

answered Apr 10, 2018 at 20:27

Jose the hose

1,89510 gold badges33 silver badges58 bronze badges

Comments

Sebastian Correa Zuluaica · Accepted Answer · 2021-02-08 15:26:35Z

2

I'm just going to paste the code as it would look, as Benjamin Kindle said, I tried it and it worked:

animations: [
    trigger('valueAnimation', [
      transition(':increment', [
          style({ color: 'green', fontSize: '50px' }),
          animate('0.8s ease-out', style('*'))
        ]
      ),
      transition(':decrement', [
          style({ color: 'red', fontSize: '50px' }),
          animate('0.8s ease-out', style('*'))
        ]
      )
    ])
  ]

answered Feb 8, 2021 at 15:26

Sebastian Correa Zuluaica

571 silver badge4 bronze badges

Collectives™ on Stack Overflow

Add animation when expression value changes - Angular 5

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related