I am using the HostListener directive, to listen for the click event on elements of the DOM.
@HostListener('click', ['$event.target']) onClick(e) {
console.log("event", e)
}
When I click on a button tag, the "e" object has the following:
<button _ngcontent-abr-c111 type="button" class="close ng-tns-c111-3">x</button>
If I loop through the object, it shows the following:
const objectList = Object.keys(e).map(k => (
console.log("key", k)
));
// result = key __zone_symbol__clickfalse
But what I would like to ask in my code is, if the button element has the "close" class, if it does, I will do one thing and if not another.
How could I do it? Thanks,"
The element that you received from the HostListener / Event is the target which is an HTMLElemenet or in this case I think the HTMLButtonElement.
You can use the usually JavaScript methods for HTMLElements on them. In this case you are looking for e.classList.contains('close').