Conditionally add class to an element on click - angular

AngularngClassConditionally add class

Here I am going to discuss about adding a class to an active element. For example if we click on a link or dynamic menu we need to highlight that with a color. In this article we will be discussing the same in different scenarios.

1. Add class to an element on click and remove on click of other item and highlight the current one. (With js and With out js)
2. Add class to an element on click and remove if we click again on the same.(With js and With out js)

Let us check one by one.

1. Add class to an element on click and remove on click of other item and highlight the current one.

---

Let us check how we can achieve this by using very less code.

Html

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

Component

export class App {
  list:any;
  selected :any;
  constructor() {
    this.list = [
       'Read about Angular',
       'Read about knockout',
       'Read about backbone',
       'Read about jquery',
       'Read about javascript'
    ]; 
  }
  select(item) {
      this.selected = item; 
  };
  isActive(item) {
      return this.selected === item;
  };

}

Here I have used *ngFor to loop and angular click method for click event.

Dont forget to add below css

.active a{color:red;}

Add class to an element on click, by only using html code

The above one you can achieve with out using any js code it self. It required some changes in the html. Please see below code for that.

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

2. Add class to an element on click and remove if we click again on the same.

---

Now let us check another scenario. We will add class and remove if user clicks again on the same item. For achieving this functionality you can follow above same code except one small change in one method. See below updated method.

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

Using this approach you can easily find out user is clicking on same item again or not and you can write you're on logic also in this scenario. See the below code for more info.

 select(item) {
  if(item === this.selected)
   {
      this.selected = null;
      //your logic
    }else
    {
      this.selected = item;
      //your logic
     }
 };

Add class to an element on click and remove on same click, by only using html code

The above one you can achieve with out using any js code it self. It required some changes in the html. Please see below code for that.

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

I didn't add all examples in the plunker, but you can always edit and play on that.

I have explained about 5 different ways for adding a class dynamically using Angular, please check those here:- 5 different ways for conditionally adding class - Angular.

Here we have discussed about adding a class to an item on click.

Angular 2+ngClassConditionally add class

Related Info

1. Date filtering and formatting using pipe in Angular 2

2. Simple search using pipe in angular 2

3. Angular 2 toggle button | Angular 2 collapsible panel