Wednesday, April 12, 2017

Conditionally add class to an active element - angular 2

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, before that if you want to compare those three scenarios with angular js 1 way, please check below post.

1. Angular js add class to an active element
2. Add and remove active class on click Angular
3. Add a class for everything clicked - angular

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.

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

No comments :

Post a Comment