Why do I need to include NgZone in my project?

[aquinn637]

I'm working on just a small prototype app and I want to display the FCM value on the home page of my app. For some reason to get the value to sync up in my service, I had to include NgZone. Why did I need to do that and is there something wrong with the project setup that I had to do that?

Here is my repo: https://github.com/aquinn637/FireBaseTest2

Here is a code snippet:

export class AppComponent implements OnInit {

  constructor(private appService: AppService, private ngZone: NgZone) {

  }

    ngOnInit() {
      firebase.init({

        showNotifications: true,
        showNotificationsWhenInForeground: true,

        // Optionally pass in properties for database, authentication and cloud messaging,
        // see their respective docs.
        
        onPushTokenReceivedCallback: (token) => {

          console.log('[Firebase] onPushTokenReceivedCallback:', { token });

          //TODO: set the token here
          this.ngZone.run(() => this.appService.setFCMToken(token));; // = token;

        },

[dereekb]

This is an Angular thing. Your AppComponent was unaware that any changes had occurred since the push notification's callback is run outside the Angular context.

By calling ngZone.run() you're letting your component/context know that some changes might have occurred so it can check then update the view if necessary.

https://dzone.com/articles/understanding-ngzone