Is there a way to change the font size with a click in JavaScript or Angular?

Question

Is there a way to change the font size with a click in JavaScript or Angular?

Here is a breakdown of the 4 steps:

1.) Begin by clicking on a category

2.) The filtered products will be displayed

3.) Select the desired products from the filter

4.) Once selected, the products will appear in the rightmost part of the screen within the 3rd child component

The goal is to have an interactive experience where clicking on a product (in step 3) triggers its addition to the 'right' component and initiates a font size animation. For example, increasing the font size to 28 and then reducing it back to 18.

The service used for adding products to the 3rd component is shared among the child components, facilitating this functionality.

Thank you all for your help!

javascript html css angular

Answer 1

Answer №1

To start, insert a fresh guideline into the order-quantity-number category:

transition: font-size 1s;

Next, establish an additional selector in your stylesheet:

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

Afterwards, simply assign the 'selected' class to the span element and watch the font size smoothly change. Upon completion of the animation after 1 second, remove the class from the element for the text to revert back. I trust this addresses your inquiry :)

UPDATE: Instructions for Implementation

Template:

Incorporate a reference to the span element for convenient access within the code.

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

ts:

Add the following line to utilize 'ref' from the template within the class.

@ViewChild('ref') elRef: ElementRef;

Integrate a setTimeout() invocation inside the click handler to initiate the animation by removing the selected class after a duration of 1 second:

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

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

Answer 2

To start, insert a fresh guideline into the order-quantity-number category:

transition: font-size 1s;

Next, establish an additional selector in your stylesheet:

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

Afterwards, simply assign the 'selected' class to the span element and watch the font size smoothly change. Upon completion of the animation after 1 second, remove the class from the element for the text to revert back. I trust this addresses your inquiry :)

UPDATE: Instructions for Implementation

Template:

Incorporate a reference to the span element for convenient access within the code.

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

ts:

Add the following line to utilize 'ref' from the template within the class.

@ViewChild('ref') elRef: ElementRef;

Integrate a setTimeout() invocation inside the click handler to initiate the animation by removing the selected class after a duration of 1 second:

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

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

Answer 3

Answer №2

If you want to create a simple @Directive that implements the AfterViewInit interface, you can add a class with a larger font-size and then watch for the transitionend event to remove the class.

Here is an example of how to do this:

@Directive({
    selector: `[fontAnimation]`
})
export class FontAnimationDirective implements AfterViewInit {
    constructor(
        private hostElement: ElementRef
    ) { }

    ngAfterViewInit() {
        const el = this.hostElement.nativeElement as HTMLElement;
        el.classList.add('animate-font-size');
        el.addEventListener('animationend', (ev: TransitionEvent) => {
            if (ev.propertyName == 'font-size') {
                el.classList.remove('animation-font-size');
            }
        })
    }
}

Keep in mind that transitionend will trigger events for every property with a transition, so make sure to check if the propertyName is equal to font-size.

All you have to do now is create the appropriate css class and don't forget to import it into the correct NgModule.

Answer 4

If you want to create a simple @Directive that implements the AfterViewInit interface, you can add a class with a larger font-size and then watch for the transitionend event to remove the class.

Here is an example of how to do this:

@Directive({
    selector: `[fontAnimation]`
})
export class FontAnimationDirective implements AfterViewInit {
    constructor(
        private hostElement: ElementRef
    ) { }

    ngAfterViewInit() {
        const el = this.hostElement.nativeElement as HTMLElement;
        el.classList.add('animate-font-size');
        el.addEventListener('animationend', (ev: TransitionEvent) => {
            if (ev.propertyName == 'font-size') {
                el.classList.remove('animation-font-size');
            }
        })
    }
}

Keep in mind that transitionend will trigger events for every property with a transition, so make sure to check if the propertyName is equal to font-size.

All you have to do now is create the appropriate css class and don't forget to import it into the correct NgModule.

Is there a way to change the font size with a click in JavaScript or Angular?

Answer №1

Answer №2

Similar questions

generate code to automatically output the content of a website

Tips for extracting information from JSON data in the provided API example

Is there a way to link multiple GET requests and combine their results into an array in JavaScript/Node?

Leveraging Selenium for extracting data from a webpage containing JavaScript

When the click event is triggered, the second function guess() does not execute

Encountering the identical error message while attempting to execute my application: "Uncaught TypeError: this.microservicesModule.register is not a function."

Is there a way for me to retrieve the locator value of a webelement?

AngularJS does not support the use of $(this) syntax

When I try to expand the width of a div, the display property set to inline

Tips for expanding the width of an image when employing position:relative

Unravel JSON using JavaScript on the web

Using Javascript to send key codes to an HTML <textarea> element

Having trouble getting Vue to properly focus on an input field

Trouble with Background Image Display in Internet Explorer 8

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8

Issue with JSONP success function not being triggered

Ways to automatically display the date upon loading the view

The deployment on heroku encountered an error during the build process

Showing error messages in Angular when a form is submitted and found to be invalid

Error message: "Unable to locate HTML container when trying to create a child element in am