How can I add a hover tag in Angular?

Question

How can I add a hover tag in Angular?

Let's say I have a list generated via ngFor and need to add a class to it when hovering over an object, and then delete it after removing the cursor.

How can this be done?

0

angular2

Author: iluxa1810, 2019-06-03

Source

1 answers

score 0 · Answer 1

In general, here is such a directive made:

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

@Directive({
  selector: '[appAddClassOnHover]'
})
export class AddClassOnHoverDirective {
  @Input('appAddClassOnHover')
  className: string
  constructor(private el: ElementRef, private render2: Renderer2) { }
  @HostListener('mouseover') onMouseEnter() {
    this.render2.addClass(this.el.nativeElement, this.className);
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.render2.removeClass(this.el.nativeElement, this.className);
  }

}