import { Directive, ElementRef, HostListener, Input, Renderer2, SimpleChange } from '@angular/core';

@Directive({
  selector: '[appHighlightEmpty]',
})
export class HighlightEmpty {
  constructor(private el: ElementRef, private renderer: Renderer2) { }
  
  @HostListener('input',['$event.target'])
  onInput(target:EventTarget | null):void{
    const value = (target as any).value
    this._updateBorder(value)
  }
  
  ngOnInit():void {
    this._updateBorder(this.el.nativeElement.value)
  }

  private _updateBorder(value: string){
    console.log(value.length)
    if (value.length > 0){
      this.renderer.removeClass(this.el.nativeElement, "hl-red")
    } else {
      this.renderer.addClass(this.el.nativeElement, "hl-red")
    }
  }


  
}