Angular 8 Добавить событие (click) к динамически добавленному элементу

Есть изначально спрятанное всплывающее окно, и несколько кастомных элементов. В зависимости от того на какой элемент кликнул пользователь всплывающее окно показывается с определённым наполнением

Всплывающее окно:

<div [class.hidden]="tooltipHidden" id="tooltip">
    <ul id="tooltip-content">

    </ul>
</div>

Один из кастомных элементов:

<div (click)="toggleTooltip(2)"></div>

Функция toggleTooltip():

toggleTooltip(id) {
    document.getElementById('tooltip-content').innerHTML = this.tooltipContent[id - 1];
    this.tooltipHidden = !this.tooltipHidden;
}

При этом tooltipContent это массив строк с html-разметкой (просто куча <li> элементов). Не самый лучший способ, но на нём уже работает большая часть сайта.

НО! Проблема в том, что при клике на один из кастомных элементов нужно вставить кнопку с функционалом angular. Пример:

<li (click)="openTest()>TEST</li>

А angular не обрабатывает динамически добавленные элементы.

Как быть в таком случае?


Ответы (0 шт):