Transferring dynamic data to an Angular component's controller

Here's what I currently have:

<div *ngFor="let career of careers">
    <label>{{career.name}}</label>
    <input type="checkbox" attr.id="{{career.id}}" (change)="doSomethingWithId($event.target)"
</div>

This is the TypeScript Component code:

doSomethingWithId(target: Element): void {
     console.log(target.attributes.id);
}

The error message related to the id attribute is:

Property 'id' does not exist on type 'NamedNodeMap'.

I'm unsure whether using attr.id is the most suitable approach, or if it should be just id, or even data-id. However, my goal is to capture the career.id of the clicked item.

Answer №1

You need to make a correction in the binding of your id. Update the code as follows:

 attr.id="{{career.id}}"

Change it to this:

[attr.id]="career.id"

Update 1 If you only require the career id, you can directly pass it in your function like this

<input type="checkbox (change)="doSomethingWithId(career.id)"

And in your service

doSomethingWithId(target): void {
     console.log(target);
}

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 correct method for storing a response in an array variable in Angular?

I am looking to save the response data from an API call in a variable and display it in the component.html file. Component.ts file : public coinsHistory = []; this.service.getCoinsHistory().subscribe( (response) => { this.handleCoinsRespon ...

I'm curious if there is a method to implement Angular Datatables that includes a filter for every column in a more streamlined and efficient manner?

Incorporating Angular 7 and Angular DataTables "the angular way", I aim to implement individual column filters similar to "Individual column searching" as demonstrated here: , which is presented as a non-angular approach. My attempts to merge "the angular ...

How can I retrieve the document id from Firestore using Angular?

I attempted to generate an auto document ID in Firestore and retrieve the document ID in Angular 8 using the code provided. However, I am encountering an issue where I only receive the document ID after the execution has been completed. Can someone pleas ...

To continue receiving rxjs updates, kindly subscribe if the specified condition is met

Is there a way to check a condition before subscribing within the operator chain? Here's what I have: // parentElem:boolean = false; // the parent elem show/hide; let parentElem = false; // inside the ngAfterViewInit(); this.myForm.get('grandPa ...

Is it acceptable to manipulate the prevState parameter of the setState function as mutable?

It is commonly known that directly modifying this.state is not recommended, and instead setState should be used. Following this logic, I assumed that prevState should also be treated as immutable, and setState should always involve creating a new object i ...

The problem with URL encoding causing issues with Angular 2 navigation

I've encountered an issue with my Angular 2 website. When I input optional parameters in Chrome, such as this URL gets converted to and fails to locate the page in Chrome. Strangely, it works perfectly when pasted in incognito mode. As a newcomer to ...

Testing the integration of socket.io with Angular through unit tests

Currently, I am in the process of unit testing an angular service within my application that is responsible for creating a socket.io client. The structure of my service can be seen below: export class SocketService { private name: string; private host ...

Error message in TypeScript: A dynamic property name must be a valid type such as 'string', 'number', 'symbol', or 'any'

Attempting to utilize the computer property name feature in my TypeScript code: import {camelCase} from "lodash"; const camelizeKeys = (obj:any):any => { if (Array.isArray(obj)) { return obj.map(v => camelizeKeys(v)); } else if (ob ...

What is the best way to decouple api and async request logic from React components while incorporating Recoil?

Currently, I find myself inserting my request/api logic directly into my components because I often need to set state based on the response from the backend. On my settings page, I have a function that saves the settings to recoil after the user clicks sa ...

Setting up a ts-node project with ECMAScript modules. Issue: Unrecognized file extension ".ts"

I am currently in the process of setting up a minimalistic repository that incorporates ts-node and ESM for a project. Despite the existence of previous inquiries on this topic, I have encountered numerous outdated responses. Even recent answers appear to ...

Step-by-step guide to developing an Angular 2+ component and publishing it on npm

I need assistance with creating an AngularX (2+) component and getting it published on npm. My objective is to publish a modal component I developed in my current Angular App, though currently, I am focusing on creating a <hello-world> component. It ...

Eslint for Typescript in Vue is throwing an error with a message "Unexpected token, expecting ','. Make sure to

Whenever I attempted to utilize vue's type assertion, I kept encountering this eslint error. To illustrate, consider the following snippet: data: function () { return { sellerIdToListings: {} as any, // 'as' Unexpected to ...

Can you explain the meaning of `images:Array<Object> = [];` in TypeScript?

Recently, I stumbled upon this code snippet in TypeScript images:Array<Object> = []; I'm curious, what exactly does the "<>" notation signify? ...

Creating a TypeScript client using NSwag with named properties: A step-by-step guide

Our TypeScript client is created from a swagger interface using NSwag. The resulting client code typically looks like this: client.EndPointFoo(arg1, arg2, arg3, ...) However, we encounter issues when NSwag changes the order of arguments in response to mo ...

Need help with npm installation woes? In search of tips on ensuring version compatibility for Angular V16?

I've been facing numerous challenges with npm installation recently and could really use some guidance. Whenever I attempt to execute npm install, I consistently encounter version compatibility errors that disrupt my development process. It's bec ...

Retrieving data from an API using VUEJS3 and Typescript

I am facing an issue with displaying data in my template. When I try to do so, the screen remains blank. I am using Vue.js 3 with TypeScript and I am fairly new to this technology. <template> <div> <img :src="datas[0].imag ...

Lite-server experiences a denial of service problem

After installing lite-server today, a vulnerability to denial of service was detected. I am concerned about the impact it may have on my system if I continue using lite-server. Is there a solution available to address this issue? ...

Changing dates in JavaScript / TypeScript can result in inaccurate dates being displayed after adding days

Recently, I encountered an issue with a simple code snippet that seems to produce inconsistent results. Take a look at the function below: addDays(date: Date, days: number): Date { console.log('adding ' + days + ' days'); con ...

The ion-list will only load image URLs once the height has been established

I've been dealing with a technical issue that I don't have much experience in, and I'm struggling to find a solution. While I now understand the root cause of the problem, I am unsure how to resolve it. The webpage I am working on sends a r ...

Error in Angular Material: SassError - The CSS after "@include mat" is invalid. Expected 1 selector or at-rule, but found ".core();"

My Angular 11 project was running smoothly with Angular Material version 11 until I decided to update everything to Angular 12, including Material. However, after the update, the styles.scss file that comes with Material started throwing errors. The comple ...