title: Angular Child Component is not being updated inmediatly
body: <p>I'm learning Angular 6, I tought I was doing it right, but I'm facing a "problem-doubt"</p>
  
  <p>I have a parent and a Child:</p>
  
  <ol>
  <li>My parent is sharing info to my child by using input binding</li>
  <li>A button trigger a function where the info is updated</li>
  <li>Inmediatly, parent calls a child function via @ViewChild</li>
  </ol>
  
  <p>A <a href="https://stackblitz.com/edit/angular-problem-databinding" rel="nofollow noreferrer">Stackblitz </a> can be found here </p>
  
  <p>My parent components looks like:</p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>This is the parent
  &lt;child [data]="my_data"&gt;&lt;/child&gt;
  &lt;button (click)="fireAll()"&gt;Fire All!&lt;/button&gt;
  </code></pre>
  
  <p><strong>Typescript:</strong></p>
  
  <pre><code>export class AppComponent  {
    @ViewChild(ChildComponent) childComp: ChildComponent;
    my_data = 'Nothing yet';
  
    public fireAll(){
      this.my_data = "I want to show this info in console";
      this.childComp.writeToConsole();
      //setTimeout(()=&gt;this.childComp.writeToConsole(), 500); //This works well
    }
  
  }
  </code></pre>
  
  <p><strong>Child:</strong></p>
  
  <pre><code>export class ChildComponent  {
    @Input() data: string;
  
    writeToConsole(){
      console.log(this.data);
    }
  }
  </code></pre>
  
  <p><strong>The problem is:</strong> The first time I click my button, I'm expecting to see in console "I want to show this info in console", instead of that I'm recieving "Nothing yet". But if I click it again, the expected result is reached. I suppose there is a delay between the parent pass data to child because if I use setTimeout to hold on a little, all works fine.</p>
  
  <p><strong>My questions:</strong></p>
  
  <ol>
  <li>What is the best way to send data from parent to child and to use it inmediatly in child?</li>
  <li>What am I doing wrong?</li>
  </ol>
  
  <p>Really appreciate your help, thanks</p>