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

What is the best way to implement a function on every item within a specific class?

A method for displaying information in HTML by implementing ng-repeat in AngularJS

Insert an element into a JSON collection

Adjust the background color of the dropdown menu

Add HTML content to an element within a directive and create a custom function to manipulate it locally

Issue encountered in node_modules/@ngrx/store/src/models.d.ts(58,58): TypeScript error TS2304 - Unable to locate identifier 'unknown'

Experiencing difficulties with the alignment of Bootstrap columns

The attempt to create the property 'and_ff' on the string 'and_chr 89' has failed

I have encountered an issue while utilizing dynamic form functionality in Angular 7. The error message displayed is: "Error: Cannot find control with name: 'i'"

Subheaders that stay in place while scrolling through a table with a stationary header

Issue with Jest mock function failing to trigger axios instance function causing it to return undefined

Toggle the jQuery class off when a different element is chosen

What is the method for dynamically updating and showcasing a JSON file upon the click of a button?

Is it possible to define a variable within a JavaScript function and then access it outside of the function?

Altering the status of a property in an object, at a specific position within a collection of objects, contained within another object?

Troubleshooting issue with Highcharts 3D rendering after using setState()

Angular 5 - Error: Uncaught ReferenceError: req variable is not defined

Dealing with a syntax error in JavaScript (Codecademy)

Timing issues with setInterval and setTimeout are causing them to execute at the incorrect moments

Apache causes HTML download tag to malfunction