angular2: Error: TypeError: Cannot read property '...' of undefined

Question

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.

This is my component file

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: `     <div>       <h2>Hello {{name}}</h2>        {{abc.xyz.name}}     </div>   `, }) export class App implements OnInit {   abc : MyData = null;   constructor() {     this.name = 'Angular2'   }    ngOnInit() {     setTimeout(() => {       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 {} 

When I am removing the line {{abc.xyz.name}} from my template it is running fine.

I have use set time out in my code because I am getting my data from Promise (i.e asynchronous call).

I can understand initially as abc is null, 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.

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.

Below is the plunker

https://plnkr.co/edit/u1NqNF0penz7OS55QmoU?p=preview

Answer 1

That's because abc is undefined at the moment of the template rendering. You can use safe navigation operator (?) to "protect" template until HTTP call is completed:

{{abc?.xyz?.name}} 

You can read more about safe navigation operator here.

Update:

Safe navigation operator can't be used in arrays, you will have to take advantage of NgIf directive to overcome this problem:

<div *ngIf="arr && arr.length > 0">     {{arr[0].name}} </div> 

Read more about NgIf directive here.