Discovering the clicked element within a QueryList<ElementRef> in Angular

Having a ElementRef(QueryList) of a group of dynamically created Table cells (td html elements) using ViewChildren, I have successfully debugged and verified the availability of the element set.

When clicking on a specific td html element, a function is called where I need to determine which element in ElementRef(QueryList) was clicked. How can this be achieved?

component.html

<table>

    <tr *ngFor="let i of Arr">
      <ng-container *ngFor="let j of Arr">
      
      <td  #tdID (click)="cellClicked(tdID)">
       
      </td>
      </ng-container>
    
    </tr>
    </table>

component.ts

Arr =[1,2,3];
 @ViewChildren('tdID') divs:QueryList<ElementRef>;

cellClicked(cell) {
       console.log("Cell clicked"+cell);
//Need assistance finding which element in the divs QueryList matches "cell"

}

Answer №1

<table>
    <tr *ngFor="let x of Array">
      <ng-container *ngFor="let y of Array">

      <td  #cellID (click)="clickedCell(cellID, x, y)">

      </td>
      </ng-container>

    </tr>
</table>

In your TypeScript file

clickedCell(cellID, x, y) {
   console.log(cellID, x, y)
}

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

What is the best way to incorporate the C# in keyword into TypeScript?

When coding in C#, I often utilize the in keyword within conditional statements. if (1.In(1, 2) I am curious about how to implement the IN keyword in typescript. ...

Is it feasible to use Angular2 in conjunction with ui-calendar?

Entering the fascinating world of Angular 2 has me feeling like a beginner again. My team and I had been utilizing angularjs with ui-calendar in our project, but now we're transitioning to Angular 2 due to new production requirements. The challenge ar ...

Tips for changing the color of an MUI 5 checkbox and label when hovering

I am looking to create a checkbox enclosed in a wrapper with a label. The goal is to change the color of everything inside the wrapper when it is hovered over. Here is an example image: Below is the code I have attempted: const styles = {formControlLabel: ...

The sequence of operations when assigning in Typescript with || and utilizing the array .find method

I need to ensure that the operations in my assignment are happening in a specific sequence. As far as I can tell, it should be following the order listed below. However, I have not been able to locate any documentation on TypeScript that definitively confi ...

Utilizing Angular 4's routing feature to pass parameters just like a

Greetings! I hope you are doing great. Currently, I am working on building an application using Angular 4 and I am facing a challenge regarding passing parameters in my routes, similar to how POST parameters are passed in HTTP requests. Can anyone provide ...

AmplifyJS is throwing an error: TypeError - It seems like the property 'state' is undefined and cannot be read

I am currently working on integrating the steps outlined in the Amplify walkthrough with an Angular cli application. My app is a brand new Angular cli project following the mentioned guide. My objective is to utilize the standalone auth components a ...

Tips for accessing data from a JSON file in a compiled Angular2 project

I have a scenario in my Angular2 project where I am fetching settings from a JSON file. However, after compiling the project for production using the ng build command, I noticed that the content of the JSON file is now inserted into the main.bundle.js. Thi ...

encountering the issue of not being able to assign a parameter of type 'string | undefined' to a parameter of type

Seeking help with the following issue: "Argument of type 'string | undefined' is not assignable to parameter of type" I am unsure how to resolve this error. Here is the section of code where it occurs: export interface IDropDown { l ...

html td elements are breaking due to the application of ngFor

<table> <tr> <th>Date</th> <th>Products</th> </tr> <tr *ngFor="let x of orderdetails"> <td>{{x.orderdate}}</td> <td *ngFor="let y of x.orderproducts"> <span class="break">{{y}}</s ...

Navigating dropdown list items using the keyboard in TypeScript is a breeze

I've encountered a bug while working on my open-source project. The issue is with navigating the dropdown list items using the keyboard (arrow key/tab). I have implemented the keyboard-navigation logic, but I'm unsure of how to make it work corre ...

Common problems encountered post Typescript compilation

I encountered the same problem. Below is my tsconfig settings: "compilerOptions": { "module": "commonjs", "moduleResolution": "node", "newLine": "LF", &q ...

Retrieve functions contained within the component.ts file of an Angular library: tips and tricks

I have developed an Angular library, named 'mylib', where I have utilized only the mylib.component.ts file. The HTML element codes are included inside the template variable of this file, along with the functions responsible for modifying these el ...

How can I display an ng-container or ng-template without using *ngIf?

I am trying to incorporate the tappable directive into the ion-card component within a custom component. I am using an @Input() myInputBool, similar to this: <ng-container *ngIf="myInputBool"> <ion-card> <ng-container r ...

Is there a way to attach numerical values to CSS in order to generate a timeline effect?

My goal is to arrange div elements on a timeline based on an array of floats ranging from 0 to 1. The idea is to have the elements positioned along the timeline according to these float values, with 0 representing the beginning and 1 indicating the end. ...

How can I assign a specific class to certain elements within an *ngFor loop in Angular?

I have a situation where I am utilizing the *ngFor directive to display table data with the help of *ngFor="let record of records". In this scenario, I am looking to assign a custom CSS class to the 'record' based on specific conditions; for exam ...

Why is my custom 404 page failing to load after building my Next.js application?

I recently set up a custom 404 page for my Next.js app and wanted to test it locally before deploying to the server. To do this, I used the "serve" package to host the project on my local machine. However, when I tried navigating to a non-existent page, th ...

Troubleshooting Observable data in Angular 2/Typescript - A Comprehensive Guide

After going through the Angular 2 tutorial, I managed to create a search feature that asynchronously displays a list of heroes. <div *ngFor="let hero of heroes | async"> {{hero.name}} </div> In my component, I have an observable array of ...

Is it no longer possible to instantiate an object using the syntax <interface>{}?

There seems to be an issue with the code snippet below when run in the TypeScript playground: interface Person { name: string; age: number; } const makePerson= function(name : string, age : number) : Person { let obj = <Person>{} ...

Encountered error in Angular unit testing: Route matching failed to find a match

I am currently working on unit testing in my Angular 15 application. While running the test, I encountered the following error: Error: Cannot match any routes. URL Segment: 'signin' Below is the code for the unit test of my component: fdescribe ...

Angular 2 - The magic of the @Injectable() decorator

I'm a bit confused about the purpose and usage of the @Injectable decorator in Angular 2. Surprisingly, my service still works even though I haven't used it myself. (Check out the examples below) Can someone explain to me why we need the @Inject ...