Add and Remove class in Angular

You should use srcElement of the $event

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

Read this answer and use its demo

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

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.

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

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

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

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

OR

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

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