title: Angular - How to not rebuild a list created with *ngFor any time an event on each element of the list is fired
body: <p>I have a simple list of <code>&lt;div&gt;</code> generated using <code>*ngFor</code> directive, something like</p>
  
  <pre><code>&lt;div *ngFor="let item of items() | async ; let i=index" 
    [ngClass]="getItemClass(i)"
    (click)="itemClick(i)"&lt;/div&gt;
  </code></pre>
  
  <p>As you see, the list is filled asynchronously any time the Observable returned by the method <code>items()</code> emits. In my case such Observable is a <code>ReplaySubject</code>, if this can be of any use to know. I then define the classes to be applied to each <code>&lt;div&gt;</code> element using the method <code>getItemClass</code>.</p>
  
  <p>I want also to react to a click event on each item using the method <code>itemClick(i: number)</code>. </p>
  
  <p><strong>Problem</strong></p>
  
  <p>Any time a <code>div</code> element is clicked, i.e. any time the <code>itemClick(i: number)</code> method is run, it seems that the entire list of <code>&lt;div&gt;</code>s is rebuilt. I come to this conclusion observing that any time a <code>div</code> element is clicked, also the <code>items()</code> method is run.</p>
  
  <p><strong>Question</strong></p>
  
  <p>Is it possible to avoid rebuilding the list when one of the <code>&lt;div&gt;</code> elements is clicked? I have already set <code>changeDetection</code> to be <strong><em>OnPush</em></strong> but it does not seem to solve my problem.</p>