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

Question

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

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));

The message listener is registered in the constructor of the AppComponent through a 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 properly receive and log all messages. However the hidden property is not set to false.

Is there some kind of digest mechanism to add in order to apply changes in an Angular (4) app on FCM message received?

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

EDIT 2:
I managed to implement a workaround by triggering a change detection using the tick method of ApplicationRef. Doesn't seem ideal though.