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 Angular2.

<ul>
   <li [attr.data-selected]="false" (click)="highlightItem($event)" [class.highlight]="isHighlighted($event)" *ngFor="#item of items"> {{item}} </li>
</ul>

My component

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";
    }
}

Not sure where my mistake is or if I'm using a wrong method

Andrei Zhytkevich · Accepted Answer · 2016-06-18 00:05:03Z

23

You need to make an array in your class to store highlight status of an item:

hightlightStatus: Array<boolean> = [];

Declare local variable in the template associated with ngFor:

<ul>
   <li [attr.data-selected]="false" 
       (click)="hightlightStatus[i]=!hightlightStatus[i]" 
       [class.highlight]="hightlightStatus[i]" 
       *ngFor="let item of items, let i = index"> 
       {{item}} 
   </li>
</ul>

answered Jun 18, 2016 at 0:05

Andrei Zhytkevich

8,1292 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user5680735 Over a year ago

This doesn't quite work for me but I believe you are correct. Probably has to do with plunker and my version of angular

Andrei Zhytkevich Over a year ago

Sorry, forgot to mention. Your code looks like Angular 2 beta (#item of items, # was used in beta). Mine - Angular 2 RC1

Maleck13 · Accepted Answer · 2016-10-20 09:23:50Z

14

If I am understanding the question properly, I believe you can also use the render from angular2 to get a similar code to your example code. For my own project I did the following:

In my template I have:

<li role="presentation" (click)="userTypeSelect($event)" ><a href="#">Local</a></li>

In my component I then have:

import {Renderer} from '@angular/core';
//other imports

export class SignupComponent implements OnInit {

      constructor(private render:Renderer) { }

      userTypeSelect(event:any){
        event.preventDefault()
        this.render.setElementClass(event.target,"active",false);
      }

}

It is worth noting though that I am not using this for a list of items, however I believe it should still work.

Reference to the Renderer: Renderer Api Docs

answered Oct 20, 2016 at 9:23

Maleck13

1,73915 silver badges17 bronze badges

1 Comment

Idrees Khan Over a year ago

in my case it didnt work. so i had to use setElementAttribute.

let oldClasses = event.target.getAttribute('class');  this.renderer.setElementAttribute(event.target, "class", oldClasses + ' selected');

Prashobh · Accepted Answer · 2017-12-11 07:04:16Z

There are many ways to achieve this, and all are very simple.

Examples:

<li *ngFor="let n of list" (click)="select(n)" [ngClass]="{active: isActive(n)}">
  <a>{{n}}</a>
 </li>

 select(item) {
      this.selected = item; 
  };
  isActive(item) {
      return this.selected === item;
  };

Only using html

<li *ngFor="let n of list" [class.active]="clicked === n" 
         (click)="clicked = n">
       <a>{{n}}</a>
    </li>

Add class on click and remove if we click on the same

select(item) {
   this.selected = (this.selected === item ? null : item); 
};

Only using html

<li *ngFor="let n of list" [class.active]="clicked === n" 
       (click)="clicked = (clicked === n ? null :n)">
     <a>{{n}}</a>
   </li>

More info

priki · Accepted Answer · 2019-10-08 16:41:23Z

2

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:

 <ul>
   <li (click)="highlightItem($event)" *ngFor="let item of items">
     {{item}}
   </li>
 </ul>

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');
    }
  }
}

answered Oct 8, 2019 at 16:41

priki

7191 gold badge9 silver badges13 bronze badges

Comments

user4914839 · Accepted Answer · 2016-09-30 06:35:11Z

-1

It May help you

export class ContactComponent implements OnInit {

  values:Object[];


  ngOnInit() {
    this.values=[{name:'Alex',done:false},{name:'Jon',done:false}];
  }

  completed(i:number){
    if(this.values[i])
      this.values[i]['done']=!this.values[i]['done'];
  }

}

HTML:

<ul>
    <li *ngFor="let v of values;let i='index'" 
        (click)='completed(i)'
        [class.checked]="v.done" 
        >       
        {{v.name}}<span class="close">×</span>
    </li>
</ul>

answered Sep 30, 2016 at 6:35

user4914839

Collectives™ on Stack Overflow

Angular2 - Add class to item on click

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related