How to add remove (toggle) class in angular when clicked

you can try like this

HTML

<li id="xx" [ngClass]="classFlag === true ? 'treeview' : '' " (click)="menuToggle($event)">
<li>

TS

 classFlag: boolean = false;
 menuToggle(event: any) {
    this.classFlag = !this.classFlag ;
 }

You can try these, No need to write specific function for it

<li [ngClass]="classFlag ? 'treeview' : '' " (click)="classFlag ? classFlag = false : classFlag = true">test</li>

I fixed it by using plain old Javascript:

// Find current active item
var myElement = document.getElementsByClassName('active');

// If found, remove the css class 'active'
if(myElement[0])
  myElement[0].classList.remove("active");

// Get the new active item
var currentElement = document.getElementById('message_' + messageId);
// Set the css class 'active'
currentElement.classList.add("active");

HTML:

 <li id="xx" class="treeview" (click)="menuToggle($event)">
 <li>

Component:

menuToggle(event:any) {
  event.target.classList.add('class3'); // To ADD
  event.target.classList.remove('class1'); // To Remove
  event.target.classList.contains('class2'); // To check
  event.target.classList.toggle('class4'); // To toggle
}

You should give an "active" property , something like this:

items = [
  {name:'a', active:false},
  {name:'b', active:false}
];

And inside the template:

<li *ngFor="let item of items" (click)="menuToggle(item)" [ngClass]="{'active': item.active}">{{ item.name }}</li>

And finally the menuToggle() method just toggles the active state of the clicked item:

menuToggle(){
 item.active = !item.active;
}