How to handle future undefined in angular2
<p>In my angular2 application, I have an object <code>serviceData</code> which value will be set in future from rest/http call. When I try to display them in my html view, I am getting <code>undefined</code> error. </p>

<p>I have defined <code>serviceData</code> but not <code>serviceData.success</code>, so the <code>serviceData.success</code> is undefined.</p>

<p>Is there a way I can avoid that error so <code>serviceData.success</code> will be displayed once it is available? Here's my <strong>template</strong>:</p>

<pre><code>&lt;li class="list-group-item"&gt;{{serviceData.success}}&lt;/li&gt;
&lt;li class="list-group-item"&gt;{{serviceData.messages}}&lt;/li&gt;
&lt;li class="list-group-item"&gt;{{serviceData.sessionId}}&lt;/li&gt;
&lt;li class="list-group-item"&gt;{{serviceData.firstName}}&lt;/li&gt;
&lt;li class="list-group-item"&gt;{{serviceData.lastName}}&lt;/li&gt;
</code></pre>

<p><strong>Component</strong></p>

<pre><code>import {Component} from '@angular/core';

//Component code
@Component({
  selector: 'app',
  templateUrl: './app.component.html',

})
export class AppComponent {

  private serviceData: any;

}
</code></pre>