@angular/fire

What is @angular/fire?

@angular/fire is the official Angular library for Firebase. It provides a set of AngularFire modules that enable Angular applications to interact with Firebase services such as Firestore, Authentication, Storage, and more. This library simplifies the integration of Firebase with Angular applications, offering reactive and declarative APIs.

What are @angular/fire's main functionalities?

Firestore

This feature allows you to interact with Firestore, a NoSQL database provided by Firebase. The code sample demonstrates how to retrieve a collection of items from Firestore and subscribe to changes in real-time.

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

constructor(private firestore: AngularFirestore) {}

getItems() {
  return this.firestore.collection('items').valueChanges();
}

Authentication

This feature enables authentication functionalities such as signing in, signing out, and managing user sessions. The code sample shows how to sign in a user using email and password.

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

constructor(private afAuth: AngularFireAuth) {}

login(email: string, password: string) {
  return this.afAuth.signInWithEmailAndPassword(email, password);
}

Storage

This feature allows you to interact with Firebase Storage, which is used for storing and serving user-generated content such as images and videos. The code sample demonstrates how to upload a file to Firebase Storage.

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

constructor(private storage: AngularFireStorage) {}

uploadFile(filePath: string, file: File) {
  const fileRef = this.storage.ref(filePath);
  return fileRef.put(file);
}

Realtime Database

This feature provides access to Firebase Realtime Database, a cloud-hosted NoSQL database that allows data to be stored and synchronized in real-time. The code sample shows how to retrieve a list of items from the Realtime Database.

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

constructor(private db: AngularFireDatabase) {}

getItems() {
  return this.db.list('items').valueChanges();
}

Analytics

This feature enables the use of Firebase Analytics to log events and track user interactions within your application. The code sample demonstrates how to log a custom event.

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

constructor(private analytics: AngularFireAnalytics) {}

logEvent(eventName: string, eventParams: any) {
  this.analytics.logEvent(eventName, eventParams);
}

Other packages similar to @angular/fire

firebase

The 'firebase' package is the official Firebase JavaScript SDK. It provides comprehensive access to Firebase services but lacks the Angular-specific integrations and reactive APIs provided by @angular/fire. Developers using Angular would need to manually integrate Firebase services and manage state updates.

reactfire

The 'reactfire' package is the official Firebase library for React. It offers similar functionalities to @angular/fire but is tailored for React applications. It provides hooks and components to easily integrate Firebase services with React's component-based architecture.

vuefire

The 'vuefire' package is the official Firebase library for Vue.js. It provides bindings to integrate Firebase services with Vue.js applications, similar to how @angular/fire integrates with Angular. It offers Vue-specific features such as directives and plugins.

README

AngularFire

The official library for Firebase and Angular

What is AngularFire?

• Observable based - Use the power of RxJS, Angular, and Firebase.
• Realtime bindings - Synchronize data in realtime.
• Authentication - Log users in with a variety of providers and monitor authentication state in realtime.
• Offline Data - Store data offline automatically with AngularFirestore.
• ngrx friendly - Integrate with ngrx using AngularFire's action based APIs.

Quick links

Contributing

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

Upgrading to v5.0? Check out our guide.

Having troubles? Get help on the Firebase Mailing List (offically supported), the Firebase Community Slack (look for the #angularfire2 room), Gitter, or Stack Overflow.

Install

npm install firebase @angular/fire --save

Example use:

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of items | async">
      {{ item.name }}
    </li>
  </ul>
  `
})
export class MyApp {
  items: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.items = db.collection('items').valueChanges();
  }
}

Developer Guide

Getting started

• Installation & Setup

Interacting with your database(s)

Firebase offers two cloud-based, client-accessible database solutions that support realtime data syncing. Learn about the differences between them in the Firebase Documentation.

Cloud Firestore

AngularFirestore allows you to work with Cloud Firestore, the new flagship database for mobile app development. It improves on the successes of Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than Realtime Database.

• Documents
• Collections
• Querying Collections
• Offline data

Realtime Database

AngularFireDatabase allows you to work with the Realtime Database, Firebase's original database. It's an efficient, low-latency solution for mobile apps that require synced states across clients in realtime.

• Objects
• Lists
• Querying lists

Authenticate users

• Getting started with Firebase Authentication

Upload files

• Getting started with Cloud Storage

Universal

• Server-side Rendering with Universal

Deploy to Firebase Hosting

• Deploying AngularFire to Firebase Hosting

Ionic

• Installation and Setup with Ionic CLI
• Using AngularFire with Ionic 2
• Using AngularFire with Ionic 3