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

28/5/2025

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:

`ng generate service supabase```

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: `    Guardar  `, 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.

Publicado originalmente en modestocabraldev.com.

Compartir artículo

Si te ha resultado útil, compártelo con alguien que esté construyendo su portfolio.