Angular 11 - HostListener event click and get value object-CodePudding

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" >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,"

CodePudding user response：

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').

CodePudding user response：

@HostListener('click', ['$event.target']) onClick(e) {
  if(e.classList.contains('close'){
   //do stuff
  }else{
   //
  }
}