How do I let angular know a custom window event has been fired and requires update checking

Question

I'm using a third-party library that requires me to implement my own event listener. This is done by implementing window.onGoogleYoloLoad = function() { ... }. I tried to implement it like this in my user service file:

@Injectable()
export class UserService {
    public userCredentials = new EventEmitter<Credentials>();
    constructor(){
        window.onGoogleYoloLoad = function(credentials){
            this.userCredentials.emit(credentials);
        }
    }
}

Then I subscribed to the event. The subscribers do get notified, but the view does not get updated. It's like angular doesn't know the event happened.

Answer 1

The callback is running outside the Angular zone. Move the callback to a component and call ChangeDetectorRef.detectChanges

import { Component, ChangeDetectorRef } from '@angular/core';

@Component(...)
export class MyComponent {
    public userCredentials = new EventEmitter<Credentials>();
    constructor(
        private cd: ChangeDetectorRef,
        private userService: UserService
    ){
        window.onGoogleYoloLoad = function(credentials){
            this.userService.userCredentials.emit(credentials);
            this.cd.detectChanges();
        }
    }
}

---

Re-entering the Angular zone is another option: What's the difference between markForCheck() and detectChanges()

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

@Injectable()
export class UserService {
    public userCredentials = new EventEmitter<Credentials>();
    constructor(private zone: NgZone){
        window.onGoogleYoloLoad = function(credentials){
            this.zone.run(() => {
                this.userCredentials.emit(credentials);
            })
        }
    }
}