Tips for retrieving the button value when clicked within Angular 4

I have a scenario where I am working with 4 buttons, each having a unique value. However, when I try to log the values in the console, it shows up as undefined.

Here is the HTML code:

<button type="submit" class="parcel-btn weight-option" value="25" (click)="onItemSelector()">
<button type="submit" class="parcel-btn weight-option" value="50" (click)="onItemSelector()">
<button type="submit" class="parcel-btn weight-option" value="250" (click)="onItemSelector()">
<button type="submit" class="parcel-btn weight-option" value="100" (click)="onItemSelector()">

And here is the Typescript code:

onItemSelector() {
  const weightSelector = this.elm.nativeElement.querySelectorAll('.weight-option').value;
  console.log(weightSelector);
}

Answer №1

Give this a shot

Utilize the onItemSelector function by passing the value

   <input type="button" class="weight-btn submit-option" (click)="onItemSelector(50)">

Retrieve and display the value in TypeScript file

onItemSelector(val :any) {
console.log(val);
}

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

Refresh a controller that is not controlled by ngRoute when a route changes

When accessing my web application, the login process unfolds in several steps: a. The user initiates the login process by clicking on the login button, which redirects them to http://localhost:3030/login/facebook b. Once this request reaches the NodeJS b ...

"Disabling border-radius for Bootstrap input fields in Angular: A step-by-step guide

I've been using Bootstrap input controls and attempting to remove the border by setting it to 0px, but unfortunately it's not working as expected. Despite looking at numerous posts on this topic, none of the solutions seem to be effective for me ...

Utilizing AJAX to Dynamically Integrate TinyMCE Editors in Grails

I have a feature on my website where users can add an unlimited number of TinyMCE editors, each wrapped in some div elements. The HTML code is stored in a Groovy Server Pages (GSP) template because it's lengthy and I didn't want to clutter up th ...

The data is being retrieved accurately, but unfortunately, it is not showing up correctly when displayed

Currently facing an issue with displaying returned data in a p and textarea element. The function I'm utilizing successfully fetches each key from the comments node and retrieves the comment title and message as expected... function loadComments() { ...

In order to eliminate an array from a nested array, iterate through the remaining arrays using vanilla JavaScript. After removing the specified array, loop through each value within the nested arrays to complete the task

let linkMatrix = [ [0,0,1,0], [1,0,0,1], [1,1,0,1], [0,1,0,0] ]; let newMatrix = []; function linkToPage(){ for(let j = 0; j < linkMatrix.length; j--){ newMatrix = linkMatrix.splice(linkMatrix[j], 1); console.log( ...

Relocating sprite graphic to designated location

I am currently immersed in creating a captivating fish animation. My fish sprite is dynamically moving around the canvas, adding a sense of life to the scene. However, my next goal is to introduce food items for the fishes to feast on within the canvas. Un ...

What is causing this code to break when using ajax's `data` parameter?

I'm relatively new to JavaScript, and I've been working on some code that seems to be properly formatted. However, whenever I add the data elements, it breaks the code. I've checked the jQuery documentation and as far as I can tell, I'm ...

How to showcase ByteArrayContent using Angular

I have a Web API that has been functioning well for two years in existing Knockout and polymer applications, so I don't want to make any changes to it. Now, I am trying to integrate Angular and need to display an image from the API. Below is the code ...

Utilizing Flask for analyzing characteristics of text presented in JavaScript

My current variables consist of: myfruits = ['Apple', 'Banana', 'Lemon'] havefruit = [True, True, False] If the user input changes the values in havefruit, I need to implement JavaScript in my HTML file to display the entrie ...

Encountering a 401 Unauthorized error while using the Post method with Angular 2 on the frontend and CakePHP 3 on the backend

Using Angular 2 for both the Front end and Back end within Cakephp 3, encountering a 401 Unauthorized status error during the login process. Although JWT has been configured in Cakephp 3 and works well in POSTMAN, it fails to work seamlessly with Angular. ...

Unexpected Error with Background Position Variable

Hello, I am attempting to create an animated background effect that moves up and down using the .animate() and .hover() methods in jQuery. Within my DOM, there is a div with id="#menu" containing a UL list where each item has a background positioned at dif ...

Create an array containing elements based on specified type values

How can I create an array that is initialized with values depending on a specific type? type Animals = 'monkey' | 'elephant' | 'lion'; const animalsArray: Array<Animals> = []; // ['monkey', 'elephant&apos ...

Angular URL containing dynamic path parameters

I am looking to update the Angular URL to /jobs/id. I have written the code below, but I'm unsure if it will work: $location.path("/JobHire/jobs/"+response.data.id); How should I set up the route configuration? Currently, I have it configured like t ...

Guidelines for recompiling a directive after it has been added to the DOM (angularjs)

After successfully creating a directive, let's call it <calendar></calendar> It displays as intended and functions correctly. However, my current dilemma is how to (re)render it once it has been added to the DOM. Constantly having it on ...

Launch the jQuery Fancybox on a separate webpage

I am facing an issue where I have a link in my index.html page and I need it to open a div located in another page named index2.html, but for some reason, it is not working. This is the code I currently have: Link in index.html <a href="#modal" id="o ...

Replacing an existing pie chart with a new one using JavaScript

I created pie charts using chartjs V2.6.0, and everything was working fine until I encountered an issue. Whenever I input new data into the same chart, it keeps displaying the previous data when hovering over. I attempted to fix this by using the $('# ...

Angular Component Provider based on conditions

My component relies on a service that can be provided by its parent component or create a new instance of the service based on a dynamic condition. However, specifying a provider causes the parent instance of the service to be lost. Is there a way to acces ...

Addressing the issue of prolonged Electron initialization

Scenario After spending considerable time experimenting with Electron, I have noticed a consistent delay of over 2.5 seconds when rendering a simple html file on the screen. The timeline of events unfolds like this: 60 ms: app ready event is triggered; a ...

Dynamic form name validation in Angular is crucial for ensuring the accuracy and

When it comes to validating a form in Angular, I usually use the ng-submit directive like this: <form name="formName" ng-submit="formName.$valid && submitForm()"></form> This method works well for forms with predefined names that I se ...

Finding out if an array is empty or not in Reactjs: A Quick Guide

I am currently working with Reactjs and Nextjs. I am using axios to fetch data, and I need a way to determine if the array (students.data) is empty before running a map or loop. How can I achieve this? Here is the code snippet I am working with: const [stu ...