Accéder à l'élément HTML à partir de HostListener

Question

J'ai un élément html (div), auquel je veux ajouter une classe à l'entrée de la souris et l'enlever (en ajouter une autre) à la sortie de la souris. J'ai mes HostListeners qui fonctionnent avec les actions mouseenter/mouseleave, mais mon problème est de savoir comment accéder à mon élément html et ajouter/supprimer les classes

article.html

<div clrDropdownItem class="hidden-action">
    <span class="vui-icon" [ngClass]="menuItem.icon"></span>
    <span [textContent]="menuItem.title"></span>
</div> 

item.component.ts

@Component({
           selector: 'vsc-navigation-view-menu-item',
           templateUrl: './navigation-view-menu-item.html',
           changeDetection: ChangeDetectionStrategy.OnPush
        })
    export class NavigationViewMenuItemComponent {
           @Input() menuItem: NavigatorNodeSchema;

       constructor(@Inject(forwardRef(() => NavigationViewMenuComponent)) public menuComponent: NavigationViewMenuComponent, private navigationService: NavigationService) {

       }
    @HostListener('mouseenter', ['$event'])
       onMouseEnter(evt: MouseEvent) {
          if(evt.ctrlKey){
              this.elementRef.nativeElement.class = 'remove-action';
          }
           console.log(this.menuItem.navigationTargetUid);
       }

    @HostListener('mouseleave', ['$event'])
    onMouseLeave(evt: MouseEvent) {
            this.elementRef.nativeElement.class = 'hidden-action';
    }
}

item.css

.hidden-action {
  text-decoration: none !important;
}

.remove-action {
  text-decoration: line-through !important;
  text-decoration-color: red !important;
}

Avec ce code, j'obtiens :

"La propriété 'elementRef' n'existe pas sur le type 'NavigationViewMenuItemComponent'"

Je comprends maintenant que "this" fait référence à mon élément ts, et non à l'élément html, mais comment puis-je accéder à l'élément div à partir de mon hostListener ? Une idée ?

Answer 1

Il n'y a pas de (this.relementRef as Element)....

Peut-être vouliez-vous dire

evt.target.class

mais il serait plus judicieux d'utiliser les bindings Angular pour mettre à jour les classes.

@HostBinding('class.remove-action')
isRemoveAction = false;

@HostBinding('class.hidden-action')
isHiddenAction = false;

@HostListener('mouseenter', ['$event'])
   onMouseEnter(evt: MouseEvent) {
      if(evt.ctrlKey){
          this.isRemoveAction = true;
      }
       console.log(this.menuItem.navigationTargetUid);
   }

@HostListener('mouseleave', ['$event'])
onMouseLeave(evt: MouseEvent) {
   this.isHiddenAction = true;
}