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