Simpol-google-sheet NPM

About

simpol-google-sheet is an angular library for retrieving, updating data from google spread sheet.

Getting started

npm install simpol-google-sheet

Usage

Import GSheetModule

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GSheetModule } from 'simpol-google-sheet';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    GSheetModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Edit package.json and add this

package.json

  "browser": {
    "path": false,
    "os": false,
    "child_process": false,
    "fs": false
  },

Edit tsconfig and add this inside the compilerOptions

tsconfig.json

"compilerOptions": {
    ...
    "paths": {
        "crypto": [
            "node_modules/crypto-browserify"
            ],
        "stream": [
            "node_modules/stream-browserify"
            ]
        }
    ...

Put this to your index.html tag. It will get rid of errors related to accessing the global as it substitutes it with the window.

index.html

<head>
  <script>
    if (global === undefined) {
        var global = window;
    }
</script>
...
</head>

Add the following imports in your polyfills

src/polyfills.ts

import * as process from 'process';
(window as any).process = process;
import { Buffer } from 'buffer';
(window as any).Buffer = Buffer;

Add google-sheet component in the html

app.component.html

<google-sheet></google-sheet>

Add GoogleSheetService in the app component and provide credentials

app.component.ts

import { Component, OnInit } from '@angular/core';
import { GoogleSheetService } from 'simpol-google-sheet';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(private googleSheet: GoogleSheetService){
  }

  ngOnInit(): void{
        this.googleSheet.init({
          credentials: {
            client_email: '<--- GOOGLE EMAIL --->',
            private_key: '<--- GOOGLE PRIVATE KEY --->'
          },
          sheetId: '<--- GOOGLE SHEET ID --->'
        });
  }
}

Inputs of google-sheet component

Input	Type	Default	Description
editable	boolean	false	When set to true, allows cell editing and updates google spread sheet data almost in realtime

Outputs of google-sheet component

Output	Description
(itemClick)	Emits row index and row data when row is clicked

Methods of GoogleSheetService

Name	Parameter & Types	Description
getSheetByIndex(index)	index: number	Get sheet by index
getSheetByTitle(title)	title: string	Get sheet by title
loadRows(sheetIndex)	sheetIndex: number, row: any	Load rows by sheet index
addRow(sheet, row)	sheet: number or string, row: any	Add single row to the sheet
addRows(sheet, ...rows )	sheet: number or string, ...rows	Adds multiple rows
deleteRow(sheet, rowIndex )	sheet: number or string, rowIndex: number	Delete row
updateRowByField(sheet, rowIndex, fieldName, value)	sheet: number or string, rowIndex: number, fieldName: string, value: any	Update cell by using fieldname
addSheet(title)	title: string	Add new sheet to the document
setTitle(title)	title: string	Set title to the document
getData$()	none	get data as observable returns headers and rows of the sheet