Pass data from one page to another and update simultaneously

Ionic Framework ionic-v3
1

Hi, I am trying to make a button that dynamically changes the font size of an app. My button works for my current page but i’m trying to update other pages as well. I tried passing the data but that doesn’t seem to be working. Can someone please suggest a solution. Thanks in advance!

Settings.html

<!--
  Generated template for the SettingsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.

Settings.html
-->
<ion-header>

  <ion-navbar>
    <ion-title>Settings</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding [ngStyle]="{'font-size': fontSize+'em' }" id="page">
  <div id="fonttable">
    <p>Choose a Font Size</p>

    <ion-buttons>
      <button (click)="fontSizeChange(-0.2)" ion-button icon-only>
        <ion-icon name="remove"></ion-icon>
      </button>
      <button (click)="fontSizeChange(0.2)" ion-button icon-only>
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </div>
</ion-content>

Settings.ts

import { Component } from '@angular/core';
import {App, IonicPage, NavController} from 'ionic-angular';
import { SettingsProvider } from './../../providers/settings/settings';
import {StudentHomePage} from "../StudentHome/StudentHome";

/**
 * Generated class for the SettingsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-StudentSettigns',
  templateUrl: 'StudentSettigns.html',
})
export class StudentSettignsPage {

  constructor(public navCtrl: NavController, public app: App, private settings: SettingsProvider) {
    this.navCtrl.push(StudentHomePage, {
      param1: this.fontSize
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SettingsPage');
  }

  fontSize: number = 1.5; // default font size in `em`

  fontSizeChange($val: number){
    this.fontSize +=$val;
  }
}

StudentHome.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding [ngStyle]="{'font-size': fontSize+'em' }" id="page">
  <h2>Welcome!</h2>
</ion-content>

StudentHome.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NavParams } from "ionic-angular";

import { GamePage } from "../game/game";

@Component({
  selector: 'page-home',
  templateUrl: 'StudentHome.html'
})
export class StudentHomePage {
  private fontSize: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.fontSize = navParams.get('param1');
  }
}
1 Like
2

you either need to declare global variable which is not recommended or create a provider and import it in any page you want and use its functions and variables.
in your app folder create an Injectable class in a ts file, for example globals.ts and in it you caould import anything you need… and write any logic you desire

globals.ts

import { Injectable } from '@angular/core';
import . . .

@Injectable()
export class GlobalsProvider {


  	constructor(...){
         ...
  	}

  	public yourVar;
    public your func(){
    }

have it imported in your app.module.ts

import { GlobalsProvider } from "./globals";
.
.
  providers: [GlobalsProvider]

then use it in any component u need like this:

import { GlobalsProvider } from "/../app/globals";
export class News {
constructor( public globals:GlobalsProvider, ....){
.
.
}
myFunction(){
   this.globals.yourVar = 10;
}
1 Like