[SOLVED] Font size button not working

Ionic Framework ionic-v3
1

Hey,
I am currently working on a function where by clicking a button the font size gets bigger or smaller. But the font can never get bigger than 18 px and never smaller than 15 px.
Unfortunately it doesn’t work, as by clicking nothing happens…

Could someone look on my code?

This is my .ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  public size: number;
  public fontSize: any;


  constructor(public navCtrl: NavController) {

    this.size;
    this.fontSize = 15;
  }

  // increasing font size
  increaseFontSize() {
    if (this.size < 18) {
      this.size++;
      this.fontSize = "font-size-" + this.size;
    }
  }

  // increasing font size
  decreaseFontSize() {
    if (this.size > 15) {
      this.size--;
      this.fontSize = "font-size-" + this.size;
    }
  }

}

This is my .html:

<ion-header>
  <ion-navbar color="wcag_blue">
    <ion-title>Home</ion-title>

    <ion-buttons right>
      <button ion-button [class.font-size-15]="size" (click)="decreaseFontSize()">
        <ion-icon name="remove-circle" color="wcag_yellow"></ion-icon>
      </button>
    </ion-buttons>

    <ion-buttons right>
      <button ion-button [class.font-size-15]="size" (click)="increaseFontSize()">
        <ion-icon name="add-circle" color="wcag_yellow"></ion-icon>
      </button>
    </ion-buttons>

  </ion-navbar>
</ion-header>

<ion-content padding>
  <br>
  <div text-center><img src="https://png.icons8.com/ultraviolet/50/000000/treasure-map.png">
    <h3> Welcome to ABC! </h3></div>


  <ion-card>
    <ion-card-content>
      <ion-card-title>
        <div text-left>This is a really cool text</div>
      </ion-card-title>

      <p>&#10097; Test 1</p>
      <p>&#10097; Test 2</p>
      <p>&#10097; Test 3</p>

    </ion-card-content>
    <img class="displayed" width="50px" height="150px" src="/assets/imgs/home_map-image.png"/>
  </ion-card>
</ion-content>

Does anybody have an idea what I did wrong?

2

Any ideas on this ???
Please

3

Well, first I think this is sort of a ridiculous way of doing it. Why not use ngStyle instead of class, having a class or each font size seems like overkill to me.

Beyond that, you are only setting the class on the buttons themselves…so…I guess I would imagine that any text in the buttons might get bigger and smaller.

4

okay, thank your for your reply.
The only thing I don’t understand is how to increase and also decrease (limited) the font size when using ngStyle? I read the documentation and I see that this may not work?

5

Hello,
with ngStyle you can point to a variable. If you change your variable, then related css property change according to your variable.

And as rlouie said. Your <button ion-button [class.font-size-15]=“size” (click)=“increaseFontSize()”> is related to your button and not to your

Maybe this helps. https://scotch.io/tutorials/angular-2-classes-with-ngclass-and-ngstyle

Best regards, anna-liebt.