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.
- Offline Data - Store data offline automatically with AngularFirestore.
- Server-side Render - Generate static HTML to boost perceived performance or create static sites.
- ngrx friendly - Integrate with ngrx using AngularFire's action based APIs.
- Manage binary data - Upload, download, and delete binary files like images, videos, and other blobs.
- Call server code - Directly call serverless Cloud Functions with user context automatically passed.
- Push notifications - Register and listen for push notifications
- Modular - Include only what's needed. No AngularFire package is above 3kb with most under 2kb (gzipped).

#### 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 (officially supported), the Firebase Community Slack (look for the #angularfire2 room), Gitter, or Stack Overflow.

Install

``bash
npm install firebase @devsantisolutions/angular-fire --save
`

Example use:

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

@Component({
selector: 'app-root',
template:

• 
  {{ item.name }}
  


})
export class MyApp {
items: Observable;
constructor(db: AngularFirestore) {
this.items = db.collection('items').valueChanges();
}
}
`

Developer Guide

$3

- Installation & Setup

$3

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

$3

- Getting started with Firebase Authentication
- Route users with AngularFire guards

$3

- Getting started with Cloud Storage

$3

- Getting started with Firebase Messaging

$3

- Getting started with Performance Monitoring

$3

- Getting started with Callable Functions

$3

> Firebase Hosting is production-grade web content hosting for developers. With Hosting, you can quickly and easily deploy web apps and static content to a global content delivery network (CDN) with a single command.

- Deploy your application on Firebase Hosting

#### Server-side rendering

> Angular Universal is a technology that allows you to run your Angular application on a server. This allows you to generate your HTML in a process called server-side rendering (SSR). Angularfire is compatible with server-side rendering; allowing you to take advantage of the Search Engine Optimization, link previews, the performance gains granted by the technology, and more. Learn more about Angular Universal.

- Getting started with Angular Universal
- Deploying your Universal application on Cloud Functions for Firebase
- Prerendering your Universal application

$3

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