Angular2 - Add class to item on click

Question

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 Angul

Answer 1

By your question title, you want to add a new class to the li when it's clicked, right?

If that's it, then it can be simple like this:

 

   

     {{item}}
   
 

---

export class HelloComponent {
  public items: string = ['Apple', 'Banana', 'Pear', 'Grapes', 'Watermelon'];

  public highlightItem(event) {
    if (! event.target.classList.contains('highlighted')) {
      event.target.classList.add('highlighted');
    }
  }
}