implement addClass and removeClass functionality in angular2

Question

I have couple of buttons for ListView and GridView. For switching between these 2 buttons I had written JQuery like below-

<script type="text/javascript">     $(document).ready(function () {         $("button.switcher").bind("click", function (e) {             e.preventDefault();             var theid = $(this).attr("id");             var theitems = $("ul#items");             var classNames = $(this).attr('class').split(' ');             if ($(this).hasClass("active")) {                 // if currently clicked button has the active class                 // then we do nothing!                 return false;             } else {                 // otherwise we are clicking on the inactive button                 // and in the process of switching views!                 if (theid == "gridview") {                     $(this).addClass("active");                     $("#listview").removeClass("active");                     // remove the list  view and change to grid                     theitems.removeClass("tilelist");                     theitems.addClass("gridlist");                 }                  else if (theid == "listview") {                     $(this).addClass("active");                     $("#gridview").removeClass("active");                     // remove the grid view and change to list                     theitems.removeClass("gridlist")                     theitems.addClass("tilelist");                 }             }          });     }); </script> 

Now I want move this functionality from Jquery to Angular2 typescript application. Can anyone please guide me on this? How do I implement addClass and removeClass functionality on button click from angular2 template?

Answer 1

If you want to due this in component.ts

HTML:

<button class="class1 class2" (click)="clicked($event)">Click me</button> 

Component:

clicked(event) {   event.target.classList.add('class3'); // To ADD   event.target.classList.remove('class1'); // To Remove   event.target.classList.contains('class2'); // To check   event.target.classList.toggle('class4'); // To toggle } 

For more options, examples and browser compatibility visit this link.

Answer 2

Try to use it via [ngClass] property:

<div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"          (click)="toggle(!isOn)">          Click me!      </div>`,