Home

Awesome

AngularFire

AngularFire smooths over the rough edges an Angular developer might encounter when implementing the framework-agnostic Firebase JS SDK & aims to provide a more natural developer experience by conforming to Angular conventions.

<strong><pre>ng add @angular/fire</pre></strong>

Example use

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideFirestore(() => getFirestore()),
    ...
  ],
  ...
})
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',
  standalone: true,
  template: `
  <ul>
    @for (item of (item$ | async); track item) {
      <li>
        {{ item.name }}
      </li>
    }
  </ul>
  `
})
export class AppComponent {
  item$: Observable<Item[]>;
  firestore: Firestore = inject(Firestore);

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

Polyfills

Neither AngularFire nor Firebase ship with polyfills. To have compatibility across a wide-range of environments, we suggest the following polyfills be added to your application:

APIEnvironmentsSuggested PolyfillLicense
Various ES5+ featuresSafari < 10core-js/stableMIT
globalThisChrome < 71<br>Safari < 12.1<br>iOS < 12.2<br>Node < 12globalThisMIT
ProxySafari < 10proxy-polyfillApache 2.0
fetchSafari < 10.1<br>iOS < 10.3cross-fetchMIT

Resources

Quickstart - Get your first application up and running by following our quickstart guide.

Contributing

Stackblitz Template - Remember to set your Firebase configuration in app/app.module.ts.

Upgrading to v7.0? Check out our guide.

Sample apps

We have three sample apps in this repository:

  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?

Get help on our Q&A board, the official Firebase Mailing List, the Firebase Community Slack (#angularfire2), the Angular Community Discord (#firebase), Gitter, the Firebase subreddit, or Stack Overflow.

NOTE: While relatively stable, AngularFire is a developer preview and is subject to change before general availability. Questions on the mailing list and issues filed here are answered on a <strong>best-effort basis</strong> by maintainers and other community members. If you are able to reproduce a problem with Firebase <em>outside of AngularFire's implementation</em>, please file an issue on the Firebase JS SDK or reach out to the personalized Firebase support channel.

Developer Guide

This developer guide assumes you're using the new tree-shakable AngularFire API, if you're looking for the compatibility API you can find the documentation here.

See the v7 upgrade guide for more information on this change..

Firebase product integrations

<table> <tr> <td>

Analytics

import { } from '@angular/fire/analytics';
</td> <td>

Authentication

import { } from '@angular/fire/auth';
</td> </tr> <tr> <td>

Cloud Firestore

import { } from '@angular/fire/firestore';
</td> <td>

Cloud Functions

import { } from '@angular/fire/functions';
</td> </tr> <tr> <td>

Cloud Messaging

import { } from '@angular/fire/messaging';
</td> <td>

Cloud Storage

import { } from '@angular/fire/storage';
</td> </tr> <tr> <td>

Performance Monitoring

import { } from '@angular/fire/performance';
</td> <td>

Realtime Database

import { } from '@angular/fire/database';
</td> </tr> <tr> <td>

Remote Config

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

App Check

import { } from '@angular/fire/app-check';
</td> </tr> <tr> <td>

Vertex AI

import { } from '@angular/fire/vertexai-preview';
</td> </tr> </table>