title: implement addClass and removeClass functionality in angular2
body: <p>I have couple of buttons for ListView and GridView. For switching between these 2 buttons I had written JQuery like below-</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(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");
                  }
              }
  
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>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?</p>