angular_fire

An unofficial library for AngularDart and Firebase.

pub package Build Status

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';
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:

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

Libraries

angular_fire