Angular ngClass and click event for toggling class

Question

In Angular  I would like to use ngClass and click event to toggle class  I looked through online but some are angular1 and there isn t any clear instruction or example  Any help will be much appreciated  In HTML  I have the following   lt div class  quot my class quot   click   quot clickEvent  event  quot  ngClass  quot   active   toggle  quot  gt    Some content  lt  div gt   In  ts  clickEvent event         Haven t really got far   var targetEle   event srcElement attributes class

User · Answer

Angular6 using the renderer2 without any variables and a clean template:

template:

<div (click)="toggleClass($event,'testClass')"></div>

in ts:

toggleClass(event: any, class: string) {
  const hasClass = event.target.classList.contains(class);

  if(hasClass) {
    this.renderer.removeClass(event.target, class);
  } else {
    this.renderer.addClass(event.target, class);
  }
}

One could put this in a directive too ;)

User · Answer

ngClass should be wrapped in square brackets as this is a property binding  Try this    lt div class  my class   click   clickEvent  event     ngClass     active   toggle   gt                       Some content  lt  div gt    In your component          define the toogle property      private toggle   boolean   false         define your method     clickEvent event            if you just want to toggle the class  change toggle variable         this toggle    this toggle                 Hope that helps

User · Answer

So normally you would create a backing variable in the class and toggle it on click and tie a class binding to the variable  Something like    Component      selector  foo       template   lt a  click   onClick                              class selected   wasClicked  gt Link lt  a gt         export class MyComponent       wasClicked   false       onClick             this wasClicked   this wasClicked

User · Answer

If you re looking for an HTML only way of doing this in angular     lt div  myDiv class  quot my class quot   click   quot myDiv classList toggle  active   quot  gt    Some content  lt  div gt   The important bit is the  myDiv part  It s a HTML Node reference  so you can use that variable as if it was assigned to document querySelector   my class   NOTE  this variable is scope specific  so you can use it in  ngFor statements

User · Answer

Instead of having to create a function in the ts file you can toggle a variable from the template itself  You can then use the variable to apply a specific class to the element  Like so-    lt div  click   status  status         ngClass   status    success     danger   gt                       Some content  lt  div gt    So when status is true the class success is applied  When it is false danger class is applied    This will work without any additional code in the ts file

User · Answer

If you want to toggle text with a toggle button   HTMLfile which is using bootstrap    lt input class  btn   click   muteStream     type  button             ngClass   status    btn-success     btn-danger               value   status    unmute     mute    gt    TS file   muteStream        this status    this status

User · Answer

This should work for you   In  html    lt div class  my class   click   clickEvent           ngClass   status    success     danger   gt                       Some content  lt  div gt    In  ts   status  boolean   false  clickEvent        this status    this status

User · Answer

We can also use ngClass to assign multiple CSS classes based on multiple conditions as below    lt div    ngClass        class-name   trueCondition     other-class    trueCondition     gt  lt  div gt

[angular] Angular ngClass and click event for toggling class

Examples related to angular

Examples related to angular-ng-class