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,"
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,"
Share Improve this question asked Mar 18, 2022 at 8:52 EladerezadorEladerezador 1,3118 gold badges29 silver badges53 bronze badges2 Answers
Reset to default 5Use classList
@HostListener('click', ['$event.target']) onClick(e) {
if(e.classList.contains('close'){
//do stuff
}else{
//
}
}
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').