title: How to toggle background color of rows in *ngFor in Angular / TypeScript?
body: <p>I'm a beginner using Angular 6. I want to change the background color of a row of the table when I click on it, and when I reclick on it, set it back to the original color.</p>
  
  <p>I've tried to understand different solutions here on SO, but eventually couldn't make it work. 
  Heres what happen: I click on a row, it highlights it. If then i click on line 2, it unhighlights the first one. But if i click on line 3 it will highlight both 2 and 3. If I click on 4, only 2 and 4 will be highlighted and 3 will be unhighlighted... so <strong>only lines on uneven numbers can be highlighted with the code atm.</strong></p>
  
  <p>Here's my TypeScript :
  <code>public changeTableRowColor(idx: any) {this.rowClicked = idx;}
  </code></p>
  
  <p>Here's my HTML :</p>
  
  <pre><code>&lt;tr *ngFor="let ApiDataFile of filteredApiDataFiles; let idx=index; let even=even"
      [style.background-color]="rowClicked == idx ? 'yellow' : (even ? '#ffffff' : 'f1f1f1')"
      (click)="changeTableRowColor(idx)"&gt;
    &lt;td&gt;{{ ApiDataFile.name }}&lt;/td&gt;
    &lt;td&gt;{{ ApiDataFile.surname }}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <hr>
  
  <p>Solution : </p>
  
  <pre><code>  &lt;tr *ngFor="let ApiDataFile of filteredApiDataFiles; let idx=index; let even=even"
    [style.background-color]="ApiDataFile.rowClicked ? 'yellow' : (even ? '#ffffff' : '#f1f1f1')"
    (click)="ApiDataFile.rowClicked = !ApiDataFile.rowClicked"&gt;
    &lt;td&gt;{{ ApiDataFile.name }}&lt;/td&gt;
    &lt;td&gt;{{ ApiDataFile.surname }}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>what I expect : i can highlight multiple rows, and unhighlight them by clicking on it.</p>
  
  <p>EDIT : posted the solution</p>