How to pass template with event binding to directive?

Question

Angular

Good afternoon.

There are directives for 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
        });
    }
}

I need content to have a view template:

<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>

How is it possible to implement it?
I tried to do it through a component without directives, then in the component I can get the necessary div through viewchild and insert innerHTML into the content. But event binding still doesn't work.

Answer 1

In principle, you can put together some kind of freak, but I don’t see much sense.
Two ways are preferable.
1. Abandon tippy in favor of an angular-based lib.
2. Take a ready-made wrapper, here is angular-tippy googled. There may be more to look at.