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 не обрабатывает динамически добавленные элементы.
Как быть в таком случае?