Service events do not affect the template correctly

Question

Auth on google, use Angular2.

Firstly, in HTML, I load the google api library:

//index.html
//...
<script> 
       var googleApiClientReady = function() {
          ng2Gauth.googleApiClientReady(gapi);
      }
    </script>    
    <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
//...

After the Angular2 service, I process google authentication data and throw an event to tell the component if the google api is ready:

//google auth service .ts
import {Injectable, EventEmitter} from 'angular2/core';

@Injectable()
export class GoogleAuthService {

    isGoogleApiReady: EventEmitter<boolean>;

    constructor() {
        window['ng2Gauth'] = this; //is it correct way?
        this.isGoogleApiReady = new EventEmitter;       
    }
    //it fires from outside of Angular scope
    public googleApiClientReady(gapi){
        this.gapi.auth.init( () => { 
            this.isGapiReady.emit(true);
        })
    };
//...

Here, in the component, I check the box or lock the buttons, and make other template materials.

//gauth component
import {Component} from 'angular2/core';
import {GauthService} from './gauth.service';

@Component({
    selector: 'gauth',
    template: `<input type="checkbox" [(ngModel)]="isReady"> Api ready

export class GauthComponent {
    constructor (private _gauthService:GauthService) {
        _gauthService.isGoogleApiReady.subscribe( (flag) =>   this.gapiOnReady(flag) )

  public isReady = false
  gapiOnReady(flag: boolean) { //it fires, 
    this.isReady = true;       //but not affect on template correctly
    console.log('gapi loaded') 
    this._gauthService.checkAuth();     
  }
}

Everything seems to work, but there is a strange error in browsers (Chrome, FF) - if the page loads on the active tab of the browser - it seems nothing happens - checkbox there are no checks, if I open other tabs while the browser loads the page, everything is in order .

How to fix it? Is this an Angular bug, or am I doing it wrong?

Answer 1

NgZone zone.run(), , API, Angular ,

var googleApiClientReady;
constructor(private zone: NgZone) {
} 

public googleApiClientReady(gapi){          
  zone.run(function () { 
    this.gapi.auth.init( () => { 
        this.isGapiReady.emit(true);
    })
  });
}  

gapiOnReady(flag: boolean) {
  zone.run(function() {
    this.isReady = true;       //but not affect on template correctly
    console.log('gapi loaded') 
    this._gauthService.checkAuth();   
  });
}