CODEWITHSUNDEEP
angular
Vaibhav Gaurha
Vaibhav Gaurha

Reputation: 21

font size increase decrease by button using angular 7

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=" = ">

Upvotes: 1

Views: 3462

Answers (3)

Nithya Rajan
Nithya Rajan

Reputation: 4884

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>

Upvotes: 2

CapitanFindus
CapitanFindus

Reputation: 1526

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

Upvotes: 2

SiddAjmera
SiddAjmera

Reputation: 39432

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.

Upvotes: 4

Related Questions