@fabien0102/angularfire2

AngularFire2

The official library for Firebase and Angular 2

Status: Beta

What is AngularFire2?

• Observable based - Use the power of rxjs, Angular 2, and Firebase.
• Realtime bindings - Synchronize database collections as objects or lists.
• Authentication - Monitor authentication state in realtime.

Quick links

Contributing

Plunker Template - Requires to set your Firebase credentials in app.module.ts.

Install

npm install firebase angularfire2 --save

Example use:

import {Component} from '@angular/core';
import {AngularFire, FirebaseListObservable} from 'angularfire2';

@Component({
  selector: 'project-name-app',
  template: `
  <ul>
    <li *ngFor="let item of items | async">
      {{ item.name }}
    </li>
  </ul>
  `
})
export class MyApp {
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
}

Developer Guide

If you want to get started quickly on building with AngularFire2, check out our 5 step developer guide that will teach you everything you need to know to be productive with AngularFire2.

1. Installation & Setup
2. Retreiving data as objects - FirebaseObjectObservable
3. Retreiving data as lists - FirebaseListObservable
4. Querying lists
5. User Authentication - FirebaseAuthentication

Changelog

2.0.0-beta.5 (2016-09-15)

Bug Fixes

• docs: Remove @next install (5984a99)
• docs: typos (197026a)
• docs: Update for beta.4 (f2d5ba5)
• docs: Update for beta.4 (b347e16)
• firebase_*_factory.js: Fix calls to off() which inadvertently cancel all listeners on the path (#469) (b4fb281), closes #443
• package: Version number (986685a)

Features

• utils: Add $exists method to AFUnwrappedSnapshot (#471) (f67aab1)
• upgrade to RC7 (#505) (2410b2d)

BREAKING CHANGES

The way this project is packaged has changed to be consistent with other Angular packages. Previously:

• The project just consisted of CommonJS modules, with angularfire2.js as the main entry point.
• The project provided an es6 directory which contained es2015 modules and es2015 JS
• Package.json included main and jsnext:main fields, pointing to angularfire2.js and es6/angularfire2.js, respectively.

Now:

• The project ships ES2015 modules with ES5 JS at the root, as well as an ES5 UMD bundle at bundles/angulafire2.umd.js
• The main field of package.json points to bundles/angularfire2.umd.js.
• Instead of jsnext:main, we're using the module field of package.json to point to index.js.
• Instead of angularfire2.js being the main entry point, an index.js has been added (though angulafire2.js hasn't changed significantly).

If you're using Rollup or Webpack, they should just work with this new setup (please open issues if not). If using SystemJS, you should be able to add format: 'esm' inside of the packages configuration, and it should load and parse the es2015 modules correctly.

The addition of the umd bundle will also make it possible to use AngularFire2 in a <script> tag, such as in a plunker or JSBin. The library is exported on a global called angularFire2.

<a name="2.0.0-beta.4"></a>