title: angular properties not synchronised with view
body: <p>I am using angular 9.1.13 and ionic 6.13.1.</p>
  <p>My use case is I want to navigate from my app to phone native settings and view the value of these settings in my app with a toggle button when I come back to my app.</p>
  <p>When I come back in my app the value of my settings is not updated into the view. If I click on a element of the view, the value is updated. Same goes if I navigate back and forth into the view manually.</p>
  <p>I tried back and forth navigation into the component, but I end up with navigation history duplicate.
  I tried reloading the page with js but I lost track of the previous page visited.
  I tried running the code updating my variable into a zone but I got the same result.</p>
  <p>my page:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormBuilder, Validators } from '@angular/forms';
  import { AuthService } from 'src/app/services/auth.service';
  import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';
  import { Platform } from '@ionic/angular';
  import { Router } from '@angular/router';
  import { NotificationService } from '../../../services/notification.service';
  import { OnesignalService } from '../../../services/onesignal.service';
  
  @Component({
    selector: 'app-notifications',
    templateUrl: './notifications.page.html',
    styleUrls: ['./notifications.page.scss'],
  })
  export class NotificationsPage implements OnInit {
  
    form: FormGroup;
    prefs: any;
    isNotificationActivated: boolean;
    constructor(
      private onesignalService: OnesignalService,
      private notificationService: NotificationService,
      private router: Router,
      private platform: Platform,
      private openNativeSettings: OpenNativeSettings,
      private fb: FormBuilder,
      private auth: AuthService,
    ) {
  
      platform.resume.subscribe ( (e) =&gt; {
        this.notificationService.setIsNotificationActivated();
        onesignalService.setBackendNotificationStatus(this.isNotificationActivated);
      });
    }
  
  ngOnInit() {
      this.notificationService.isNotificationActivated.subscribe( (status) =&gt; {
        this.isNotificationActivated = status;
      });
      this.auth.notificationPrefs()
        .subscribe((data) =&gt; {
          this.prefs = data;
          this.setPrefs();
          this.notificationService.setIsNotificationActivated();
        });
    }
  ...
  }
  </code></pre>
  <p>my service:</p>
  <pre><code>import { Injectable, Output, EventEmitter } from '@angular/core';
  import { Diagnostic } from '@ionic-native/diagnostic/ngx';
  
  @Injectable({
    providedIn: 'root'
  })
  export class NotificationService {
  
      constructor( private diagnostic: Diagnostic){}
  
      @Output() isNotificationActivated = new EventEmitter&lt;boolean&gt;();
  
      setIsNotificationActivated(){
          this.diagnostic.isRemoteNotificationsEnabled().then((success) =&gt; {this.isNotificationActivated.emit(success); })
          .catch((err) =&gt; {console.log(err); });
        }
  
  }
  
  </code></pre>
  <p>and my html:</p>
  <pre><code>&lt;ion-header&gt;
    &lt;ion-toolbar&gt;
      &lt;ion-buttons slot=&quot;start&quot;&gt;
        &lt;ion-back-button text=&quot;&quot; color=&quot;light&quot;&gt;&lt;/ion-back-button&gt;
      &lt;/ion-buttons&gt;
      &lt;ion-title&gt;Notifications&lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content class=&quot;ion-padding-top&quot;&gt;
    &lt;ion-card&gt;
      &lt;ion-item class=&quot;toggle&quot;&gt;
        &lt;ion-label class=&quot;ion-text-wrap&quot;&gt;Autoriser les notifications&lt;/ion-label&gt;
        &lt;ion-toggle (click)=&quot;openNativeSetting()&quot; [checked]='isNotificationActivated'&gt;&lt;/ion-toggle&gt;
      &lt;/ion-item&gt;
    &lt;/ion-card&gt;
  &lt;/ion-content&gt;
  </code></pre>