Cómo hacer un INSERT en Supabase desde un proyecto Angular

Supabase es una alternativa moderna a Firebase que te permite trabajar con bases de datos PostgreSQL, autenticación, almacenamiento y más, todo con una API sencilla. En este post, aprenderás cómo conectar Angular con Supabase y realizar un INSERT de datos en una tabla.

---

📦 Requisitos previos

• Proyecto Angular ya creado (ng new mi-app)

• Cuenta y proyecto creado en Supabase

• Una tabla en Supabase (por ejemplo: clientes con columnas nombre, email)

---

1. Instalar el cliente de Supabase

Primero, instala el cliente de Supabase en tu proyecto Angular:

npm install @supabase/supabase-js

---

2. Crear un servicio Supabase en Angular

Genera un servicio:

Y edita supabase.service.ts:

import { Injectable } from '@angular/core';
import { createClient, SupabaseClient } from '@supabase/supabase-js';

@Injectable({
  providedIn: 'root'
})
export class SupabaseService {
  private supabase: SupabaseClient;

  constructor() {
    this.supabase = createClient(
      'https://TU-PROYECTO.supabase.co',
      'TU_API_KEY_PUBLICA'
    );
  }

  async insertarCliente(nombre: string, email: string) {
    const { data, error } = await this.supabase
      .from('clientes')
      .insert([{ nombre, email }]);

    if (error) {
      console.error('❌ Error insertando cliente:', error);
      throw error;
    }

    return data;
  }
}

🔐 Reemplaza 'https://TU-PROYECTO.supabase.co' y 'TU_API_KEY_PUBLICA' con tus datos reales desde [Supabase → Project Settings → API].

---

3. Usar el servicio en un componente

Edita un componente (por ejemplo app.component.ts) para probar la inserción:

import { Component } from '@angular/core';
import { SupabaseService } from './supabase.service';

@Component({
  selector: 'app-root',
  template: `
    <form (ngSubmit)="guardar()">
      <input [(ngModel)]="nombre" name="nombre" placeholder="Nombre" required />
      <input [(ngModel)]="email" name="email" placeholder="Email" required />
      <button type="submit">Guardar</button>
    </form>
  `,
  standalone: false,
})
export class AppComponent {
  nombre = '';
  email = '';

  constructor(private supabase: SupabaseService) {}

  async guardar() {
    try {
      const res = await this.supabase.insertarCliente(this.nombre, this.email);
      console.log('✅ Cliente insertado:', res);
    } catch (error) {
      console.error('❌ Error:', error);
    }
  }
}

 

No olvides importar FormsModule en app.module.ts para usar [(ngModel)].

---

Resultado

Al rellenar el formulario y hacer clic en "Guardar", se enviará la información a la tabla clientes de Supabase. Verás los datos insertados en la consola o directamente desde el dashboard web de Supabase.

---

Ventajas de usar Supabase en Angular

• API basada en SQL real (PostgreSQL).

• CRUD simple y directo.

• Se integra muy bien con Angular gracias a su cliente JavaScript.

• Puedes expandir fácilmente con autenticación, almacenamiento, etc.