Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 - Add class to item on click

Tags:

angular

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

like image 960
user5680735 Avatar asked Jun 17 '16 23:06

user5680735


3 Answers

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> 
like image 119
Andrei Zhytkevich Avatar answered Sep 27 '22 20:09

Andrei Zhytkevich


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

like image 34
Maleck13 Avatar answered Sep 27 '22 22:09

Maleck13


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

like image 21
Prashobh Avatar answered Sep 27 '22 21:09

Prashobh