title: angular 2 input ok but property is undefined
body: <p>I've been searching for questions already posted but none seem to answer this particular case.</p>
  
  <p>Basically, I have a parent component which passes data to the child component. Nothing unusual in the html:</p>
  
  <pre><code>&lt;child-component [dataChild]="dataParent"&gt;&lt;/child-component&gt;
  </code></pre>
  
  <p><code>dataParent</code> is the result of an http call and it is initialised with a subscriber:</p>
  
  <pre><code>this.myService.myObserver.subscribe(d =&gt; {
        this.dataParent = d;          
  });
  </code></pre>
  
  <p><code>dataParent</code> will now be something like this:</p>
  
  <pre><code>{
   name: "some random name",
   id: 1
  }
  </code></pre>
  
  <p>In the child html this won't throw an error and the object above will be displayed as expected:</p>
  
  <pre><code>&lt;p&gt;{{dataChild | json}}&lt;/p&gt;
  </code></pre>
  
  <p>However, this will:</p>
  
  <pre><code>&lt;p&gt;{{dataChild.name}}&lt;/p&gt;
  </code></pre>
  
  <p>I've seen in other answers that the way some people are dealing with async properties is by using *ngIf. However, I think that's a bit hacky and the problem here is that the error happens only when a property is being accessed.</p>
  
  <p>Am I missing something here?</p>