Angular Complex LinkedSignal

I have been playing with Angular Signals for a while. Recently I encountered a problem that I can fix but it felt not nice. I have a array of items and each time the count goes up, I need to show an animation (I am using plain CSS animations). So I have a WritableSignal, showAnimation, that triggers and stops the animation. Using an effect I make this reactive:

private _cartService = inject(CartService);

count = computed(() => {
return this._cartService.cartItems().reduce(
(acc, item) => acc + item.quantity, 0
);
})

previousCount = signal(0);

showAnimation = signal(false);

e = effect(() => {
const count = this.count();
untracked(() => {
if (count > this.previousCount()) {
this.showAnimation.set(true);
}
this.previousCount.set(this.count());
})
})



This effect reacts to the count being changed and sets the showAnimation to true if the new count is bigger than the old count. At last it updates the previousCount to the newer value.

This looks a lot like a linkedSignal but I cannot seem to find a beautiful implementation.

Things are way easier when I just need to react to the count changing at all:

private _cartService = inject(CartService);

count = computed(() => {
return this._cartService.cartItems().reduce(
(acc, item) => acc + item.quantity, 0
);
})

showAnimation = linkedSignal(() => {
const count = this.count();
return true;
})


Anyone a more elegant implementation?

Continue reading...