title: Angular2 - Add class to item on click
body: <p>I have a bunch of list items and would like to highlight each one once it's clicked. This is easy for me to do in jQuery or even JavaScript but I'm lost when it comes to Angular2.</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li [attr.data-selected]="false" (click)="highlightItem($event)" [class.highlight]="isHighlighted($event)" *ngFor="#item of items"&gt; {{item}} &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My component</p>
  
  <pre><code>export class HelloWorld {
      items = ["pineapples", "apples", "tomatoes", "bread"];
  
      highlightItem(event) {
          event.target.setAttribute("data-selected", "true");
     }
  
     isHighlighted(event) {
         return event.target.getAttribute("data-selected") == "true";
      }
  }
  </code></pre>
  
  <p>Not sure where my mistake is or if I'm using a wrong method</p>