click button from template Angular 6 - html

Question

I have this function:
windowInfo_(marker, i, data) {
'<div style="' + this.content_ + '">' +
'<div>' +
'<img [src]="' + "'" + this.image + "'" + '"' + ' style="' + this.image_ + '" alt="avatar">' +
'</div>' +
'<div style="' + this.details_ + '">' +
'<div>' +
'<h5 style="' + this.company_name + '">' + data.company_name + '</h5>' +
'<i class="fa fa-map-marker" id="' + this.country_city + '">' + data.country + ',' + data.city + '</i>' +
'</div>' +
'</div>' +
'</div>' +
'<button class="' + this.footerListing + '" type="button" (click)="details(data.id_listing)">Explore Trips</button>'
}
details(id) {
console.log(id)
}
As you can see, I have a button inside this template, and I want when I click it, details function to be triggered. But when I click it, nothing is happening. What do I need to modify in order to trigger the function? Thank you for your time!

Answer 1

You can do this by using HostListener:-
Just assign id to your button (i.e. <button id="your_button_id">Click</button>)
Now use HostListener to detect click event:-
#HostListener('click', ['$event'])
onClick(event) {
if (event.target.id === 'your_button_id') {
details(id);
}
}