Ionic 2 control font size from UI

admin

Administrator
Staff member
I am in between a mobile App development and there is a requirement where an end user can click +/- sign to increase or decrease the font size.

I have done it for many time for web using JQuery/JavaScript but not sure how can I manage it here.

My post.html

Code:
 <ion-header>
    <ion-navbar>
        <button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-buttons>
          <button (click)="fontSizeChange()" class="details_btn  blicon-text-file-font" ion-button icon-only>
          </button>
        </ion-buttons>      
    </ion-navbar>
</ion-header>
<ion-content class="post" *ngIf="post">
    <div class="detail">
        <div class="detail_image">
            <h1>{{post.title.rendered}}</h1>
        </div>
        <div class="page_info">
          <span class="date"><span class="blicon-clock"></span> {{post.date | date: 'mediumDate'}} </span> 
          <span class="tag"> News</span>
        </div>  
        <ion-item *ngIf="authorData && authorData.avatar_urls">
            <ion-avatar item-left>
                <img [src]="authorData.avatar_urls[96]">
            </ion-avatar>
            <h2>{{authorData.name}}</h2>
        </ion-item>
        <div id="fontControl">
            <p padding [innerHtml]="post.content.rendered"></p>
        </div>
    </div>
<!-- detail -->

</ion-content>

and my page.component.ts is:-

Code:
import { Component, ViewChild } from '@angular/core';
import { Content, NavParams, LoadingController, ToastController } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@Component({
    selector: 'post-detail',
    templateUrl: './wordpress-post.html'
})
export class WordpressPost {
    @ViewChild(Content) content: Content;

    post: any;
    authorData: any;
    comments = [];
    favoritePosts: any;
    user: any;

    constructor(
            private navParams: NavParams,
            private loadingController: LoadingController,
            private toastController: ToastController,
            private storage: Storage
        ) {
        if (navParams.get('post')) {
            this.post = navParams.get('post');
            }
        }

    }

    fontSizeChange(){
         var s = document.getElementById('fontControl').style.fontSize;
         console.log(s);
         var p = s.split('px');
         var z = parseInt(p[0]) + 1;
         document.getElementById('fontControl').style.fontSize = z + "px";
         console.log(document.getElementById('fontControl').style.fontSize);
    }
}

Please suggest.

Thanks in advance.