How to enlarge font size of text on button click

Ionic Framework ionic-v3
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