title: ngClass function inside ngFor issue
body: <p>Here is a really simple <code>ngFor</code> <code>loop</code>.</p>
  
  <p><strong>html</strong>:</p>
  
  <pre><code>&lt;div class="button" *ngFor="let button of buttons"&gt;
  &lt;button [ngClass]="{\'red\': testColor(button.id)}"
                  (click)="changeColor(button.id)"&gt;
          test {{button.id}} - {{button.color}}
  &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong>:</p>
  
  <pre><code>testColor(id){
    for(let i=0; i&lt;this.buttons.length; i++){
      if(id == i){
          console.log('test1');
                  return this.buttons[i].color;
        break;
      }
  
    }
  }
  changeColor(id){
      for(let i=0; i&lt;this.buttons.length; i++){
      if(id == i){
          console.log('test2');
                  this.buttons[i].color = !this.buttons[i].color;
        break;
      }
  
    }
  }
  </code></pre>
  
  <p>See the  <a href="https://jsfiddle.net/sshu3md0/" rel="nofollow noreferrer">jsfiddle</a> </p>
  
  <p>When I click on the button, the "test2" works fine (it is called only 1 time), but "test1" (from the function in the <code>ngClass</code>) is called 5 times, even with a breaker.</p>
  
  <p>I guess it's due to the <code>ngClass</code>, but how can I make it be called only for the clicked element?</p>