Angular 이벤트 디렉티브

Angular cli 마우스 오버 이벤트로 제이쿼리를 이용해서 동적으로 css class 생성하기

.ts

import {Directive, ElementRef, HostListener} from '@angular/core';
declare var jquery:any;
declare var $:any;

@Directive({
  selector: '[mapHighlight]'
})
export class MapHighlightDirective {

  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') pathMouseenter() {
    this.highlight(true);
  }

  @HostListener('mouseleave') pathMouseleave() {
    this.highlight(false);
  }

  private highlight(highlight: boolean) {
    //this.el.nativeElement.style.backgroundColor = color;
    let ele = $(this.el.nativeElement);
    if ( highlight === true ) {
      ele.addClass('active');
    } else {
      ele.removeClass('active');
    }
  }



}

.html

<path
  mapHighlight
  id="rf1"
  data-ref="rf1"
  class="cls-1">  
</path>

더 앵귤러스러운 정규식이 있을꺼같은데...