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-   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    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

User · Answer

Try to use it via  ngClass  property    lt div class  button   ngClass    active  isOn  disabled  isDisabled             click   toggle  isOn   gt           Click me        lt  div gt

User · Answer

Why not just using    lt div  ngClass   classes  gt   lt  div gt    https   angular io docs ts latest api common index NgClass-directive html

User · Answer

If you want to due this in component ts  HTML    lt button class  class1 class2   click   clicked  event   gt Click me lt  button gt    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

User · Answer

You can basically switch the class using  ngClass   for example   lt button  ngClass     active   selectedItem      item1     click   selectedItem    item1   gt Button One lt  button gt   lt button  ngClass     active   selectedItem      item2     click   selectedItem    item2   gt Button Two lt  button gt

[typescript] implement addClass and removeClass functionality in angular2

Examples related to typescript

Examples related to angular