To change the text font size on button click events and vice versa

Ionic Framework ionic-v3
1

Hi,
I need to change the font size of a page components on a button click event.
The idea is basically to have a zoom in/out feature to read the contents,in much readable format.
Need to switch between 2 different font sizes,one is default and the other is much bigger,in the click event.

Any suggestion is appreciable.

Thanks,

2

So you have a regular page, and within that page you have one or more components, and you would like the text in those components to be larger or smaller based on what is set?

Just want to make sure I have my facts right.

3

There are many ways to do this, but if this is related to accessibility in general, it should, I think, tie into accessibility settings the user has set in his/her device
https://ionicframework.com/docs/native/mobile-accessibility/ and not be completely independent of it - see usePreferredTextZoom(). Also note the setTextZoom() APIs.

That being said, if you want something custom, you can always use ngClass around your text area.

If you are looking for animations, I don’t recall if mobile-accesbility also shows an animation effect. I like using animate.css as opposed to angular animate but several folks here seem to like angular animate because it ties into your code logic better.

4

hi @Judgewest2000,
I don’t have any components.I just have some text,for ex. news article.I need to implement a button in that page which enable to set the font size bigger,from the default value,and vice versa with the help of the same button.

Thanks,

5

hi @pliablepixels,
Thanks for the reply.
I will definitely update you after implementing your suggestion.

Thanks,

6

Howdy…

Here’s a really quick repo demonstrating font size toggler.

Let me know if useful or not.

7

@Judgewest2000, I’ve long been curious as to the effect placing a function above a component’s constructor has as opposed to below the constructor. Is there a significant difference, or just a matter of style or preference?

8

Personal preference. Makes zero difference. The constructor will not be called wherever it is till the class its in (and all its functions) are established.

I tend to put variables above and functions beneath the constructor - didn’t in this case, not for any particular reason - was just knocking it up quickly to help.

9

Figured so, but not 100%. Thanks ya. I vaguely recall a time I put a function above the constructor ( I think I was using Ionic Stripe in an app, and it was a stripe related function) and my app kept rebooting every time I executed it. It would literally just restart at the home screen.

I then moved it below the constructor and voila, no more reboots. Perhaps a case of creating it before I declared stripe? But as you say it shouldn’t matter.

I also was very new to Ionic, and may have had a related function ALSO written below the constructor. Obviously bad form, but I was unaware at the time. But, food for thought. Or it’s a false memory.

10

Nay a function below the constructor is fine.

In yesterday javascript is was important pre classes.

so…

var somefunc = function(){
   sayHello();
   var sayHello = function(){
      alert('hello');
   }
}

would fail.

11

This I know. I meant to imply that at a point in the past, I was putting functions above AND below the constructor, they interacted with each other based on my design at the time, and weird results ensued.

Totally could’ve been some confounding factor causing the weirdness, but it happened nonetheless

12

Hi @Judgewest2000,
Great suggestion. It woked for me.
Thanks :star_struck: