Angular 2 hover class directive ES6

hover-class.directive.ts

import { Directive, ElementRef, Renderer } from '@angular/core';

/*
 * Adds a class to a DOM element when the mouse is over its box (:hover).
 * This DOESN'T support adding multiple classes separated by spaces.
 * Usage:
 *     <button class="btn" hoverClass="btn-success">
 */
const HoverClassDirective = class {
  constructor(elementRef, renderer) {
    this.elementRef = elementRef;
    this.renderer = renderer;
    // @Input this.hoverClass
  }

  mouseover() {
    this.renderer.setElementClass(this.elementRef.nativeElement, this.hoverClass, true);
  }

  mouseout() {
    this.renderer.setElementClass(this.elementRef.nativeElement, this.hoverClass, false);
  }
};

HoverClassDirective.annotations = [
  new Directive({
    selector: '[hoverClass]',
    host: {
      '(mouseover)': 'mouseover()',
      '(mouseout)': 'mouseout()',
    },
    inputs: ['hoverClass'],
  }),
];

HoverClassDirective.parameters = [
  [ElementRef],
  [Renderer],
];

export default HoverClassDirective;