Active class in Angular with hostlistener

Question

how to remove active class on li tag? I have a code that adds an active class on a li tag but I can't remove this active class

   @Directive({
  selector: '[appHome]'
  
})
export class HomeDirective{
  ref!: ElementRef;

  @HostBinding('class.active')isActive=false;



  @HostListener('click')onClick(){
    
    if(!this.isActive){
      this.isActive=true;
      return;
    }
    
    }
    

            <p appHome> {{wd.titleName}}</p>
            <!-- <span class="line-performance"></span> -->
        </li>



    </ul>

Answer 1

I think what you are looking for is a toggle behavior. If it's so replace the following

if(!this.isActive){
  this.isActive=true;
  return;
}

with

this.isActive = !this.isActive;

If you want to add the active class conditionally you can use ngClass on the list item as follows

<li [ngClass]="{'active' : isActive == true}">List Item</li>