Toggle not displaying ngmodel on initialization

Ionic Framework ionic-v3
1

I have a simple web app where I use a firebase backend to store some user info, including if push is allowed. In my settings page I show a toggle to enable / disable the push service. When the app starts the button is always disabled, despite the fact that its ngmodel is bound to a boolean which is true.

My settingspage html looks like this:

<ion-content padding>

<ion-item>
  <ion-label color="primary">Your name</ion-label>
  <ion-input placeholder="Please add a name" (input)="onInput()" [(ngModel)]="global.participantName"></ion-input>
</ion-item>

<ion-item>
  <ion-label color="primary">Receive notifications</ion-label>
  <ion-toggle (ionChange)="onAllowPush()" [(ngModel)]="global.allowPush"></ion-toggle>
</ion-item>
{{global.allowPush}}
    
</ion-content>

global is a singleton that looks like this:

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

@Injectable()
export class Global {
  public participantName:String;
  public allowPush: boolean = true; /* Indicates wether the user allows push (only for settings purpose, will be handled with subscriptions */
}

The input (which uses the global object as well) works correctly and “{{global.allowPush}}” displays “true”. I build this workarround which also works:

settings.ts:

	ionViewDidLoad() {
		if (this.global.allowPush){
			setTimeout(() => {this.global.allowPush = true;}, 10)
		}
	}

Can you advice on how to make my toggle to display the correct state?

2