Применение директивы к динамически генерируемому html

Question

, пожалуйста, игнорируйте, если я не объясняю должным образом, на самом деле я новичок в Angular 6, и у меня есть одна созданная директива следующим образом:

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

@Directive({
  selector: '.pvtVal'
})
export class PWDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) {
    console.log(this.el);
    console.log(this.renderer);
  }

 @HostListener('mouseenter') onMouseEnter() {
    console.log(this.el);
 }
}

И я создаю динамическую таблицу, используя некоторую логику для следования div:

<div id="table123" style="width: 100%; height: 100%;">
</div>

И компонент, который генерирует html, выглядит следующим образом:

export class PWComponent implements OnInit {
   ngOnInit() {
     this.generateHtml();
   }
   generateHtml(){
      // @ts-ignore
      const targetDiv = $('#table123')
       targetDiv.html(/*generate html logic*/);
   } 
}

Здесь, в моем динамическом html, у меня есть некоторые теги с классом pvtVal, но он не работает, что не так, яделать?