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 {FirebaseModule} 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'
  }
});

Register the FirebaseModule in your root module:

// app.module.ts
import {NgModule} from '@angular/core';
import {FirebaseModule} from 'ng2-firebase/core';

@NgModule({
    imports: [
        // ... other dependencies
        FirebaseModule.forRoot({ url: 'https://myfirebaseurl.firebase.io' })
        // ... other dependencies
    ]
})
export class AppModule {}

Then use it in your component:

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

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular App!</h1>'
})
export class AppComponent {
    constructor(private firebase: FirebaseService) { }
}

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:

// app.module.js
(function (app) {
    app.AppModule =
        ng.core.NgModule({
            imports: [ ng2Firebase.FirebaseModule.forRoot({ url: 'https://myfirebaseurl.firebase.io' }) ]
        })
        .Class({
            constructor: function() {}
        });
})(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: [ng2Firebase.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: ng2-firebase-demo.