corso-angular-2025/demo/src/app/highlight-empty.ts

31 lines
751 B
TypeScript

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")
}
}
}