Making copies of large lists to trigger change detection for pure pipes in Angular 2 affecting performance
<p>I have an array <code>a</code> containing 50,000+ objects and I have a pipe which takes this array <code>a</code> and transforms this into some output which is then displayed in the view.</p>

<p>The pipe is pure meaning that only when the reference to array <code>a</code> changes will it re-evaluate.</p>

<p>I have a method <code>modifyArray</code> which adds/removes some elements from array <code>a</code>. When completed I would like the pipe to be re-evaluated so that the view re-renders.</p>

<p>Because of the way that Angular enforces immutability, the only option I have for the pipe to be re-evaluated is for the method <code>modifyArray</code> to return a copy of array <code>a</code> with the changes applied, so that Angular can detect that the reference has changed and trigger the pipe, something like this:</p>

<pre><code>modifyArray(a: T[]): T[] {

  a.push(b);
  a.slice(c);

  return [...a];
}
</code></pre>

<p>However for such an array with 50,000+ elements, there is a real performance degradation when making a copy of the array.</p>

<p>I would have expected that explicitly triggering change detection after invocation of this method, for example by calling <code>ApplicationRef.tick()</code> or <code>ChangeDetectorRef.detectChanges()</code>, would allow Angular to figure out that the array has been modified, but this is not the case:</p>

<pre><code>this.a = modifyArray(a);

this.applicationRef.tick();
</code></pre>

<p>Making a copy of the array is not an option as the data set is too large. Making the pipe not pure is also not an option as the transformation the pipe applies to the input is expensive.</p>

<p>Does anyone have any ideas on how this can be achieved?</p>