How to change the font size of all pages using Ionic 3’s Range?

Question

I have the following html code [Settings.html]

<ion-item>
    <ion-range min="1" max="4" step="1" snaps="true" [(ngModel)]="saturation" color="grey">
         <ion-label range-left style="font-size: 12px;">A</ion-label>
         <ion-label range-right style="font-size: 20px;">A</ion-label>
    </ion-range>
</ion-item>

How to change the font size of all pages dynamically in the Settings.ts file by dragging the range?

Answer 1

You can use an event that sends the variable to all pages that are being accessed. something like this: in the app.compoenent

import { Events } from 'ionic-angular';

constructor(public events: Events) {}

function changeFont(font) {
  events.publish('font:change', font);
}

Then in your compoenent you put

public font:any;
    events.subscribe('font:change', (font) => {
       this.font = font
    });

and in your template view can be in body, content what encompass the whole project you put

style="font-size:{font}px"

with adaptations to your project, should work