title: angular2: value not showing in the view - undefined
body: <p>So I am having a component and a service.... the service makes an API call and populates component's variable (this.data)</p>
  
  <p>on the component side all works well, console.log on the strategic places always returns value... it's pretty straight forward</p>
  
  <p>when I want to display the data (let's say just {{data.name}} in the View, I get an error... Cannot read property 'name' of undefined</p>
  
  <p>this error is actually printed out before console.logs that I put in my service calls.... so I reckon it doesn't wait for calls to come back...</p>
  
  <pre><code>import { Component, OnInit }            from '@angular/core';
  import { Router, ROUTER_DIRECTIVES  }   from '@angular/router';
  import { Index, IndexColumn }           from '../index';
  import { IndexService }                 from '../index.service';
  
  import { Pipe, PipeTransform } from '@angular/core';
  
  
  @Pipe({name: 'ex'})
  export class StringifyPipe implements PipeTransform {
      transform(value: any): string {
          return JSON.stringify(value);
      }
  }
  
  
  @Component({
      moduleId: module.id,
      selector: 'app-index',
      template: require('./indicesDetails.component.html'),
      styleUrls: [String(require('./indicesDetails.component.less'))],
      providers: [IndexService],
      pipes: [StringifyPipe]
  })
  
  export class IndicesDetailsComponent implements OnInit  {
      errorMessage: string;
      index: Index;
      mode = 'Observable';
  
      constructor (private indexService: IndexService,  private router: Router) {}
  
      ngOnInit() {
          this.getDetails('AAAAAA');
      }
  
      getDetails(id:string) {
          this.indexService.getIndex()
              .subscribe(
                  data =&gt; {
                      console.log(data);
                      this.index = data;
                  },
                  error =&gt;  this.errorMessage = &lt;any&gt;error
              );
      }
  }
  </code></pre>
  
  <p>ansd the view:</p>
  
  <pre><code>&lt;main&gt;
      &lt;h1&gt;INDEX DETAILS&lt;/h1&gt;
  
      &lt;h4&gt;{{index | ex}}&lt;/h4&gt;
  
      &lt;h5&gt;{{index.name}}&lt;/h5&gt;
  
      &lt;p&gt;This is the home page&lt;/p&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>if I don't put the line with index.name in the index get's printed out, index.name throws that mentioned error</p>