@angular/fire

ng add @angular/fire

• Dependency injection - Provide and Inject Firebase services in your components
• Zone.js wrappers - Stable zones allow proper functionality of service workers, forms, SSR, and pre-rendering
• Observable based - Utilize RxJS rather than callbacks for realtime streams
• NgRx friendly API - Integrate with NgRx using AngularFire's action based APIs.
• Lazy-loading - AngularFire dynamically imports much of Firebase, reducing time to load your app
• Deploy schematics - Get your Angular application deployed on Firebase Hosting with a single command
• Google Analytics - Zero-effort Angular Router awareness in Google Analytics
• Router Guards - Guard your Angular routes with built-in Firebase Authentication checks

Example use

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

@NgModule({
  imports: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideFirestore(() => getFirestore()),
  ],
  ...
})
export class AppModule { }

import { inject } from '@angular/core';
import { Firestore, collectionData, collection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

interface Item {
  name: string,
  ...
};

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of item$ | async">
      {{ item.name }}
    </li>
  </ul>
  `
})
export class AppComponent {
  item$: Observable<Item[]>;
  firestore: Firestore = inject(Firestore);

  constructor() {
    const itemCollection = collection(this.firestore, 'items');
    this.item$ = collectionData(itemCollection);
  }
}

Polyfills

Resources

Sample apps

1. samples/compat a kitchen sink application that demonstrates use of the "compatibility" API
2. samples/modular a kitchen sink application that demonstrates the new tree-shakable API
3. samples/advanced the same app as samples/modular but demonstrates more advanced concepts such as Angular Universal state-transfer, dynamically importing Firebase feature modules, and Firestore data bundling.

Having troubles?

NOTE: AngularFire is maintained by Googlers but is not a supported Firebase product. Questions on the mailing list and issues filed here are answered on a best-effort basis by maintainers and other community members. If you are able to reproduce a problem with Firebase outside of AngularFire's implementation, please file an issue on the Firebase JS SDK or reach out to the personalized Firebase support channel.

Developer Guide

Firebase product integrations

<td>

Analytics

import { } from '@angular/fire/analytics';

<td>

Authentication

import { } from '@angular/fire/auth';

<td>

Cloud Firestore

import { } from '@angular/fire/firestore';

<td>

Cloud Functions

import { } from '@angular/fire/functions';

<td>

Cloud Messaging

import { } from '@angular/fire/messaging';

<td>

Cloud Storage

import { } from '@angular/fire/storage';

<td>

Performance Monitoring

import { } from '@angular/fire/performance';

<td>

Realtime Database

import { } from '@angular/fire/database';

<td>

Remote Config

import { } from '@angular/fire/remote-config';

<td>

App Check

import { } from '@angular/fire/app-check';

Deploying your site

• Deploy to Firebase Hosting
• Angular Universal: Deploy to Cloud Functions
• Angular Universal: Deploy to Cloud Run