How to use Firebase Cloud Messaging with an existing service employee in Angular 4

Question

I have a Firebase Cloud Messaging (FCM) setup to use an existing service employee.

const messaging = firebase.messaging();
const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule)
  .then(() => registerServiceWorker('sw'))
  .then(registration => {
    console.log('[App] Successful service worker registration', registration);
    messaging.useServiceWorker(registration);
    // ...
  })
  .catch(err => console.error('[App] Service worker registration failed', err));

A message listener is registered in the AppComponent constructor through the service.

@Injectable()
export class MessagingService {
  private messaging = firebase.messaging();
  public hidden: boolean = true;

  constructor() { }

  public subscribe() {
    this.messaging.onMessage((payload: any) => {
      console.log(payload);
      this.hidden = false;
    });
  }
}

I correctly receive and register all messages. However, the hidden property is not set to false.

Is there any digest mechanism to add to apply the changes to the Angular (4) application in the FCM message?

EDIT 1:
The property will be updated as soon as I click a button or any widget on the page

EDIT 2:
I was able to implement a workaround by triggering change detection using the ApplicationRef tick method. Doesn't seem perfect though.