Utilizing Angular 11's HostListener to capture click events and retrieve the value of an object

Using the HostListener directive, I am listening for the click event on elements of the DOM.

@HostListener('click', ['$event.target']) onClick(e) {
  console.log("event", e)
}

Upon clicking a button tag, the "e" object contains the following:

<button _ngcontent-abr-c111 type="button" class="close ng-tns-c111-3">x</button>

When I iterate through the object, it displays the following:

  const objectList = Object.keys(e).map(k => (
    console.log("key", k)
  ));

// result = key __zone_symbol__clickfalse

In my code, I want to check if the button element has the "close" class, and then perform different actions based on that condition. How can I achieve this? Thank you."

Answer №1

Implement classList

@HostListener('click', ['$event.target']) onClick(e) {
  if(e.classList.contains('close'){
   //perform actions
  }else{
   //handle other cases
  }
}

Answer №2

When you receive an element from the HostListener/Event, it is typically the target element, which in this scenario appears to be an HTMLElemenet, possibly even an HTMLButtonElement.

You can utilize the standard JavaScript methods for handling HTMLElements on these elements. In this instance, you may want to check if the element contains a certain class with e.classList.contains('close').

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting the current date as the default in an input box using ng-it: a step-by-step guide

How do I automatically set today's date as the default in the input box using ng-it? Here is my Plunker I am simply looking to set today's date as the default in the input field using ng-it. Would appreciate it if you could check out my P ...

Refresh the array object following a personalized filter

I am currently using a custom filter to aggregate a $scope object within an ng-repeat block. Here is my code snippet: $scope.myobj = isSelected ? $filter('customFilter')($scope.origObj) : $scope.origObj In the above code, $scope.myobj is util ...

This element is not suitable for use as a JSX component since its return type 'void' is not a valid JSX element. Please check the return type to ensure it is compatible with

I have been working on this code snippet: function searchData(searchWord: any) { if (originalData.length > 0) { if (searchWord !== "") { setDataList([...originalData.filter((svc: any) => ...

What is the best way to inform TypeScript that the output of the subscribe method should be recognized as an array containing elements of type

I'm facing a challenge understanding types while working with noImplicitAny and typescript in Angular 6. The compiler is indicating that the type of result is Object, even though I am certain it should be an array of type Manufacturer. Unable to assig ...

Tips for loading JSON data into the select2 plugin

My goal is to extract the last two letters (in this case "VA") from the data attribute (data-code="US-VA") of a jvectormap-element using JVectormap. I want to compare these letters with State objects in the database and then load corresponding counties in ...

The ui.bootstrap.carousel component seems to be missing from the display

My Carousel is not displaying for some unknown reason. I have customized the implementation based on my project requirements which differ slightly from the standard guidelines. Despite this, it should function correctly as detailed below. By clicking on m ...

Guide on passing the set[State] function to a trigger component that is not a descendent

Take a look at this diagram. ChildComponentB contains a state called stateX. In ChildComponentA, when a certain event occurs, it should modify the stateX in ChildComponentB. If ChildComponentA is a child component of ChildComponentB, passing the setStateX ...

Resolve problems with implementing dynamic routes in Next.js

I have been learning about Next.js and I am struggling with understanding how to set up dynamic routing. I have the following setup: https://i.stack.imgur.com/uBPdm.png https://i.stack.imgur.com/YYSxn.png "use client" import React from "reac ...

Migrating from jQuery to Vue: Resolving Uncaught TypeError - n.getClientRects is not a valid function

How do I convert this jquery code into Vue.js format? // Scale the cell item. $(document).on('click','.cell-item a', function(event) { event.preventDefault() var $this = $(this) console.log($this) // [a] - correct v ...

Loop through a JSON object within the collection of another ng-repeat loop

I'm facing an issue with my ng-repeat loop where I iterate through a JSON and display it in a table. The problem is that when I try to iterate through a nested JSON value, it's treating it as a string. <tr ng-repeat="(key,value) in event. ...

Updating the Ajax Url dynamically while scrolling

I am trying to update the Ajax URL dynamically, and here is my progress so far: var size=1; var from = 1; window.addEventListener('mousewheel', function(e){ if(e.wheelDelta<0 && from<5){ from++; } else if(e.whe ...

In my current project, I am working with Knockout and TypeScript but I am encountering difficulties in firing the window-resize event

Instead of using jquery, I prefer working with a custom handler for the $(window).resize(function () { ... event. If there is a way to achieve this without relying on jquery, please feel free to share it in the comments below. The code snippet below show ...

Discovering the class type in TypeScript

In my TypeScript coding journey, I encountered a challenge in detecting a specific Class type. Despite its seeming simplicity, I found a lack of straightforward documentation on how to accomplish this task. Here is an example that illustrates the issue: Cl ...

Error encountered while using the Fetch API: SyntaxError - the JSON data contains an unexpected character at the beginning

I've been troubleshooting a contact form and there seems to be an error causing it to malfunction. It's strange because when I switch from Fetch to XMLHttpRequest, the code works fine. With Fetch, if I don't request a response, no errors ar ...

Tips for setting a default value in an input type file using JavaScript

While trying to upload a file from my local system to the server, I encountered an issue where the local path was not being set in the input type file field. As a result, I am unable to successfully upload the file. I would greatly appreciate any assistan ...

JavaScript incorrectly constructs date strings

Hey there, I've been attempting to create a JavaScript date object using a string but for some reason, it's consistently off by one day. Every time I try, it ends up showing the wrong day. Below is the code snippet in question: var date = new Da ...

how to execute Vue-Js method just one time

Is there a way to add a random number (ranging from 0 to the price of an item) to one of the data properties in Vue.js, but only once when the page is initially loaded? I am unable to use mounted and computed because I need to pass a parameter to the funct ...

Tips for effectively organizing a collapsible list

Here is a list that I have: <ul> <li><span class="Collapsable">item 1</span> <ul> <li><span class="Collapsable">item 1.1</span></li> </ul> </ul> I am looking to create ...

Using Angularjs to bind an array element within an ng-repeat inside a directive

Having trouble displaying the elements of an array using ng-repeat with a directive. The binding is not working correctly and showing empty values. To view the code, visit http://jsfiddle.net/qrdk9sp5/ Here is the HTML: <div ng-app="app" ng-controlle ...

Trouble with Fetch in JS and PHP not sending parameters

Having trouble getting a PHP function to accept data from JavaScript, despite the PHP class working elsewhere in the application. The getTopFive() function works fine, but data insertion isn't happening as expected. Below is the code snippet along wit ...