title: Understanding "Expression has changed after it was checked" in Angular 2 with Mutable vs Immutable properties
body: <p>I've run into the <code>Expression has changed after it was checked</code> error in Angular 2. </p>
  
  <p>From what I understand about what the error means and how the change detection mechanism works is that Angular does not like multiple change detection events happening at the same time, and that making changes in <code>ngOnInit</code> means that changes have occurred during change detection and that this is a big no-no. What I <strong>don't</strong> understand is why mutating a property in the <code>ngOnInit</code> works fine, but creating a new instance of that property results in the error.</p>
  
  <p>Example code:</p>
  
  <pre><code>@Component({
      template: `&lt;a-component [input]="list"&gt;&lt;/a-component&gt;`
  })
  export class MyComponent implements OnInit {
      list = [];
  
      ngOnInit() {
          this.list.length = 0;
          this.list.push('x');
      }
  }
  </code></pre>
  
  <p>This works. This, does not:</p>
  
  <pre><code>@Component({
      template: `&lt;my-component [input]="list"&gt;&lt;/my-component&gt;`
  })
  export class MyComponent implements OnInit {
      list = [];
  
      ngOnInit() {
          this.list = ['x'];
      }
  }
  </code></pre>
  
  <p>In this example it appears to me that mutating the property is a better solution because the alternative would involve manually re-triggering change detection. </p>
  
  <p>An explanation of what exactly the change detector is doing here would be much appreciated!</p>