Google Sheet API in Angular2/Ionic2 gapi.client.sheet

Question

I write Angular2/Ionic2 app to show list content of google sheet. Login with Google works fine but gapi.client.sheet got undefined. What should I do to solution it or have method instead?

I installed

npm install --save @types/gapi
npm install --save @types/gapi.auth2

this is my home.html

<ion-content>
  <pre id="content"></pre>
  <button ion-button id="authorize-button" (click)="handleAuthClick()">Authorize</button>
  <button ion-button id="signout-button" (click)="handleSignoutClick()">Sign Out</button>
</ion-content>

and this is my home.ts

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

import { AlertController, App, FabContainer, ItemSliding, List, ModalController, NavController, LoadingController } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class TalentsPage {
  @ViewChild('talentList', { read: List }) talentList: List;


  constructor(
    public alertCtrl: AlertController,
    public app: App,
    public loadingCtrl: LoadingController,
    public modalCtrl: ModalController,
    public navCtrl: NavController
  ) {}

  ionViewWillEnter() {
    this.app.setTitle('Talents');
    this.updateList();
    this.handleClientLoad();
  }    

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

  initClient() {
    gapi.client.init({discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"], clientId: 'xxxx.apps.googleusercontent.com', scope: "https://www.googleapis.com/auth/spreadsheets.readonly"
    }).then(function () {
    this.listMajors();
    this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    });
  }

  updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      this.listMajors();
    } else {
      alert("doesnt sign in");          
    }
  }

  listMajors() {
        gapi.client.sheets.spreadsheets.values.get({
          spreadsheetId: 'xxxx',
          range: 'All BP!A1:R16'
        }).then(function(response) {
          var range = response.result;
          if (range.values.length > 0) {
            this.appendPre('Name, Major:');
            for (let i = 0; i < range.values.length; i++) {
              var row = range.values[i];
              // Print columns A and E, which correspond to indices 0 and 4.
              this.appendPre(row[0] + ', ' + row[4]);
            }
          } else {
            this.appendPre('No data found.');
          }
        }, function(response) {
          this.appendPre('Error: ' + response.result.error.message);
        });
    }
  appendPre(message) {
    var pre = document.getElementById('content');
    var textContent = document.createTextNode(message + '\n');
    pre.appendChild(textContent);
  }
  handleAuthClick(event) {
    alert("signin");
    gapi.auth2.getAuthInstance().signIn();
    this.listMajors();
  }
  handleSignoutClick(event) {
    alert("signout");
    gapi.auth2.getAuthInstance().signOut();
  }
}

Answer 1

I need to put this one in my .ts file

declare var gapi: any;