How to enlarge font size of text on button click

Ionic Framework ionic-v3
1

Hi,

I’m using ionic 3 and want to enlarge font size of text on a button click. But button is inside popover.

But it is not working.

Here is my code.

Popover.html

<ion-list>
  <button (click)="changeFontSize(-0.2)" ion-button icon-only>
    <ion-icon name="remove"></ion-icon>
  </button>
  <button (click)="changeFontSize(0.2)" ion-button icon-only>
    <ion-icon name="add"></ion-icon>
  </button>
</ion-list>

Popover.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ViewController } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-popover',
  templateUrl: 'popover.html',
})
export class PopoverPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PopoverPage');
  }

  //Change Font Size
  textEle: any;

  ngOnInit() {
    if (this.navParams.data) {
      this.textEle = this.navParams.data.textEle;
    }
  }

  changeFontSize(direction: string) {
    this.textEle.style.fontSize = direction;
  }

}

ContentPage.html

<div #popoverText class="test">
    <div class="inner-text">Demo Text Here</div>
</div>

ContentPage.ts

import { Component, ElementRef, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { PopoverController} from 'ionic-angular';
import { PopoverPage } from '../popover/popover';


@IonicPage()
@Component({
  selector: 'page-content',
  templateUrl: 'content-page.html',
})
export class ContentPage {

  @ViewChild('popoverText', {read: ElementRef}) text: ElementRef;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public popoverCtrl: PopoverController
  ) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ContentPage');
  }
  
  //Open Popover
  presentPopover(ev: UIEvent) {
    let popover = this.popoverCtrl.create(PopoverPage, {
      textEle: this.text.nativeElement
    });
    popover.present({
      ev: ev
    });

    //On Popover Close
    popover.onDidDismiss(data => {
      console.log("Test");
    });

    
  }


}
2

Hi,

Why not just use CSS3 transform?

Apply font-size to transform when hover.

3

Hello,

maybe you can use css property for font-size.
With button click you change a property inside a .ts
With ngstyle you bind it in html to your element.
For access from anywhere you can use a shared provider.

best regards, anna-liebt

4

Hi,

I didn’t get it.

Need help regarding my issue. Everything works fine. No error but the problem is that on click font size of content doesn’t change.

5

Hello,

If you made it with ngstyle please check your quotation marks. The link provide example of ngstyle with fontsize.

[ngStyle]="{ 'color': getRandomColor(), 'font-size': font_size, 'background-color': background_color }"> I would be styled with different colors dynamically </div>

‘font-size’: is your css property, font_size is your property in your .ts. font_size must accessable from your html. So if you click your button, you must change your property font_size. The rest do angular for you.

If these doesn’t help, then please show your related code.

best regards, anna-liebt

1 Like
6

Here’s something I put together real quick. Not sure if it fits best-practices, but it works.

In Popover Component

import { Component } from '@angular/core';

@Component({
  selector: 'popover-page',
  templateUrl: 'popover-page.html'
})
export class PopoverPageComponent {
isLarge: boolean; <-- //the boolean that determines whether the text isLarge 
  text: string;

  constructor() {
    this.text = 'Hello World';
    this.isLarge = false; <-- //initialize it to false
  }

  // this function toggles isLarge
  makeLarge(){
   if (this.isLarge) {
     this.isLarge = false;
     return;
   }
   if (!this.isLarge) {
     this.isLarge = true;
     return;
   }
  }
}

in Popover HTML, bind the isLarge boolean to what you want to modify with makeLarge()

<div>                                      
  <button ion-button [class.large]="isLarge" (click)="makeLarge()">Largify</button>
  {{text}}
</div>

in App.scss (where popover css has to be handled)

.popover-content .large {
    font-size: 20px !important;
}

That makes the text of the button large. If you want to make the {{text}} Large, place it in something, an ion-label or ion-item, even a <p [class.large]="isLarge">{{text}}</p> should work.

FYI, [class.large] can be anything. [class.huge], [class.tiny]

.popover-content .huge {
  font-size: 50px !important;
}

.popover-content .tiny {
  font-size: 2px !important;
}

So, your App.scss would look like this if you haven’t modified it yet

// http://ionicframework.com/docs/theming/


// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

.popover-content .large {
    font-size: 20px !important;
}
1 Like