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 |