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
and my page.component.ts is:-
Please suggest.
Thanks in advance.
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.