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

@Directive({
  selector: '[addClass]',
})
export class AddClassDirective {
  @Input('addClass') className = 'action-class';
  @Input() acTime = 2000;

  @HostListener('touchstart', ['$event'])
  @HostListener('mouseenter', ['$event'])
  onEvent(event: any) {
    this.renderer.addClass(this.el.nativeElement, this.className);
    setTimeout(() => {
      this.renderer.removeClass(this.el.nativeElement, this.className);
    }, this.acTime);
  }

  constructor(private renderer: Renderer2, private el: ElementRef) {}
}
