@ponceca/firestore-angular

Angular 19+ adapter para @ponceca/firestore-sdk — Signal-First, SSR-Ready, Zoneless.

Instalación

npm install @ponceca/firestore-sdk @ponceca/firestore-angular

Quick Start

1. Configuración (app.config.ts)

import { provideFirebaseApp } from '@ponceca/firestore-angular/app';
import { provideAuth } from '@ponceca/firestore-angular/auth';
import { provideFirestore } from '@ponceca/firestore-angular/firestore';
import { provideStorage } from '@ponceca/firestore-angular/storage';
import { initializeApp } from '@ponceca/firestore-sdk';
import { getFirestore } from '@ponceca/firestore-sdk/firestore';
import { getAuth } from '@ponceca/firestore-sdk';
import { getStorage } from '@ponceca/firestore-sdk/storage';
import { environment } from '../environments/environment';

export const appConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth((app) => getAuth(app)),
    provideFirestore((app) => getFirestore(app)),
    provideStorage(() => getStorage(initializeApp(environment.firebase))),
  ],
};

2. Signals (Recomendado Angular 19+)

import { docSignal, collectionSignal } from '@ponceca/firestore-angular/firestore';
import { authStateSignal, isLoggedInSignal } from '@ponceca/firestore-angular/auth';

@Component({
  template: `
    @if (isLoggedIn()) {
      <h1>{{ user().data?.name }}</h1>
      @for (item of items().data; track item.id) {
        <p>{{ item.name }}</p>
      }
    }
  `,
})
export class MyComponent {
  isLoggedIn = isLoggedInSignal();
  user = docSignal<User>('users/uid123');
  items = collectionSignal<Item>('items');
}

3. Observables (RxJS)

import { docData, collectionData } from '@ponceca/firestore-angular/firestore';
import { user, idToken } from '@ponceca/firestore-angular/auth';

@Injectable({ providedIn: 'root' })
export class DataService {
  private db = injectFirestore();
  private auth = injectAuth();

  user$ = user(this.auth);
  products$ = collectionData<Product>(collection(this.db, 'products'));
}

4. Auth Guards

import { authGuard, redirectUnauthorizedTo } from '@ponceca/firestore-angular/auth';

const routes: Routes = [
  {
    path: 'dashboard',
    canActivate: [authGuard],
    data: { authGuardPipe: redirectUnauthorizedTo('/login') },
    component: DashboardComponent,
  },
];

5. Storage

import { injectStorage, ref, uploadBytesResumable, uploadTaskObservable } from '@ponceca/firestore-angular/storage';

const storage = injectStorage();
const task = uploadBytesResumable(ref(storage, 'uploads/file.pdf'), blob);
uploadTaskObservable(task).subscribe(snap => console.log(snap.bytesTransferred));

6. SSR Hydration

import { provideFirestoreHydration } from '@ponceca/firestore-angular/ssr';

// En server config
providers: [provideFirestoreHydration()]

Módulos

| Entry Point | Contenido | |-------------|-----------| | @ponceca/firestore-angular/app | provideFirebaseApp, FIREBASE_APP, injectApp | | @ponceca/firestore-angular/auth | Providers, guards, signals, observables, core re-exports | | @ponceca/firestore-angular/firestore | Providers, signals, resources, observables, core re-exports | | @ponceca/firestore-angular/storage | Providers, upload observable/signal, download signal | | @ponceca/firestore-angular/ssr | Hydration, serialization | | @ponceca/firestore-angular/search | Search signal, search observable |

Compatibilidad

| Dependencia | Versión mínima | |-------------|---------------| | Angular | 19.0.0 | | @ponceca/firestore-sdk | 1.0.0 | | RxJS | 7.8.0 |

Documentación Completa

📘 Ver sdk/DOCUMENTACION.md

Licencia

MIT — © 2026 ponceca