database.md

AngularFire ❱ Developer Guide ❱ Realtime Database

Realtime Database

Store and sync data with our NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline.

The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to every connected client. When you build cross-platform apps with our iOS, Android, and JavaScript SDKs, all of your clients share one Realtime Database instance and automatically receive updates with the newest data. Learn more about the Realtime Database.

Dependency Injection

As a prerequisite, ensure that AngularFire has been added to your project as described in the Quickstart.

Provide a Database instance in the application's app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideDatabase, getDatabase } from '@angular/fire/database';

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

Next inject Database into your component:

import { Component, inject } from '@angular/core';
import { Database } from '@angular/fire/database';

@Component({...})
export class DepartmentComponent {
  private database = inject(Database);
  ...
}

Firebase API

AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.

Just change your imports from import { ... } from 'firebase/database' to import { ... } from '@angular/fire/database' and follow the official documentation.

Getting Started | API Reference

Convenience observables

AngularFire provides observables to allow convenient use of the Realtime Database with RXJS.

object

The object() function creates an observable that emits object changes.

function	object(ref)
params	ref: Reference
return	Observable<QueryChange>

objectVal

The objectVal function creates an observable that emits an array of object values, optionally with a mapped key.

function	objectVal(query, options?)
params	query: Reference|Query, options?: { keyField?: string }
return	Observable<T>

list

The list() function creates an observable that emits a sorted array for each child event change. The optional events parameter will filter which child events populate the array.

function	list(ref, options?)
params	ref: Reference|Query, options?: { events?: ListenEvent[] }
return	Observable<QueryChange[]>

listVal

The listVal() function creates an observable that emits an object mapped to its value, and optionally its key.

function	listVal(query, options?)
params	ref: Reference|Query, options?: { keyField?: string }
return	Observable<T | null>

stateChanges

The stateChanges() function creates an observable that emits each time a change occurs at the reference or query passed. This is useful for tracking the changes in your list. The optional events parameter will filter which child events populate the array.

It emits only on child events, which an empty list never produces, so it does not hold the application unstable and a server render does not wait for it. Use list() when the render should wait for a list's initial contents.

function	stateChanges(ref, options?)
params	ref: Reference|Query, options:? { events?: ListenEvent[] }
return	Observable<QueryChange>

auditTrail

The auditTrail() function creates an observable that emits the entire state trail. This is useful for debugging or replaying the state of a list in your app. The optional events parameter will filter which child events populate the array.

Like stateChanges(), it waits for child events, so it does not hold the application unstable and a server render does not wait for it.

function	auditTrail(ref, options?)
params	ref: Reference|Query, options?: { events?: ListenEvent[] }
return	Observable<QueryChange[]>

fromRef

The fromRef() function creates an observable that emits reference changes.

With ListenEvent.value it holds the application unstable until the first value is emitted, so a server render waits for the data. With a child event it does not, because it may never emit.

function	fromRef(ref, event)
params	ref: Reference|Query, event: ListenEvent
return	Observable<QueryChange>

Connecting to the emulator suite

import { ApplicationConfig } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { connectDatabaseEmulator, getDatabase, provideDatabase } from '@angular/fire/database';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideDatabase(() => {
      const database = getDatabase();
      connectDatabaseEmulator(database, 'localhost', 9000);
      return database;
    }),
  ]
}

Working with multiple instances

import { ApplicationConfig } from '@angular/core';
import { provideFirebaseApp, FirebaseApp, initializeApp } from '@angular/fire/app';
import { getDatabase, provideDatabase } from '@angular/fire/database';

const DATABASE_SHARD_URLS = [
  'https://FOO.firebaseio.com',
  'https://BAR.firebaseio.com',
  'https://BAZ.firebaseio.com',
];

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideDatabase((app: FirebaseApp) => getDatabase(app, DATABASE_SHARD_URLS[0])),
    provideDatabase((app: FirebaseApp) => getDatabase(app, DATABASE_SHARD_URLS[1])),
    provideDatabase((app: FirebaseApp) => getDatabase(app, DATABASE_SHARD_URLS[2])),
  ]
}

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

constructor(databases: DatabaseInstances) {
 // databases => Database[]
}