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:

<div class="my_class" (click)="clickEvent($event)" ngClass="{'active': toggle}">
  Some content
</div>

In .ts:

clickEvent(event) {
  // Haven't really got far
  var targetEle = event.srcElement.attributes.class;
}

score 159 · Accepted Answer · edited Sep 01 '22 at 06:13

159

This should work for you.

In .html:

<div class="my_class" (click)="clickEvent()"  
    [ngClass]="status ? 'success' : 'danger'">                
    Some content
</div>

In .ts:

status: boolean = false;
clickEvent(){
    this.status = !this.status;       
}

edited Sep 01 '22 at 06:13

upe

1,862
1
19
33

answered Jun 14 '17 at 04:41

Mani S

2,501
1
12
12

Just a quick question. The first click adds the class just fine, but the second click doesn't seem to work. From your code, I don't see how it changes the `status` back to `false`. – Steve Kim Jun 14 '17 at 05:01
3

made changes to my code., you can set it to false initially and then the function will toggle the bool value to true<-> false. – Mani S Jun 14 '17 at 05:24

charsi · Answer 2 · 2021-11-17T08:40:16.487

76

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-

component.html -

<div (click)="status=!status"  
    [ngClass]="status ? 'success' : 'danger'">                
    Some content
</div>

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.~~
EDIT: Recent versions of angular require the variable to be declared in the controller - component.ts -

status: boolean = false;

edited Nov 17 '21 at 08:40

answered Jan 30 '18 at 11:52

charsi

2,917
22
40

2

Would you have to declare "status" in the template? – webworm Jan 07 '19 at 17:01
@webworm no, you do not need to declare `status` in the template. – ANeves Mar 25 '19 at 22:58
2

Is it possible to use this approach also for a div inside an ngFor ? Because I try it, but it seems that angular change the class to all the div created with ngFor, not only to the one that I click; thanks. – S-Wing Dec 03 '19 at 10:02
Getting error that the - Property 'status' does not exist on type – sin2akshay Nov 16 '21 at 12:02
@sin2akshay looks like things have changed in angular recently so you'll have to declare the variable first. I've updated the answer above. – charsi Nov 17 '21 at 08:41

score 42 · Answer 3 · edited Sep 01 '22 at 11:36

42

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

template:

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

in ts:

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

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

One could put this in a directive too ;)

edited Sep 01 '22 at 11:36

upe

1,862
1
19
33

answered Aug 17 '18 at 10:44

neox5

1,621
13
16

1

Should not use reserved keyword class. – desertSniper87 Apr 25 '21 at 10:52
this solution not work in my case – Arqam Rafay Feb 17 '22 at 07:51
What is the issue on your side? Maybe I can help : ) – neox5 Feb 18 '22 at 08:21

score 15 · Answer 4 · edited Sep 01 '22 at 11:36

ngClass should be wrapped in square brackets as this is a property binding. Try this:

<div class="my_class" (click)="clickEvent($event)"  [ngClass]="{'active': toggle}">                
    Some content
</div>

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.

score 11 · Answer 5 · answered Feb 14 '21 at 22:26

If you're looking for an HTML only way of doing this in angular...

<div #myDiv class="my_class" (click)="myDiv.classList.toggle('active')">
  Some content
</div>

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

score 3 · Answer 6 · answered Jun 19 '19 at 07:17

3

We can also use ngClass to assign multiple CSS classes based on multiple conditions as below:

<div
  [ngClass]="{
  'class-name': trueCondition,
  'other-class': !trueCondition
}"
></div>

answered Jun 19 '19 at 07:17

MiPhyo

49
5

score 1 · Answer 7 · edited Jun 29 '18 at 11:38

1

If you want to toggle text with a toggle button.

HTMLfile which is using bootstrap:

<input class="btn" (click)="muteStream()"  type="button"
          [ngClass]="status ? 'btn-success' : 'btn-danger'" 
          [value]="status ? 'unmute' : 'mute'"/>

TS file:

muteStream() {
   this.status = !this.status;
}

edited Jun 29 '18 at 11:38

Haroldo Gondim

7,725
9
43
62

answered Jun 29 '18 at 11:17

Bilal Ahmad

781
8
10

score 1 · Answer 8 · answered Nov 18 '19 at 03:35

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:`<a (click)="onClick()"
                         [class.selected]="wasClicked">Link</a>
    `)
export class MyComponent {
    wasClicked = false;

    onClick() {
        this.wasClicked= !this.wasClicked;
    }
}

score 1 · Answer 9 · edited Jul 10 '21 at 01:57

1

You can try this.

Html.

<button *ngFor="let color of colors; let index=index" class="example1" 
        (click)="selectColor(index)" [class.choose__color]="viewMode == index">
    <mat-icon>fiber_manual_record</mat-icon>
</button>

css.

.example1:hover {
    border-bottom: 2px solid black;
}

.choose__color {
     border-bottom: 2px solid black;
}

ts.

selectColor(index: any) {
    this.viewMode = index;
}

edited Jul 10 '21 at 01:57

Josef

2,869
2
22
23

answered Jul 08 '21 at 21:56

olorunshola matins

59
2

1

How to unset color on component blur (unselect)? – Dumbo Sep 01 '21 at 10:26

Angular ngClass and click event for toggling class

9 Answers9

Linked