Haw do i change the font size of all pages using ion-range in ionic 4

Hello,

How can i change font size of all pages using ion-range. this code work only in my home page
home.component.html

<ion-range min="1" max="6" snaps="true" [(ngModel)]="fontSize"> </ion-range>

home.component.ts

fontSize: number;

thank in advance for your help

At the moment, this is not possible, since all the font sizes are set independently.

A quick search would’ve brought you this page

I found the solution, I post here if it can help someone

home.component.html

<ion-grid>
<ion-row> 
      <ion-col size-sm="6" offset-sm="3">
        <ion-item>
          <ion-icon slot="start" name="resize"></ion-icon>
          <ion-range min="1" max="6"  snaps="true" [(ngModel)]="fontSize" (ionChange)="sizeMe(fontSize)">
          </ion-range>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
  <h3 [style.font-size.em]="fontSize"> Test1</h3>
  <p [style.font-size.em]="fontSize">Test</p>

home.component.ts

fontSize: number;

ngOnInit() {
    this.storage.get("Taillepolice").then((fontSize)=>{
      this.fontSize = fontSize;

    });

  }
 sizeMe(size) {

    this.storage.set("size",size);
    this.fontSizeService.setFontValue(TaillePolice);

  }

Provider fonSizeService.ts

import { Observable, Subject } from 'rxjs';

private glabalData = new Subject<any>();

  getFontValue(): Observable<any> {
      return this.glabalData.asObservable();
    }
    setFontValue(FontValue) {
      return this.glabalData.next(FontValue);
    }

Other page e.g detail.component.ts

fontSize;
this.storage.get("Taillepolice").then((fontSize)=>{
      this.fontSize = fontSize;
    });

    this.themeService.getFontValue().subscribe((TaillePolice)=>{
      this.fontSize = TaillePolice;
      console.log("Home page font size",TaillePolice);
    });

detail.component.html

<ion-content padding >
<h2 [style.font-size.em]="fontSize">Bonjour</h2>
<p [style.font-size.em]="fontSize" > Hello </p>
</ion-content>

don’t forget to import storage and your provider