Google Sheets as a REST API in Angular

import { ApplicationConfig } from "@angular/core";
import { provideHttpClient, withFetch } from "@angular/common/http";
 
export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient(withFetch())],
};

// src/app/models/sheet.model.ts
export interface SheetMeta {
  total: number;
  limit: number;
  offset: number;
}
 
export interface SheetResponse<T> {
  data: T[];
  meta: SheetMeta;
}

// src/app/services/sheets.service.ts
import { Injectable, inject } from "@angular/core";
import { HttpClient, HttpParams } from "@angular/common/http";
import { Observable } from "rxjs";
import { SheetResponse } from "../models/sheet.model";
 
export interface SheetQueryOptions {
  limit?: number;
  offset?: number;
  search?: string;
  sort?: string;
  fields?: string;
}
 
const BASE = "https://sheetsapi.gkit.mreshank.com/api/spreadsheets";
 
@Injectable({ providedIn: "root" })
export class SheetsService {
  private http = inject(HttpClient);
 
  query<T>(
    userKey: string,
    sheetName: string,
    opts: SheetQueryOptions = {},
  ): Observable<SheetResponse<T>> {
    let params = new HttpParams();
    if (opts.limit !== undefined) params = params.set("limit", opts.limit);
    if (opts.offset !== undefined) params = params.set("offset", opts.offset);
    if (opts.search) params = params.set("search", opts.search);
    if (opts.sort) params = params.set("sort", opts.sort);
    if (opts.fields) params = params.set("fields", opts.fields);
 
    return this.http.get<SheetResponse<T>>(`${BASE}/YOUR_USER_KEY/${sheetName}`, { params });
  }
}

// src/app/components/products/products.component.ts
import { Component, OnInit, inject, signal, computed } from "@angular/core";
import { AsyncPipe, NgFor, NgIf } from "@angular/common";
import { SheetsService } from "../../services/sheets.service";
import { Observable } from "rxjs";
 
interface Product {
  name: string;
  price: string;
  category: string;
  stock: string;
}
 
@Component({
  selector: "app-products",
  standalone: true,
  imports: [AsyncPipe, NgFor, NgIf],
  template: `
    <input placeholder="Search products…" (input)="onSearch($event)" />
 
    <ng-container *ngIf="products$ | async as resp">
      <p>{{ resp.meta.total }} products</p>
      <ul>
        <li *ngFor="let p of resp.data">{{ p.name }} - {{ p.price }} ({{ p.category }})</li>
      </ul>
    </ng-container>
  `,
})
export class ProductsComponent implements OnInit {
  private sheets = inject(SheetsService);
  products$!: Observable<{
    data: Product[];
    meta: { total: number; limit: number; offset: number };
  }>;
 
  ngOnInit() {
    this.load();
  }
 
  load(search = "") {
    this.products$ = this.sheets.query<Product>("YOUR_USER_KEY", "Products", {
      limit: 20,
      sort: "name",
      ...(search ? { search: `name:${search}` } : {}),
    });
  }
 
  onSearch(event: Event) {
    const q = (event.target as HTMLInputElement).value;
    this.load(q);
  }
}

// src/app/interceptors/auth.interceptor.ts
import { HttpInterceptorFn } from "@angular/common/http";
 
const API_KEY = "sk_your_api_key_here";
 
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.url.includes("sheetsapi.gkit.mreshank.com")) {
    const authReq = req.clone({
      setHeaders: { Authorization: `Bearer ${API_KEY}` },
    });
    return next(authReq);
  }
  return next(req);
};

import { provideHttpClient, withFetch, withInterceptors } from "@angular/common/http";
import { authInterceptor } from "./interceptors/auth.interceptor";
 
providers: [provideHttpClient(withFetch(), withInterceptors([authInterceptor]))];

import { Component, inject } from "@angular/core";
import { FormControl, ReactiveFormsModule } from "@angular/forms";
import { debounceTime, distinctUntilChanged, switchMap, startWith } from "rxjs/operators";
import { SheetsService } from "../../services/sheets.service";
 
@Component({
  standalone: true,
  imports: [ReactiveFormsModule, AsyncPipe, NgFor],
  template: `
    <input [formControl]="searchCtrl" placeholder="Search…" />
    <ul>
      <li *ngFor="let item of results$ | async | keyvalue"></li>
    </ul>
  `,
})
export class ReactiveSearchComponent {
  private sheets = inject(SheetsService);
  searchCtrl = new FormControl("");
 
  results$ = this.searchCtrl.valueChanges.pipe(
    startWith(""),
    debounceTime(300),
    distinctUntilChanged(),
    switchMap((q) =>
      this.sheets.query("YOUR_USER_KEY", "Products", {
        ...(q ? { search: `name:${q}` } : {}),
      }),
    ),
  );
}