Using Hostlistner and directive to add CSS class

Issue

I have created a directive and using HostListner , want to add a CSS style on Click event on the

tag.Also remove on the click again.I have the following CSS .

     CSS
    .strikethrough { text-decoration: line-through;}

     HTML
     <p optionalIngredient>ABCD</p>
     
      Directive 
     constructor(private elRef: ElementRef ,private renderer: Renderer2)  
       {  }

     @HostListener('mouseenter') onMouseEnter() {    
     this.renderer.addClass(this.elRef.nativeElement, 'strikethrough');
       }

    @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeClass(this.elRef.nativeElement,strikethrough');
      }

Solution

You can use a boolean to keep track of whether the style is applied.

styled = false;

@HostListener('click') 
onClick(){
  if (!styled) this.renderer.addClass(this.elRef.nativeElement, 'strikethrough');
  else this.renderer.removeClass(this.elRef.nativeElement, 'strikethrough');
  this.styled = !this.styled;
}

Answered By - Chris Hamilton