ng add @angular/fire+ +AngularFire suaviza las asperezas que un desarrollador Angular podría encontrar al implementar el [SDK de Firebase JS] independiente del framework (https://github.com/firebase/firebase-js-sdk) y tiene como objetivo proporcionar una experiencia de desarrollo más natural al ajustarse a las convenciones de Angular. + +- **Observable based** - Usa el poder de RxJS, Angular y Firebase. +- **Realtime bindings** - Sincroniza datos en tiempo real. +- **Authentication** - Inicia sesión con una variedad de proveedores, y monitorea el estado de la autenticación. +- **Offline Data** - Almacena datos offline automáticamente con AngularFirestore. +- **Server-side Render** - Genera HTML estático para aumentar el rendimiento o crear sitios estáticos. +- **ngrx friendly** - Integre con ngrx utilizando las APIs basadas en acciones de AngularFire. +- **Manage binary data** - Carga, descarga y elimina archivos binarios como imágenes, videos y otros blobs. +- **Call server code** - LLama directamente Cloud Functions, sin servidores de por medio y pasasndo el contexto usuario automáticamente. +- **Push notifications** - Registra y escucha notifiaciones push. +- **Modular** - Incluye solo que necesitas. Ningún paquete de AngularFire sobrepasa los 4kb, la mayoria por debajo de 2kb (gzipped). + + +## Ejemplo de uso: + +```ts +import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app'; +import { getFirestore, provideFirestore } from '@angular/fire/firestore'; + +@NgModule({ + imports: [ + provideFirebaseApp(() => initializeApp({ ... })), + provideFirestore(() => getFirestore()), + ], + ... +}) +export class AppModule { } +``` + +```ts +import { Firestore, collectionData, collection } from '@angular/fire/firestore'; +import { Observable } from 'rxjs'; + +interface Item { + name: string, + ... +}; + +@Component({ + selector: 'app-root', + template: ` +
| v6 / Compat | +v7 Modular | +|
|---|---|---|
| AngularFirestore | +doc | +
+
+```ts
+import { doc } from '@angular/fire/firestore';
+doc |
+
| collection | +
+
+```ts
+import { collection } from '@angular/fire/firestore';
+collection |
+ |
| collectionGroup | +
+
+```ts
+import { collectionGroup } from '@angular/fire/firestore';
+collectionGroup |
+ |
| AngularFirestoreDocument | +set | +
+
+```ts
+import { setDoc } from '@angular/fire/firestore';
+setDoc(docRef, { ... }) // Promise |
+
+
+
| update | +
+
+```ts
+import { updateDoc } from '@angular/fire/firestore';
+updateDoc(docRef, { ... }) // Promise |
+ |
| delete | +
+
+```ts
+import { deleteDoc } from '@angular/fire/firestore';
+deleteDoc(docRef) // Promise |
+ |
| collection | +
+
+```ts
+import { collection } from '@angular/fire/firestore';
+collection |
+ |
| snapshotChanges | +
+
+```ts
+import { docSnapshots } from '@angular/fire/firestore';
+docSnapshots |
+
+
+ |
| valueChanges | +
+
+```ts
+import { docData } from '@angular/fire/firestore';
+docData |
+ |
| get | +
+
+```ts
+import { getDoc } from '@angular/fire/firestore';
+getDoc |
+ |