Angular 6 Директива, которая внедряет HTML динамически

Question

Я использую директиву для динамического внедрения HTML в другие элементы HTML, особенно в другие компоненты, в которых я не могу изменить код.Моя проблема в том, что если я внедряю элементы HTML, в которых они вызывают локальную функцию из того же компонента, они не работают.Пример этого:

<button class="button-default" (click)="showTable()">Show table info</button>

В этом случае ничего не происходит, если вы нажимаете кнопку, функция не вызывается.

Код директивы:

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


@Directive({
    selector: '[insertHtml]'
})

export class InsertHtml {

    @Input()   targetHtml : string;
    @Input()   html : string;
    @Input()   position: any;

    private el: HTMLInputElement;
    constructor(private elementRef: ElementRef) { 
        this.el = this.elementRef.nativeElement;  

    }



  ngAfterViewInit() {

        let target = this.el.querySelector(this.targetHtml );
        target.insertAdjacentHTML(this.position, this.html);

    }
}

Как это работает, директива:

<div class="block" [insertHtml]="'ul.nav.nav-tabs'" [html]="htmlButtons" [position]="'afterend'">

htmlButtons - это код, который я поместил в пример примера.

Как я могу заставить функцию внутри введенных HTML-элементов работать?