ng2-firebase

A rich Angular 2 wrapper library for the Firebase JavaScript SDK.

master	all

Installation

npm install --save ng2-firebase

Usage

There are two valid ways to use the library in your project:

• TypeScript
• JavaScript (ES5)

TypeScript - Demo Application

To use in your project, reference the ng2-firebase/core module:

// myfile.ts
import {FirebaseService} from 'ng2-firebase/core';

also make sure you include the Firebase JavaScript SDK:

<!-- index.html -->
<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>

Add the path to your System.config({}):

System.config({
  // ...
  defaultJSExtensions: true,
  map: {
    'ng2-firebase': 'node_modules/ng2-firebase'
  }
});

Finally, register whatever providers you need:

// boot.ts
import {provide} from 'angular2/core';
import {FirebaseService} from 'ng2-firebase/core';

// Tell TypeScript that Firebase is a global object.
declare var Firebase;

bootstrap(MyAppComponent, [
    provide(FirebaseService, {useFactory: () => new FirebaseService(new Firebase('https://YOUR-FIREBASE-URL.firebaseio.com/'))})
]);

JavaScript - Demo Application

Make sure that both the Firebase SDK and the Firebase Angular 2 Bundle are included:

<!-- index.html -->
<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
<script src="node_modules/ng2-firebase/bundles/ng2-firebase-all.umd.js"></script>

Register the provider:

// boot.js
(function (app) {
    document.addEventListener('DOMContentLoaded', function () {
        ng.platform.browser.bootstrap(app.AppComponent, [
            // TODO: Improve Injection to be modular
            //       For some reason, the modular versions break the app
            ng.core.provide(
                firebaseAngular2.FirebaseService,
                {
                    useFactory: function () {
                        new firebaseAngular2.FirebaseService(
                            new Firebase('https://fb-angular2-demo.firebaseio.com/')
                        )
                    }
                })
        ]);
    });
})(window.app || (window.app = {}));

Use in a component:

(function(app) {
    app.AppComponent = ng.core
        .Component({
            selector: 'my-app',
            template: '<h1>My First Angular App!</h1>'
        })
        .Class({
            constructor: [firebaseAngular2.FirebaseService, function(firebaseService) {
                this.firebaseService = firebaseService;
            }],
        });
})(window.app || (window.app = {}));

If you are not using a module system, then all of the exported services and classes from the ng2-firebase library are in the ng2Firebase global variable.

Demo

TypeScript and JavaScript implementations of the Angular 2 Tutorial "Tour of Heroes" application have been created at the following repository: firebase-angular2-demo.