Angular 2 + Firebase: Base de Datos

En el post anterior vimos como utilizar Firebase en nuestra aplicación con Angular 2 y cómo autenticarnos. En este post vamos a ver cómo podemos utilizar la base de datos en tiempo real de Firebase:

1) Creamos nuestro servicio (mocks.service.ts)

import { Injectable } from '@angular/core';
import {Mock} from './mock';

import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Injectable()
export class MocksService {
  fo: FirebaseListObservable;

  constructor(private af: AngularFire) {
    this.fo = this.af.database.list('/mocks');
  }

  getMocks() {
    return this.fo;
  }

  addMock(mock: Mock) {
    this.fo.push(mock);
  }
}

2) Utilizamos el servicio

import { Component, OnInit } from '@angular/core';
import {MocksService} from '../mocks.service';
import {FirebaseListObservable} from "angularfire2";

@Component({
  ...
})
export class ListComponent implements OnInit {
  mocks: FirebaseListObservable;

  constructor(private mocksService : MocksService) {}

  ngOnInit() {
    this.mocks = this.mocksService.getMocks();
  }

}

En el html, podemos hacer lo siguiente:

  

  ...