title: How to debug "Expression Changed After It Has Been Checked" Error?
body: <p>This is a notorious error, which has a quite a "following" among developers, however it is also known to be quite tricky to debug. The log like this</p>
  
  <pre><code>PersonalSituationComponent.html:3 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
  at viewDebugError (core.es5.js:8434) [angular]
  at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8412) [angular]
  at checkBindingNoChanges (core.es5.js:8576) [angular]
  at checkNoChangesNodeInline (core.es5.js:12455) [angular]
  at checkNoChangesNode (core.es5.js:12429) [angular]
  at debugCheckNoChangesNode (core.es5.js:13209) [angular]
  at debugCheckRenderNodeFn (core.es5.js:13149) [angular]
  at Object.eval [as updateRenderer] (PersonalSituationComponent.html:3) [angular]
  at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13131) [angular]
  at checkNoChangesView (core.es5.js:12251) [angular]
  at callViewAction (core.es5.js:12618) [angular]
  at execEmbeddedViewsAction (core.es5.js:12596) [angular]
  at checkNoChangesView (core.es5.js:12250) [angular]
  at callViewAction (core.es5.js:12618) [angular]
  </code></pre>
  
  <p>is not really helpful. And if one takes a lot at the line 3 of the html, the line has no booleans in it, but it <em>is</em> an opening tag for a component which does have some of them at various places (.ts and .html respectively).</p>
  
  <p>How would you debug such an error, without replacing all booleans with hardcoded values and checking each one of them separately? (And while you are typing, I am going to do just that).</p>