Over a million developers have joined DZone.

Putting it All Together: Ionic 2, AngularFire 2, and Firebase 3

DZone 's Guide to

Putting it All Together: Ionic 2, AngularFire 2, and Firebase 3

A simple step-by-step guide to get these three technologies to work together.

· Mobile Zone ·
Free Resource
  1. Create a new Ionic 2 project:
    ionic start example-ionic blank --v2
  2. Install Firebase 3 and AngularFire 2:
    cd example-ionicnpm install angularfire2 firebase —save
  3. In app.ts:
    import {Component} from '@angular/core';
    import {Platform, ionicBootstrap} from 'ionic-angular';
    import {StatusBar} from 'ionic-native';
    import {HomePage} from './pages/home/home';
    import {
    } from 'angularfire2';
    const COMMON_CONFIG = {
        apiKey: "YOUR_API_KEY",
        authDomain: "YOUR_FIREBASE.firebaseapp.com",
        databaseURL: "https://YOUR_FIREBASE.firebaseio.com",
        storageBucket: "YOUR_FIREBASE.appspot.com"
        template: '<ion-nav [root]="rootPage"></ion-nav>',
        providers: [
    export class MyApp {
        rootPage: any = HomePage;
    constructor(platform: Platform) {
        platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
  4. In home.ts:
    import {Component} from '@angular/core';
    import {NavController} from 'ionic-angular';
    import {
    } from 'angularfire2';
        templateUrl: 'build/pages/home/home.html'
    export class HomePage {
        item: FirebaseObjectObservable<any>;
        constructor(private navCtrl: NavController, af: AngularFire) {
            this.item = af.database.object('/item');
  5. In home.html:
                Ionic Blank
    <ion-content padding>
        The world is your oyster.
                {{ (item | async)?.name }}
  6. In your firebase console, make sure have an object under /item with a “name” property. This is what we load in our example code above.
  7. Test by running the app:
    ionic serve
ionic ,firebase ,angular

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}