diff --git a/docs/1-install-and-setup.md b/docs/1-install-and-setup.md index 18fdb1583..3e7167635 100644 --- a/docs/1-install-and-setup.md +++ b/docs/1-install-and-setup.md @@ -83,7 +83,7 @@ export const firebaseConfig = { declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) -export class MyAppModule {} +export class AppModule {} ``` @@ -96,7 +96,7 @@ import { Component } from '@angular/core'; import { AngularFire, FirebaseListObservable } from 'angularfire2'; @Component({ - moduleId: module.id, + selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] @@ -118,7 +118,7 @@ import { Component } from '@angular/core'; import { AngularFire, FirebaseListObservable } from 'angularfire2'; @Component({ - moduleId: module.id, + selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] diff --git a/docs/2-retrieving-data-as-objects.md b/docs/2-retrieving-data-as-objects.md index 6c97d2014..f8c4c9a86 100644 --- a/docs/2-retrieving-data-as-objects.md +++ b/docs/2-retrieving-data-as-objects.md @@ -10,23 +10,27 @@ The guide below demonstrates how to retrieve, save, and remove data as objects. AngularFire is an injectable service, which is injected through the constructor of your Angular component or `@Injectable()` service. +If you've followed the earlier step "Installation and Setup" your `/src/app/app.component.ts` should look like below. + ```ts import { Component } from '@angular/core'; -import { AngularFire } from 'angularfire2'; +import { AngularFire, FirebaseListObservable } from 'angularfire2'; @Component({ - moduleId: module.id, - selector: 'app', - template: 'app.component.html', + selector: 'app-root', + templateUrl: 'app.component.html', styleUrls: ['app.component.css'] }) export class AppComponent { + items: FirebaseListObservable; constructor(af: AngularFire) { - + this.items = af.database.list('items'); } } ``` +In this section, we're going to modify the `/src/app/app.component.ts` to retreive data as object. + ## Create an object binding Data is retrieved through the `af.database` service. @@ -48,12 +52,15 @@ const absolute = af.database.object('https://.firebaseio.com/item'); To get the object in realtime, create an object binding as a property of your component or service. Then in your template, you can use the `async` pipe to unwrap the binding. +Replace the FirebaseListObservable to FirebaseObjectObservable in your `/src/app/app.component.ts` as below. +Also notice the templateUrl changed to inline template below: + ```ts -import {Component} from 'angular2/core'; +import {Component} from '@angular/core'; import {AngularFire, FirebaseObjectObservable} from 'angularfire2'; @Component({ - selector: 'app', + selector: 'app-root', template: `

{{ (item | async)?.name }}

`, @@ -129,8 +136,7 @@ import { Component } from '@angular/core'; import { AngularFire, FirebaseObjectObservable } from 'angularfire2'; @Component({ - moduleId: module.id, - selector: 'app', + selector: 'app-root', template: `

{{ item | async | json }}

@@ -141,7 +147,7 @@ import { AngularFire, FirebaseObjectObservable } from 'angularfire2'; `, }) -export class RcTestAppComponent { +export class AppComponent { item: FirebaseObjectObservable; constructor(af: AngularFire) { this.item = af.database.object('/item');