Add and Remove class in Angular

Question

I want to add background color to the li element when clicked but when I clicked another li element the previous li element background color remains unchanged.

component.html

<div class="col-md-3 categories">
  <h3>News By Type</h3>
  <ul>
    <li class="cat" id="cat_{{i}}" *ngFor="let category of categories; let i = index" (click)="sortNewsItems($event,category,i)"><img src="../assets/images/news.jpg" width="70"><h4>{{category}}</h4></li>
  </ul>
</div>

component.ts

sortNewsItems(event,cat,index) {
  event.target.classList.add('cat_active');
}

I already used but It was not worked. that's why i shifted to this. — Bhaskararao Gummidi, Jan 03 '18 at 05:46
give a demo example about `ngClass` which is similar to this — Bhaskararao Gummidi, Jan 03 '18 at 05:48
You will find plenty on internet. But can you share whatever you have tried with `ngClass`? — The Hungry Dictator, Jan 03 '18 at 05:56

score 3 · Answer 1 · answered Jan 03 '18 at 05:41

3

You should use srcElement of the $event

sortNewsItems(event,cat,index) {
  event.srcElement.classList.add('cat_active');
}

Read this answer and use its demo

answered Jan 03 '18 at 05:41

Aravind

40,391
16
91
110

Did you get a chance to look at the demo in the other answer?. What error you are getting – Aravind Jan 03 '18 at 06:00

score 2 · Answer 2 · edited Dec 28 '21 at 06:37

I know this is an old post but just in case. when there are several classes already on the element you might just want to add or remove an extra class you can do this:

On the element:

<div #element </div>

On the component.ts

@ViewChild('element') element: ElementRef;

then you can just add classes or remove them by

this.element.nativeElement.classList.add("newclass");
this.element.nativeElement.classList.remove("newclass");

score 1 · Answer 3 · answered Jan 03 '18 at 07:08

1

Remove 'cat_active' class from all the sibling elements before adding a new 'cat_active' class to the selected element.

component.html

<li #li class="cat" *ngFor="let category of categories;" (click)="sortNewsItems($event)">

component.ts

@ViewChildren('li') livs: QueryList<any>;

constructor(private elementRef: ElementRef) { }

sortNewsItems(event) {
    this.livs.forEach(liv => liv.nativeElement.children[0].classList = []);
    event.target.classList.add('cat_active');
}

I hope it might helps.

answered Jan 03 '18 at 07:08

Ajay

4,773
3
23
36

you can't override all the classes. need a way to remove only `cat_active` – Brachi Jan 03 '18 at 10:49
@Brachi I used ...classList.remove('cat_active'). – EternalBeginner Aug 04 '20 at 14:15
The answer worked for me in 2020. I added the template reference variable (the "#li" in the html) manually to several components, so I didnt need the ".children[0]"-part. – EternalBeginner Aug 04 '20 at 14:20

score 0 · Answer 4 · answered Jan 03 '18 at 06:22

Use ngStyle instead of direct class binding in html element.

component.html

<div class="col-md-3 categories">
  <h3>News By Type</h3>
  <ul>
    <li [ngStyle]="setListItemStyle(category)" class="cat" id="cat_{{i}}" *ngFor="let category of categories; let i = index" (click)="sortNewsItems($event,category,i)"><img src="../assets/images/news.jpg" width="70"><h4>{{category.label}}</h4></li>
  </ul>
</div>

component.ts

  activeListItem: any = null;
  categories: any[] = [{ id: 1, label: 'Test label 1' }, { id: 2, label: 'Test label 2' }];

  sortNewsItems(event, category, i) {
    event.stopPropagation();
    this.activeListItem = category;
  }

  setListItemStyle(category) {
    return { 'background-color': this.activeListItem && this.activeListItem.id == category.id ? '#fff000' : null };
  }

score 0 · Answer 5 · answered Jan 03 '18 at 07:19

I just taken a variable and set category name to it when clicked on category li and add active class based on the below condition. finally I set it like what i want. Thank you everyone for the well support.

component.html

<li class="cat" *ngFor="let category of categories; let i = index" (click)="sortNewsItems(category,i)" [ngClass]="{'cat_active':toggleClass === category}"><img src="../assets/images/news.jpg" width="70"><h4>{{category}}</h4></li>

component.ts

toggleClass:string;

sortNewsItems(cat,index) {
  this.toggleClass = cat;
}

score 0 · Answer 6 · answered May 22 '19 at 14:08

0

I read that using srcElement is not a "so good" practice. Better to use renderer2.

answered May 22 '19 at 14:08

lakshman_dev

94
1
12

score 0 · Answer 7 · edited Dec 29 '21 at 01:39

0

document.querySelector(".menu-open-btn a").onclick = function addNewClass() {
    document.querySelector(".mobile-header").classList.add("newClass");
}

edited Dec 29 '21 at 01:39

camille

16,432
18
38
60

answered Dec 27 '21 at 12:52

krishana patel

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 27 '21 at 13:18

score 0 · Answer 8 · edited Dec 28 '21 at 06:36

0

<any-element [ngClass]="{selected: isSelected}">
...
</any-element>

OR

<any-element [ngClass]="{selected: isSelected, disabled: isDisabled}">
...
</any-element>

edited Dec 28 '21 at 06:36

Suraj Rao

29,388
11
94
103

answered Dec 28 '21 at 06:35

krishana patel

1
1

Add and Remove class in Angular

8 Answers8