Search code examples
cssangulartypescriptclickangular-directive

Using Hostlistner and directive to add CSS class


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