Status: In-Development
The recommended way to take advantage of the AngularFire library is to use the injectable AngularFire service.
import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {Observable} from 'rxjs/Observable'; import {FIREBASE_PROVIDERS, defaultFirebase, AngularFire} from 'angularfire2'; import {Question} from './services/question'; @Component({ template:` <ul> <li *ngFor="#question of questions | async"> {{question.text}} </li> </ul> ` }) class App { questions:Observable<Question[]> constructor(af:AngularFire) { // Get an observable of a synchronized array from <firebase-root>/questions this.questions = af.list('/questions'); } } bootstrap(App, [ // Common injectable providers from the AngularFire lib FIREBASE_PROVIDERS, // Tell AngularFire the base URL for the Firebase used throughout defaultFirebase('https://<some-firebase>.firebaseio.com') ]);
Contains all AngularFire provider configuration for Angular's dependency injection.
Type: any[]
Usage:
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
import {FIREBASE_PROVIDERS} from 'angularfire2';
bootstrap(App, FIREBASE_PROVIDERS);
Define the root url for the library, to resolve relative paths.
Type: string
Usage:
import {bootstrap} from 'angular2/platform/browser';
import {FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2';
bootstrap(App, [
FIREBASE_PROVIDERS,
defaultFirebase('https://my.firebaseio.com')
]);
Injectable symbol to create a Firebase reference based on
the url provided by FirebaseUrl.
Type: Firebase
Usage:
import {Inject} from 'angular2/core';
import {FirebaseRef} from 'angularfire2';
...
class MyComponent {
constructor(@Inject(FirebaseRef) ref:Firebase) {
ref.on('value', this.doSomething);
}
}
URL for the app's default Firebase database.
Type: string
Usage:
import {bootstrap} from 'angular2/platform/browser';
import {Inject} from 'angular2/core';
import {FirebaseUrl, FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2';
@Component({
selector: 'app',
template: `<a [href]="url">{{ url }}</a>`
})
class App {
constructor(@Inject(FirebaseUrl) public url: string) {}
}
bootstrap(App, [
FIREBASE_PROVIDERS,
defaultFirebase('https://my.firebaseio.com')
]);
Injectable service for managing authentication state. It currently only supports reading auth state.
Type: class FirebaseAuth extends ReplaySubject<FirebaseAuthState>
Usage:
import {FirebaseAuth} from 'angularfire2'; @Component({ selector: 'auth-status', template: ` <div *ng-if="auth | async">You are logged in</div> <div *ng-if="!(auth | async)">Please log in</div> ` }) class App { constructor (@Inject(FirebaseAuth) public auth: FirebaseAuth) {} }
Subclass of rxjs Observable which also has methods for updating
list-like Firebase data.
type: class
additional methods:
add:(val) => void: Add an element to the Firebase ref.