How can I toggle font size on click JavaScript / Angular

Question

There are 4 steps there:

1.) Click on category

2.) Show filtered products

3.) Select filtered products

4.) Display selected products in most right part of screen /3rd child component/

What I would like to achieve is next:

When I click on product (3rd step), product is added to 'right' component, and there I would like to change a font size of quantity so it might look like animation, like make font bigger for example 28 and make it small again for example 18.

Products are added to the 3rd component by using service which is shared between child components. This is how it looks :

Thanks guys Cheers

Answer 1

First of all, add a new rule to the order-quantity-number class:

transition: font-size 1s;

then define another selector in css:

.order-quantity-number.selected {
   font-size: 48px;
}

then basically you just need to add this 'selected' class to the span element and the font-size will be animated. After 1s (anim is completed), you need to remove the class from the element and the text will shrink. I hope it answers the question :)

EDIT: Implementation details

Template:

Add reference to the span element so that it is accessible from code

<span class="order-quantity-number" #ref>{{receiptItem.quantity}}</span>

ts:

Add the following line to the class to use 'ref' from the template.

@ViewChild('ref') elRef: ElementRef;

Add setTimeout() call to the click handler that triggers the animation to remove selected class after 1s:

onClick() {
    ...
    // 1. add 'selected' class to the span element
    this.elRef.nativeElement.classList.add('selected');

    // 2. remove it after 1s
    setTimeout(() => {
      this.elRef.nativeElement.classList.remove('selected');
    }, 1000);
}