font size increase decrease by button using angular 7

Question

Trying to do increment and decrement font size of the entire page of the angular app. The search function in angular but not find any solution can anyone tell me how to do this with below function

$(document).ready(function(){        
       var originalSize = $('div').css('font-size');         
      // reset        
       $(".resetMe").click(function(){           
      $('div').css('font-size', originalSize);         
       });

       // Increase Font Size          
       $(".increase").click(function(){         
      var currentSize = $('div').css('font-size');         
      var currentSize = parseFloat(currentSize)*1.2;          
      $('div').css('font-size', currentSize);         
      return false;          
      });        

       // Decrease Font Size       
       $(".decrease").click(function(){        
       var currentFontSize = $('div').css('font-size');        
       var currentSize = $('div').css('font-size');        
       var currentSize = parseFloat(currentSize)*0.8;        
       $('div').css('font-size', currentSize);         
       return false;         
       });         
     });

Can any tell me how I add this on angular 7

<input type="button" class="increase" value=" + ">
      <input type="button" class="decrease" value=" - "/>
      <input type="button" class="resetMe" value=" = ">

You should never include jQuery in an Angular app. Doing so is bad practice. — Vikas
– Vikas, Commented Jul 2, 2019 at 9:39
ok, I will try to avoid jquery as much as possible .. thanks :) — Vaibhav Gaurha
– Vaibhav Gaurha, Commented Jul 2, 2019 at 10:21

SiddAjmera · Accepted Answer · 2019-07-02 09:39:15Z

You should NOT use jQuery in Angular as far as possible. There's an Angular Way of doing this.

You can get access to the HTML Content using ViewChild. You can then access the style property on the nativeElement. This style property is of type CSSStyleDeclaration and has all the CSS Style Properties on it. Just change it from there.

Here, give this a try:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  fontSize = 14;
  @ViewChild('para', { static: true }) para: ElementRef;

  changeFont(operator) {
    operator === '+' ? this.fontSize++ : this.fontSize--;
    (this.para.nativeElement as HTMLParagraphElement).style.fontSize = `${this.fontSize}px`;

  }
}

And in the template:

<p #para>
  Start editing to see some magic happen :)
</p>

<button (click)="changeFont('+')">+</button>
<button (click)="changeFont('-')">-</button>

Here's a Working Sample StackBlitz for your ref.

CapitanFindus · Accepted Answer · 2019-07-02 09:47:17Z

maybe you should go for a full Angular solution, without requiring jQuery, which is actually useless for this kind of things.

Anyway, this is the component code

const DEFAULT_FONT_SIZE = 16;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  fontSize: number;

  constructor(){
    this.fontSize = DEFAULT_FONT_SIZE;
  }

  decrease(){
    this.fontSize = (this.fontSize * 0.8);
  }

  increase(){
    this.fontSize = (this.fontSize * 1.2);
  }

  reset(){
    this.fontSize = DEFAULT_FONT_SIZE;
  }
}

as you can see I'm setting a DEFAULT_FONT_SIZE, useful for the reset part, and I'm not modifying CSS, because of this HTML

<p [style.fontSize.px]="fontSize">
  Start editing to see some magic happen :)
</p>
<button type="button" (click)="increase()">
  Increase
</button>
<button type="button" (click)="decrease()">
  Decrease
</button>
<button type="button" (click)="reset()">
  Reset
</button>

as you can see the font size is being binded to Angular with style binding on px value (you can use which format you like)

So it simply becomes like this:

<p [style.fontSize.px]="fontSize">
  Start editing to see some magic happen :)
</p>

Check this out
https://stackblitz.com/edit/angular-mqj9et

Nithya Rajan · Accepted Answer · 2019-07-02 09:50:41Z

2

You can use angular built-in attribute directive [ngStyle] to do the trick.

[ngStyle] is used to add/remove CSS style properties based on the expression.

In your component.ts. declare a fontSize variable, based on the button click increase/decrease the value;

fontSize = 14;

changeFontSize(isIncrement) {
  fontSize = (isIncrement) ? fontSize++ : fontSize--;
}

In your component HTML, [ngStyle] accepts an object as an input value which has key-value pairs, the key is the CSS property name and value is the property value.

<p [ngStyle]={'fontSize': fontSize + 'px'}>
  Hello, font size test.
</p>

<button (click)="changeFontSize(true)">Increase</button>
<button (click)="changeFontSize(false)">Decrease</button>

edited Jul 2, 2019 at 9:50

answered Jul 2, 2019 at 9:45

Nithya Rajan

4,93422 silver badges34 bronze badges

Collectives™ on Stack Overflow

font size increase decrease by button using angular 7

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related