DOCSEARCHbyAlgolia
Submit Docs

AngularFire Documentation

repository·main·Indexed 27 days ago

https://github.com/angular/angularfire

Official Angular library for the Firebase JS SDK, providing integrations for Cloud Firestore, Authentication, Analytics, Cloud Functions, Cloud Messaging, Cloud Storage, Performance Monitoring, Realtime Database, Remote Config, App Check, and AI Logic. It conforms to Angular conventions using Dependency Injection, RxJS Observables, and Zone.js wrappers. Includes guidance on deploying server-rendered apps via Firebase App Hosting and configuring SSR authentication.

Tokens
89.9K
Snippets
223
Records
496
Agent score
90%

What's inside AngularFire

  1. Overview of AngularFire features

    main

    AngularFire is the official library for Angular and Firebase. It provides a developer experience that conforms to Angular conventions by offering:

    • Dependency Injection: Firebase services can be provided and injected directly into Angular components.
    • Zone.js wrappers: Ensures stable zones for proper functionality of service workers, forms, SSR, and pre-rendering.
    • Observable-based API: Uses RxJS instead of callbacks for handling real-time data streams.
    • NgRx friendly API: Includes action-based APIs designed for integration with NgRx.
    • Lazy-loading: Dynamically imports Firebase modules to reduce initial application load time.
    • Deploy schematics: Allows deploying Angular applications to Firebase Hosting via CLI commands.
    • Google Analytics: Provides built-in Angular Router awareness for Google Analytics.
    • Router Guards: Includes built-in Firebase Authentication checks to guard Angular routes.

  2. Use the compatibility version of Remote Config

    main

    The AngularFireRemoteConfig class provides a compatibility layer for the Firebase Remote Config SDK. It includes convenience observables, pipes, and a promisified version of the standard Firebase Remote Config methods.

    Note: This is the compatibility version. For the modern, tree-shakable API, refer to the main AngularFire documentation and the v7 upgrade guide.

  5. Understand State-based vs. Action-based collection methods

    main

    AngularFirestore collection methods are categorized into two types:

    1. State-based methods: These return the current state of your collection "as-is". For example, .valueChanges() returns an array of JSON data representing the current contents of the collection. If an item is updated, the method returns the new state of the collection.

    2. Action-based methods: These return "what happened" in your collection (e.g., specific change events like additions, removals, or modifications).

  6. Upgrade to AngularFire 7.0

    main

    To upgrade to AngularFire 7.0, ensure you are using Angular 12 and the Firebase JS SDK v9. AngularFire 7.0 requires an Ivy-enabled application. You can perform the upgrade using the Angular CLI.

    Note: The existing v6 API surface has moved to @angular/fire/compat/*.

    `ng update @angular/fire`

  7. Update FirebaseListObservable to AngularFireList<T>

    main

    In AngularFire 5.0, afDb.list() no longer returns a FirebaseListObservable. It now returns an AngularFireList<T>. To stream data from an AngularFireList, you must explicitly call one of its observable methods, such as .valueChanges().

    // 5.0 approach
constructor(afDb: AngularFireDatabase) {
  afDb.list<Item>('items').valueChanges().subscribe(console.log);
}

  8. Setup Cloud Firestore in Angular

    main

    To use Cloud Firestore, first ensure @angular/fire is added to your project using the Angular CLI. Then, configure the Firestore provider in your app.config.ts using provideFirestore and getFirestore. Finally, inject the Firestore instance into your components using Angular's inject function.

    ng add @angular/fire
    import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideFirestore(() => getFirestore()),
    ...
  ],
  ...
}

// In your component
import { Component, inject } from '@angular/core';
import { Firestore } from '@angular/fire/firestore';

@Component({ ... })
export class UserProfileComponent {
    private firestore = inject(Firestore);
    ...
}