[SOLVED] Angular 11 – HostListener event click and get value object

Issue

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

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

Answered By – Chellappan வ