После рендеринга в DOM пользовательская директива не работает с динамически созданным элементом

Question

Я пытаюсь сгенерировать динамический div по нажатию кнопки, где этот динамический div содержит свойство настраиваемой директивы. Но после рендеринга в DOM пользовательская директива не работает с динамически созданным элементом.

Я уже пробовал https://stackblitz.com/edit/angular-comp-interact-asd

comp1.component.ts

    let tmpdta = "<p appChangedta >Dynamic div</p>";
    this.dynamicDiv =  this.sanitizer.bypassSecurityTrustHtml(tmpdta);
  } 

comp1.component.html

<div [innerHtml]="dynamicDiv"></div>

changedata.directive.ts

  selector: '[appChangedta]'
})
export class ChangedtaDirective implements OnInit {

  constructor(private elemref: ElementRef, private renderer: Renderer2) { }

  ngOnInit() {
  }

  @HostListener('mouseenter') mouseenter(eventData: Event){
    this.elemref.nativeElement.innerText = "Mouse Enter";
  this.renderer.setStyle(this.elemref.nativeElement, 'background-color', 'green');
  }

  @HostListener('mouseleave') mouseleave(eventData: Event){
    this.elemref.nativeElement.innerText = "Mouse Leave";
   this.renderer.setStyle(this.elemref.nativeElement, 'background-color', 'deepskyblue');
  }

}