Using Google API in Angular 2/TypeScript

Question

A previous question here got me most of the way (hopefully) to getting this working, but I can't seem to get a Google API working from TypeScript. I'm basically following this example: https://developers.google.com/api-client-library/javascript/samples/samples

I'm not seeing an error, the method to run the API call just isn't getting fired.

I've installed the typings for gapi and gapi.auth. initClient() doesn't throw any errors, it just never seems to complete. The current user is signed in as a Google user, but not authorized for the API call yet. That's the next thing I was going to deal with, but right now the call isn't even being made. As you can see below, I added a logging line at the beginning of the method that isn't being called.

initGapiClient() {
    gapi.load('client:auth2', this.initClient);
  }

  initClient() {
    gapi.client.init({
      apiKey: '',
      discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'],
      clientId: 'xxxxxx.apps.googleusercontent.com',
      scope: 'https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.readonly'
    }).then(function () {
      // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus);

      // Handle the initial sign-in state.
      this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    });
  }

  updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      this.listPlaylists();
    } else {
      alert("Can't sign in");          
    }
  }

  listPlaylists() {
    console.log("Called listPlaylists");
    ... 
    API call here
    ... 
  }

Answer 1

Change

.then(function () {
      // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus);

      // Handle the initial sign-in state.
      this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    });

to

.then(()=> {
      // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus.bind(this));

      // Handle the initial sign-in state.
      this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    });

if you use function your this will not refer to your component and passing a function as a parameter like .listen(this.updateSigninStatus); will also make the outer this to be binded to this function.

I suggest you to read: How to access the correct `this` context inside a callback?