Angular2. How to add a class to a block on mousehover?

Question

JavaScript

Didn't find anything easy on the internet.

Answer 1

@Component({
  selector: 'mouse-hover-test',
  template: '<div [class.hovered]="hovered"></div>"'
})
class MouseHoverTestCmp {
  public hovered: boolean;
  @HostListener('mouseover') onMouseOver() {
    this.hovered = true; 
  }
  @HostListener('mouseout') onMouseOut() {
    this.hovered = false; 
  }
}

And if you want reusability:

@Directive({
  selector: '[hoverClass]'
})
class HoverClassCmp { 
  @Input('hoverClass') className: string;
  @HostBinding('class') activeClass: string;
  @HostListener('mouseover') onMouseOver() {
    this.activeClass = this.className;
  }
  @HostListener('mouseout') onMouseOut() {
    this.activeClass = ''; 
  }
}

Answer 2

https://angular.io/docs/ts/latest/guide/attribute-...