angular_fire

An unofficial library for AngularDart and Firebase.

Install
Usage
- Services
  - FirebaseAuth
- Directives
  - GoogleSignInComponent
  - IfFirebaseAuthDirective
Contributing
- Testing

Install

The current stable release of angular_fire works best with the following:

dependencies:
  angular2: ^3.1.0
  angular_fire: ^0.1.0
  firebase: ^3.1.0

To get started, you need to, at minimum, include the Firebase SDK:

<body>
  <script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>
</body>

Usage

Services

FirebaseAuth

A high-level authentication service. First setup for dependency injection:

import 'package:angular2/angular2.dart';
import 'package:angular2/platform/browser.dart';
import 'package:angular_fire/angular_fire.dart';
import 'package:firebase/firebase.dart' as sdk;
main() {
  bootstrap(AngularFireExample, <dynamic>[
    provide(
      FirebaseAuth,
      useValue: new FirebaseAuth(
        sdk.initializeApp(
          apiKey: '...',
          authDomain: '...',
          databaseURL: '...',
          storageBucket: '...',
        ),
      ),
    ),
  ]);
}

Then inject into your app and use. See GoogleSignInComponent
below for an example.

Components

GoogleSignInComponent

Displays a rendered sign in box for Google authentication that follows the
branding guidelines.

import 'package:angular2/angular2.dart';
import 'package:angular_fire/angular_fire.dart';
@Component(
  selector: 'angular-fire-example',
  directives: const [
    GoogleSignInComponent,
  ],
  template: r'''
    <google-sign-in (trigger)="signIn()">
    </google-sign-in>
  ''',
)
class AngularFireExample {
  final FirebaseAuth _auth;
  void onTrigger() {
    _auth.signIn();
  }
}

NOTE: To use this component, you must have the brand assets in your
web/assets directory, or use the [assetPath] property, or the
googleSignInAssetPath token at bootstrap time to configure the location of
your assets - for example on an external CDN.

IfFirebaseAuthDirective

Like ngIf, but shows content if the value matches the current authentication:

<div *ifFirebaseAuth="true; let currentUser = currentUser">
  Logged in as: {{currentUser.displayName}}.
  <button (click)="signOut()">Sign Out</button>
</div>
<div *ifFirebaseAuth="false">
  Waiting for sign in...
  <br>
  <google-sign-in
      (trigger)="signIn()">
  </google-sign-in>
</div>

Contributing

We welcome a diverse set of contributions, including, but not limited to:

Filing bugs and feature requests
Send a pull request
Or, create something awesome using this API and share with us and others!

For the stability of the API and existing users, consider opening an issue
first before implementing a large new feature or breaking an API. For smaller
changes (like documentation, bug fixes), just send a pull request.

Testing

Run the (simple) test suite in Dartium. It doesn’t currently run on Travis:

$ pub run angular_test -p dartium