Angular 2+ calling functions of the component from appended HTML

Question

I have a question I am having a hard time finding the answer:

I need to append some HTML via JQuery inside my component :

$('.calendar-container').append('<div class="confirm-popover" style="top: ' + (this.popoverTop - 80) + 'px; left: ' + this.popoverLeft + 'px">' +
'<div class="day-container"><div class="day-start">MER</div><div class="day-num">' + this.firstDaySelected + ' Mai</div><div class="day-year">2018</div></div>' +
'<div class="separator">-</div>' +
'<div class="day-container"><div class="day-start">JEU</div><div class="day-num">' + this.lastDaySelected + ' Mai</div><div class="day-year">2018</div>' +
'</div><div class="buttons"><button id="days-validator" class="validate" i18n>Valider</button><br /><button class="cancel" i18n>Annuler</button><div class="triangle"></div></div>');

There are buttons in this code. I want to be able to handle click event on those and call component's functions. There must be a way to do that, right?

Possible duplicate of [Dynamically add event listener in Angular 2](https://stackoverflow.com/questions/35080387/dynamically-add-event-listener-in-angular-2) — Osakr, Jul 18 '18 at 10:23

score 0 · Answer 1 · answered Jul 18 '18 at 10:21

If you're using jQuery you can do it from the component controller. Using the .on() method:

$('body').on('click', '#days-validator', (event) => { 
    // Triggered when you press the Valider button
});

And you could do the same for the rest of the buttons

Angular 2+ calling functions of the component from appended HTML

1 Answers1