title: angular2 data binding not working?
body: <p>So i am trying to pass <code>record</code> variable to other components.</p>
  
  <p>I have read json data using <code>http provider</code> and successfully stored it in variable name <code>record</code> using below code.
  I am facing problem while accessing this object in template of the component.
  i.e.</p>
  
  <p><strong>1.left-sidebar.component.ts</strong></p>
  
  <pre><code>import {Component, OnInit,Input} from 'angular2/core';
  import {ComponentBarComponent} from "./../component-bar/component-bar.component";
  import { DataService } from '../../../app/services/data.service';
  import {Http, Response} from 'angular2/http';
  
  @Component({
      selector: 'left-sidebar',
      directives:[ComponentBarComponent],
      providers: [DataService],
      template: `
      &lt;div style="overflow-y:auto;height:62vh;"&gt;         
          {{record | json}}  //this prints record object in json format correctly
          {{record.name}}  //but this line produces exception       
          &lt;component-bar [record]="record"&gt;&lt;/component-bar&gt; 
          //also this object is not getting passed to component-bar object.       
      &lt;/div&gt;`
  })
  
  export class LeftSidebarComponent implements OnInit {        
      public absolutePath:string;
      record:Object;
      constructor(private dataService: DataService) { 
          this.componentName="Heading";
          this.absolutePath="http://localhost:8080/src/app/lib/component-group.json";        
          this.dataService.getData(this.absolutePath)
          .subscribe((data:any[]) =&gt; {
              this.record = data;                
              console.log(this.record.name);//this prints component name correctly
          });          
      }
      ngOnInit() {        
       }
  }
  </code></pre>
  
  <p><strong>2.component-group.json</strong></p>
  
  <pre><code>{
      "name": "components",
      "desc": "components",
      "libName":"Standard",
      "components": [
          {
              "name":"HeadingComponent",
              "desc":"",
              "cmpType":"Standard",
              "imgUrl":"http://localhost:3202/uploads/ABC.png",
              "cmpLocation":"",
              "isDynamic":"true"          
          },
          {
              "name":"BodyComponent",
              "desc":"",
              "cmpType":"Standard",
              "imgUrl":"http://localhost:3202/uploads/pqr.png",
              "cmpLocation":"",
              "isDynamic":"true" 
          },
          {
              "name":"FooterComponent",
              "desc":"",
              "cmpType":"Standard",
              "imgUrl":"http://localhost:3202/uploads/erter.png",
              "cmpLocation":"",
              "isDynamic":"true" 
          }    
      ],
      "createdBy":"ABC",
      "updatedBy":"ABC"
  }
  </code></pre>
  
  <p>When I use <code>{{record | json}}</code> it prints json data correctly but when I trying to print it like <code>{{record.name}}</code> but its producing the following exception</p>
  
  <pre><code>EXCEPTION: TypeError: Cannot read property 'name' of undefined in [ 
      {{record | json}}        
      {{record.name }}           
       in LeftSidebarComponent@22:43]
  </code></pre>
  
  <p>any suggestions?
  thanks in advance </p>