Как передать шаблон с event binding в directive?

Question

[Андрей]

Добрый день.

Есть директив для tippy.js:

import { Directive, ElementRef, Input, NgZone, ViewChild } from '@angular/core';
import tippy, { Instance } from 'tippy.js';

@Directive({
    selector: '[tooltip]'
})
export class TooltipDirective {

    private instance?: Instance;
    private _content?: string;

    get content() {
        return this._content!;
    }

    @Input('tooltip') set content(content: string) {
        this._content = content;
        if (this.instance) this.instance.setContent(content);
    }

    constructor(
                private host: ElementRef<Element>,
                private zone: NgZone) { }

    ngAfterViewInit() {
        this.instance = tippy(this.host.nativeElement, {
            content: this.content,
            allowHTML: true
        });
    }
}

Мне надо, чтобы в content был шаблон вида:

<div class="tip-content" id="tablemenu">
	<div class="dropdown-menu">
		<ul>
			<li>
				<a class="dropdown-menu-icon dropdown-menu-remove" (click)="onDelete(materialRow!)">Удалить</a>
			</li>
			<li>
				<a href="#" class="dropdown-menu-icon dropdown-menu-edit">Редактировать</a>
			</li>
		</ul>
	</div>
</div>

Как это возможно реализовать?
Попробовал сделать через компонент без директив, тогда в компоненте могу через viewchild получить нужный div и вставить innerHTML в контент. Но event binding все равно не работает.

Answer 1

[Антон Швец]

В принципе можно скостылить какого-нибудь уродца, но смысла большого не вижу.
Предпочтительней два пути.
1. Отказаться от tippy в пользу основанной на ангуляре либы.
2. Взять готовую обертку, вот angular-tippy нагуглилось. Может еще что есть, надо смотреть.