title: Angular 2 - change list item bg-color individually using ngFor
body: <p>How can I change the background color of a list item generated using ngFor? I want to change the background  color of each list item individually when I click on one or hover it?</p>
  
  <p>This is what I have now but it changes all of the line together when I click one line.</p>
  
  <pre><code>&lt;ul class="list-group col-lg-6"&gt;
      &lt;li href="#" class="list-group-item" [style.background-color]="whenClicked ? 'yellow' : 'none'" *ngFor="let recipe of Items "
       (click)="ChangeColor()"&gt;
        {{recipe.Title}}&lt;/li&gt;
  
    &lt;/ul&gt;
  </code></pre>
  
  <p>I've changed the code a bit according to suggestion of a member here. here it is now:</p>
  
  <pre><code>&lt;ul class="list-group col-lg-6"&gt;
      &lt;li href="#" class="list-group-item special-hover" *ngFor="let recipe of Items "&gt;
        {{recipe.Title}}&lt;/li&gt;
  
    &lt;/ul&gt;
  </code></pre>
  
  <p>this is the css component: </p>
  
  <pre><code>.special-hover &gt; li:active{
   background:#67EC32 
  }
  </code></pre>
  
  <p>and this is the ts component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  
  @Component({
    selector: 'recipeList',
    templateUrl: './recipeList.component.html',
    styleUrls: ['./recipeList.component.css']
  })
  
  export class RecipeListComponent {
    buttonNew = "New Recipe";
  
    Items: ListItem[] = [
      { Title: 'Chocolate Cake' },
      { Title: 'RoastBeaf' }
    ];
  
    RecipeTitle:string;
  
    whenClicked = false;
  
    ChangeColor(){
        this.whenClicked = true;
    }
  
    addToList(){
      this.Items.push({Title: this.RecipeTitle})
    }
  }
  
  class ListItem{
    Title: string;
  }
  </code></pre>