title: angular2: Error: TypeError: Cannot read property '...' of undefined
body: <p>I have attached the plunker of my angular2 code piece. I want to print a field from my JSON but unable to print that as initially my Object is null and it is being populated via a Promise.</p>
  
  <p>This is my component file</p>
  
  <pre><code>import {Component, NgModule, OnInit} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  
  class MyData {
    xyz : MySubData;
  }
  
  class MySubData {
    name : string;
  } 
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
  
        {{abc.xyz.name}}
      &lt;/div&gt;
    `,
  })
  export class App implements OnInit {
    abc : MyData = null;
    constructor() {
      this.name = 'Angular2'
    }
  
    ngOnInit() {
      setTimeout(() =&gt; {
        this.abc = new MyData();
        this.abc.xyz = new MySubData();
        this.abc.xyz.name = "Binita";
      }, 2000);
    }
  }
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ App ],
    bootstrap: [ App ]
  })
  export class AppModule {}
  </code></pre>
  
  <p>When I am removing the line <code>{{abc.xyz.name}}</code> from my template it is running fine.</p>
  
  <p>I have use set time out in my code because I am getting my data from Promise (i.e asynchronous call).</p>
  
  <p>I can understand initially as <code>abc</code> is <code>null</code>, my code is unable to find abc.xyz.name. But I don't want to put any if condition to check. Because I have several property inside a JSON and it is not possible for each property to write if condition.</p>
  
  <p>Earlier in angularjs 1 if abc is null then it would automatically replace it with blank string. I want to do the same thing in angular2. Please suggest.</p>
  
  <p>Below is the plunker</p>
  
  <p><a href="https://plnkr.co/edit/u1NqNF0penz7OS55QmoU?p=preview" rel="noreferrer">https://plnkr.co/edit/u1NqNF0penz7OS55QmoU?p=preview</a></p>