title: Angular 2 Change Detection Arrays
body: <p>I got a component hierarchy that looks a bit like this:</p>
  
  <pre><code>@Component({
  ...
  })
  export class A {
  
    constructor(private _serviceThatDeliversData: Service){} 
  
    getData(): Array&lt;DataItem&gt; {
      return this._serviceThatDeliversData.getData();
    }
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;b-selector [data]="getData()"&gt;&lt;/b-selector&gt;
  </code></pre>
  
  <p>Child component:</p>
  
  <pre><code>@Component({
    selector: 'b-selector'
    ...
  })
  export class B {
    @Input() data: Array&lt;DataItem&gt;;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li *ngFor="let item of data"&gt;
      &lt;c-selector [item]="item"&gt;&lt;/c-selector&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>So I got a parent component 'A' that receives data from a service. The serviceThatDeliversData creates the DataItem list every time it receives data from a websocket. This list is then passed down to 'B' where every list entry is used as a base for sub components ('C', I omitted the C component here cause it basically just presents the input data 'item').</p>
  
  <p>My problem now is the following:
  Since the list changes every time the service gets an update, the whole list of C components + the B component is newly created. I assume because the DataItem list changes completely Angular notices them as new entries (?) and the list as a new one itself (?)
  However in reality it might very well be that only one item was added or removed or just a field has changed in one of the items. So only one C component would needed to be removed/added/updated.</p>
  
  <p>Since that is the case any animations happening in the view in any of the C components stop and start again once the list is recreated. That plus some other side effects I would like to avoid.</p>
  
  <p>So my question is, is there a way to let Angular only update the C components which relate to a DataItem that actually changed internally AND the ones that were added or removed to/from the list, but leave the ones that have not changed untouched?</p>
  
  <p>I have searched for a while and found that one could use changeDetection: ChangeDetectionStrategy.OnPush, however I have not found a working example (with a changing array and changing array elements (internally)) that would help me with my problem.</p>
  
  <p>I assume one could store a copy of the list in 'B', check the changes manually and then react to them - which could also be done with an animation to signal the user which entry was removed or added - however that would require a way to stop Angular from updating (recreating) 'B' and the 'C' components at all. I take it using the same array (clearing it and repopulating it with the new entries) might work.</p>
  
  <p>But I'd still like to know if this could be possible via raw Angular mechanisms.</p>