From a4bb8b0864d531d92dd35732b3d13698a525005b Mon Sep 17 00:00:00 2001
From: mukesh51 <mukesh51@gmail.com>
Date: Sun, 18 Sep 2016 19:30:29 +0100
Subject: [PATCH] Update to Retrieve Data as Object

Trying to make the tutorial consistent for each step. As of now the "Install & setup" Page and "Retrieve Data as Object" page have lot of inconsistencies which doesn't make the tutorial go in flow. Also, the "moduleId" is causing errors and is not available in default "app.component.ts", so removing that attribute. Will clean up other pages, may be tomorrow.
---
 docs/2-retrieving-data-as-objects.md | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/docs/2-retrieving-data-as-objects.md b/docs/2-retrieving-data-as-objects.md
index 6c97d2014..489a1c8f9 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<any[]>;
   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.
@@ -46,14 +50,17 @@ const absolute = af.database.object('https://<your-app>.firebaseio.com/item');
 ### Retrieve data
 
 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.
+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: `
   <h1>{{ (item | async)?.name }}</h1>
   `,
@@ -129,8 +136,7 @@ import { Component } from '@angular/core';
 import { AngularFire, FirebaseObjectObservable } from 'angularfire2';
 
 @Component({
-  moduleId: module.id,
-  selector: 'app',
+  selector: 'app-root',
   template: `
   <h1>{{ item | async | json }}</h1>
   <input type="text" #newname placeholder="Name" />
@@ -141,7 +147,7 @@ import { AngularFire, FirebaseObjectObservable } from 'angularfire2';
   <button (click)="delete()">Delete</button>
   `,
 })
-export class RcTestAppComponent {
+export class AppComponent {
   item: FirebaseObjectObservable<any>;
   constructor(af: AngularFire) {
     this.item = af.database.object('/item');