Увеличение анимации не срабатывает

Question

Я пытаюсь увеличить круг, когда переменная увеличивается.

Но анимация никогда не сработает
Я продолжаю таким образом:

animations: [
    trigger('popAnimation', [
      state('closed', style({ transform: 'translateX(100%)' })),
      state('open', style({ transform: 'translateX(0%)' })),
      transition('* => *', animate(300)),
    ]),
    trigger('counterChange', [
      state(':increment', style({ transform: 'scale(1.8)' })),
      transition('* => *', animate(300)),
    ])
  ],

Для приращения переменной

bag.products.reduce((prev, product) => this.numberOfProducts = prev + product.quantities, 0);

И в HTML Я использую таким образом:

    <div class="row">
      <div class="col-12 d-flex align-items-md-center justify-content-center">
        <div class="circle"
             [@counterChange]="numberOfProducts">
          {{numberOfProducts}}
        </div>
      </div>
    </div>

Я не могу понять ошибку.

ОБНОВЛЕНИЕ:

---

Проблема была решена, Я меняю подход. Анимация не запускалась с приращением, поэтому при запуске reduce я установил переменную для state анимации, а в setTimeout установил другое состояние.

trigger('counterChange', [
      transition(`${AnimationShoppingBag.Clicked} => *`,
        (
          animate(400, keyframes([
            style({ transform: 'scale(1.8)' }),
            style({ transform: 'rotate(45deg)' }),
            style({ transform: 'rotate(-45deg)' })
          ]))
        )),
    ])

this.animationShoppingBag = AnimationShoppingBag.Clicked;
      setTimeout(() => {
        this.animationShoppingBag = AnimationShoppingBag.End;
        bag.products.reduce((prev, product) => this.numberOfProducts = prev + product.quantities, 0);
      }, 600);