title: How to pass data from parent to child components?
body: <p>I have this property in a child component:</p>
  
  <pre><code>@Input() submitButtonDisabled: boolean;
  </code></pre>
  
  <p>In the template of my parent component I set it via property binding using interpolation:</p>
  
  <pre><code>&lt;my-child-component
    [submitButtonDisabled]="{{disableSubmitButton()}}"&gt;
  &lt;/my-child-component&gt;
  </code></pre>
  
  <p>The child component template reads its
  <code>submitButtonDisabled</code> property this way:</p>
  
  <pre><code>&lt;button id="btSubmit" type="submit" (click)="submit()" 
    [disabled]="submitButtonDisabled"&gt;Ok&lt;/button&gt;
  </code></pre>
  
  <p>Debugging my typescript code I see property binding working fine, but the submit button keeps disabled no matter what <code>disableSubmitButton</code> returns (a boolean value). It seems the component is being rendered before the binding to take place. </p>
  
  <p>Does this make any sense? Where is my mistake?</p>
  
  <p>Reference: <a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child" rel="nofollow noreferrer">Angular 2 - Component Communication</a></p>