simpol-google-sheet

v0.1.4

Published

2 years ago

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

Downloads

0High
0Medium
0Low

weng2020

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