Estoy usando la directiva HostListener para escuchar el evento de clic en elementos del DOM.
@HostListener('click', ['$event.target']) onClick(e) { console.log("event", e) }Cuando hago clic en una etiqueta de botón, el objeto "e" tiene lo siguiente:
<button _ngcontent-abr-c111 type="button" class="close ng-tns-c111-3">x</button>Si recorro el objeto, muestra lo siguiente:
const objectList = Object.keys(e).map(k => ( console.log("key", k) )); // result = key __zone_symbol__clickfalsePero lo que me gustaría preguntar en mi código es, si el elemento botón tiene la clase "cerrar", si la tiene, haré una cosa y si no otra.
¿Cómo podría hacerlo? Gracias,"
Usar lista de clases
@HostListener('click', ['$event.target']) onClick(e) { if(e.classList.contains('close'){ //do stuff }else{ // } }El elemento que recibió de HostListener/Event es el objetivo, que es un HTMLElemenet o, en este caso, creo que HTMLButtonElement .
Puede usar los métodos JavaScript habituales para HTMLElements en ellos. En este caso, está buscando e.classList.contains('close') .