Tally the number of clicks for every item in the Typescript list

There is a button associated with each element in the list.

<li *ngFor= "let item of itemList">
     <button [ngClass]="'button'" (click)="increaseCounter(item)">Click me</button>;
    {{item.count}}
 </li>

The goal is to have a counter that increments independently for each button. Here's the current implementation:

count: number = 0;
increaseCounter(item) {
    item.count++;
}

The issue is that the buttons do not have independent functionality. Is there a way to write a function that works separately for each button?

Answer №1

To keep track of each rate object, it is important to have a count property associated with it that can be incremented.

An example implementation could look something like this:

<li *ngFor= "let rate of rateList">
     <button [ngClass]="'button1'" (click)="incrementCount(rate)">+</button>;
    {{rate.count}}
 </li>

In the corresponding TypeScript file:

incrementCount(rate:any) {
    rate.count += 1;
} 

Check out the demo on StackBlitz

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

Error message in Angular 2, Problem found in inline template while utilizing eval() function

<li *ngFor="let pdfifRecord of pdf.ifRecord;let i=index"> <p>{{eval(pdfifRecord.labelMsg)}}</p> </li> I need to show the output of the eval function. Encountering an error message: Error in inline template c ...

What is the purpose of declaring data types such as string, number, boolean, void, and others in Angular 2

I'm curious as to why programmers declare classes in individual scope or something. For example, take a look at this code snippet: result: boolean = false public generateRand(x): void { } This is also similar to the following: result = false publi ...

Angular 2 encounters issues with *ngFor functionality

I am currently experiencing some difficulties while trying to use *ngFor to access an array of objects in Angular 2. When I define the array like this: employees=[ {name:'a',age:'25'}, {name:'b',age:&apo ...

Utilize Angular2 to dynamically add new routes based on an array register

Currently, I am utilizing Angular2 for the frontend of my project and I am faced with the task of registering new Routes from an array. Within my application, there is a service that retrieves data from a server. This data is then stored in a variable wit ...

What is the solution for the error "does not exist on type 'HTMLTableDataCellElement'" in Angular?

When working on my Angular project, I implemented a PrimeNG p-table component. <p-table [value]="users" class="user-roles-table" [rows]="5" [showCurrentPageReport]="true" [ ...

"I am looking for a way to receive a response from a loopback in Angular7

Currently, I am utilizing angular7 with loopback. While I can successfully retrieve data, I am unsure how to receive error messages and response statuses. It would be helpful for me to understand what my response code is at the time of the request. Output ...

What is the best way to target all select2 elements with a single button click?

Utilizing the Select2 feature of angular for multiple selection, I am in need of a function that allows me to select all elements with a single click on a button or checkbox. https://www.npmjs.com/package/ng-select2 My attempt at inserting all ele ...

Using a functional wrapper component to reset the modal field in Reactstrap upon closing and reopening

In the main component that displays a list of to-do tasks, we have the ability to add or edit existing tasks. To facilitate this functionality, a separate wrapper was created. import React, { useEffect, useState } from 'react'; import { Label ...

The cross-origin resource sharing configuration has not been implemented

I have SenseNet 7.0.0 and ASP.NET 5.2.3 set up, with my Angular (Typescript) application running on localhost:4200 and the ASP.NET application running on localhost:55064. I followed this tutorial for installing Sensenet and used this tutorial for installin ...

When compiling TypeScript, the exported module cannot be located

I've encountered an issue while working on my TypeScript project. Upon compiling my code with the following configuration: { "compilerOptions": { "target": "ESNext", "module": "ESNext", & ...

Error in TypeScript: The property 'data' is not found within type '{ children?: ReactNode; }'. (ts2339)

Question I am currently working on a project using BlitzJS. While fetching some data, I encountered a Typescript issue that says: Property 'data' does not exist on type '{ children?: ReactNode; }'.ts(2339) import { BlitzPage } from &q ...

There is no throttleTime function available in Angular 6 within Rx Js

Currently, my Angular 6 project is utilizing angular/cli": "~6.1.5 and rxjs": "^6.0.0. As a newcomer to Angular 6, I decided to dive into the official documentation to enhance my understanding. Here's a reference link I found useful: http://reactivex ...

Execute function when button is not active

Within my Angular 2 application, I have a form along with the following code snippet that relates to the button responsible for submitting the form. <button (mouseover)="showMesageValidation()" class="edm-button" type="submit" [disabled]="!f.valid"> ...

Does the size of a JavaScript heap, when it's big but not enough to cause a crash, have the potential to slow down a website, aside from just having an

Utilizing angular material dialog, I have incorporated a mat stepper with three tables (one per step), where one or two of them may contain an extensive amount of records. I have already integrated virtual scrolling to improve performance. However, when ...

Working with nested arrays in TypeScript and how to push values onto them

I am facing some challenges with nested array behavior in TypeScript. I am looking for a way to define a single type that can handle arrays of unknown depth. Let me illustrate my issue: type PossiblyNested = Array<number> | Array<Array<number& ...

Updating the status of various sections with Redux toolkit

Is it possible to update the state of a store, which consists of multiple slices, with a new state in React using Redux Toolkit? While you can revert the entire store to its initial state using extraReducers, is it also possible to change the state to som ...

The Angular application is showing "&#40" instead of "("

When I make an HTTP request and receive JSON data, I encounter a problem when displaying it in my HTML using curly braces {{}}. Certain characters like "(" appear as "&#40". Is there a way to convert these special characters back to their normal form? ...

Setting an array of objects using TypeScript in the useState hook: A step-by-step guide

const response = { results: { items: [ { name: 'item1', }, { name: 'item2', }, { name: 'item3', }, { ...

How to transfer the returned value from an anonymous callback function to the `this` keyword in an ionic2 angular4 project

Currently, I am utilizing a custom geolocation provider that operates asynchronously. It takes approximately 3-5 seconds to retrieve the user's location. Using an anonymous callback function works fine when I console.log the results and view the value ...

Modify the arrow design for the expansion panel's default arrow style

Looking to customize the design of an angular expansion panel? Check out the images below for inspiration: Before Customization: https://i.sstatic.net/4u6NS.png After Customization (Not expanded): https://i.sstatic.net/8N6Br.png After Customization (E ...