angular2: Error: TypeError: Cannot read property '...' of undefined
<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>