title: "Expression has changed after it was checked" when child component emits on ngOnInit
body: <p>I have a parent component which displays a list of validation errors and renders a list of child components with <code>ngFor</code>. Each child component performs its validation during <code>ngOnInit</code> and outputs the result to the parent component. The parent component listens for this output and updates the list of validation errors, the result of which throws an error: </p>
  
  <p><code>Expression has changed after it was checked</code></p>
  
  <p>Now, I understand why this error is being thrown - at the start of the change detection cycle the validation errors were in one state, and at the end it was in another state, and this is not allowed.</p>
  
  <p>What I do not understand is how to get around this issue. The parent component has to display a list of errors at the top of the page, and each child component will add their validation results to this list. If this is a breach of the uni-directional dataflow then please tell me how to get around this in a clean manner (i.e, not wrapping the validation in a <code>setTimeout</code>, not changing from an immutable list to a mutable one, and not explicitly invoking the change detector again after validation).</p>
  
  <p>Plunker reproducing the issue: <a href="https://plnkr.co/edit/q52A1DraNOnxZa0qGFDo?p=preview" rel="noreferrer">https://plnkr.co/edit/q52A1DraNOnxZa0qGFDo?p=preview</a></p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>I've "solved" the issue by constructing the <code>EventEmitter</code> with the <code>isAsync</code> flag: </p>
  
  <p><code>new EventEmitter(true)</code></p>
  
  <p>This means that values will be emitted asynchronously, so emitted values will be picked up on the <em>next</em> change detection cycle. I guess the result is the same as wrapping the logic in a <code>setTimeout</code> but this way at least we don't have to wrap our code in a timeout everywhere we may emit a value.</p>