Angular - how to add class when receiving event in template

Question

I would like to add class when receiving a click event in template

What I do is something like this:

<div
      #myDiv
      (click)="myDiv.classList.add('my-class')"
></div>

but this does not work.

How can I make it works? Thanks

Answer 1

You can do the following:

<div [ngClass]="classStr"
      (click)="classStr='my-class'">
</div>

you will have to add classStr to your component (just declare it - classStr: string; inside the component)

notice that this will only add the class once, not toggle it, if you want to toggle, you will have to do something like:

<div [ngClass]="classStr"
   (click)="classStr = classStr === 'my-class' ? '' : 'my-class' ">
</div>