CODEWITHSUNDEEP
htmlangularangular-ng-class
Bhaskararao Gummidi
Bhaskararao Gummidi

Reputation: 1635

Add and Remove class in Angular

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');
}

Upvotes: 1

Views: 26419

Answers (8)

krishana patel
krishana patel

Reputation: 1

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

Upvotes: 0

Sebastian Mansfield
Sebastian Mansfield

Reputation: 117

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");

Upvotes: 2

krishana patel
krishana patel

Reputation: 1

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

OR

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

Upvotes: 0

lakshman_dev
lakshman_dev

Reputation: 94

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

Upvotes: 0

Bhaskararao Gummidi
Bhaskararao Gummidi

Reputation: 1635

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

Upvotes: 0

Ajay
Ajay

Reputation: 4971

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.

Upvotes: 1

Ashraful Islam
Ashraful Islam

Reputation: 1263

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

Upvotes: 0

Aravind
Aravind

Reputation: 41533

You should use srcElement of the $event

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

Read this answer and use its demo

Upvotes: 3

Related Questions