Update global variable in all views

@Lovit wrote:

I'm working on an app that the user can change the app colour, for this I'm using a global.ts for declaring the variables and in a popover I have the options to change the colours.

global.ts

	export const Global = Object.assign({
		cPrimary: 'primary',
		cPrimaryBlue: 'primaryBlue',
		cLight: 'light',
		cDark: 'dark',
		mainColor: 'dark'
	});

event-popover.ts

	import { Global } from './../../app/global';
	import { EventPage } from './../event/event';
	import { Component } from '@angular/core';
	import { NavController, NavParams, ViewController } from 'ionic-angular';

	@Component({
	selector: 'page-event-popover',
	templateUrl: 'event-popover.html',
	})
	export class EventPopoverPage {

        constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) {
		}

		changeColor(c){
			if (c = 'light'){
				Global.mainColor = Global.cLight;
				console.log(Global.mainColor);
			}
		}
	}

event-popover.html

		<ion-col>
		    <button ion-button="dot" class="dot-light" (click)="changeColor('light')"></button>
		</ion-col>

One of the views that need change the colour:
event.ts

	import { Global } from './../../app/global';

	@Component({
		selector: 'page-event',
		templateUrl: 'event.html',
	})
	export class EventPage {
		public color = Global.mainColor;
    }

event.html

	<ion-header>
		<ion-navbar color="{{color}}">
			<ion-title>Home Event</ion-title>
			<button ion-button icon-only (click)="eventPopover($event)" color="none" item-right><ion-icon name="md-menu" color="light"></ion-icon></button>
		</ion-navbar>
	</ion-header>

My function changeColor() is working on change the value of the Global.mainColor but isn't updating the variable on the views... What is missing?

Posts: 1

Participants: 1

Read full topic