What is the best way to set the index value as the id for a div element?

Currently I am working with Angular 2.0 and have an array named addExtra: number[] = [0,1,2,3];.

This is the HTML code I am using:

<div *ngFor="let val of addExtra">
    <div class="row">
        <div style="margin-left:15px;">
            <button class="btn btn-danger btn-delete"
            (click)='delete(val)'>
                <i class="fa fa-times" aria-hidden="true"></i>
            </button>
            <label for="isCheckBox">Draw</label>
            <input id=val type="checkbox" class="setCheckbox" (change)="isChecked($event)" style="vertical-align: text-bottom;" />
        </div>
    </div>
</div>

I want to know how to assign 0, 1, 2, 3 as ids to the checkboxes based on the values of the array.

angulartypescript

Answer №1

<div *ngFor="let item of additionalItems; let j = index;">
        <div class="row">
            <div style="padding-left:20px;">
                <button class="btn btn-warning btn-remove"
                (click)='removeItem(item)'>
                    <i class="fas fa-times-circle"></i>
                </button>
                <label for="isCheckAnnoying">Tick</label>
                <input id="isCheckAnnoying" name={{j}} type="checkbox" class="checkBox" (change)="markChecked($event)" />
            </div>
        </div>
    </div>

Answer №2

It's not possible to assign multiple IDs to an HTML element.

<input id={{val}} type="checkbox" class="setCheckbox" (change)="isChecked($event)" style="vertical-align: text-bottom;" />

Answer №3

<input name="{{value}}" type="checkbox" class="checkBoxSet" (onchange)="checkStatus($event)" style="vertical-align: middle;" />

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

You cannot assign type 'Node | null' to type 'Node' when attempting to loop through HTML elements in TypeScript

In my code, I am taking a raw Markdown string stored in 'markdownString' and using the marked.js library to convert it to HTML for display on a web browser. My goal is to extract all plain text values from the page and store them in an array of s ...

htmlnode.jstypescriptdomdomparser

The functionality of ZoneAwarePromise has been modified within the Meteor framework

After updating to the latest Angular 2.0.1 release on Meteor 1.4.1.1, I'm facing an error that says: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten I've attempted running meteor update and meteor reset, b ...

javascriptmeteorangularpromisezonejs

Creating a TypeScript object declaration

I am looking for some help with converting this JavaScript code to TypeScript. I am new to both languages, and when trying to access the 'this' object in my TypeScript version, I get an error message saying that 'this possibly be unknown&apo ...

javascripttypescriptsingleton

The Forge Viewer's getState() function is providing inaccurate values for individual items

In our Angular application, we have integrated the latest version of Forge Viewer and are storing the current state of the viewer in our database for future restoration. After thorough testing, we discovered that isolated nodes are not being saved correct ...

javascriptangularautodesk-viewer

Implementing handleRequest as an asynchronous function within the passportjs guard

@Injectable() export class RefreshAuthGuard extends JwtAuthGuard { constructor( private readonly jwtService: JwtService, ) { super(); } public handleRequest(err: any, user: any, info: Error, ctx: any): any { if (err ...

typescriptnestjs

Deploying an Angular application on Firebase is a great way to

I am facing an issue with hosting my Angular(5) project on Firebase. Although I have successfully deployed the application, when I access the project URL, it displays a default Firebase hosting screen instead of my actual Angular project. https://i.stack. ...

angularfirebasehostingfirebase-hosting

Tips for showing nested array values in Angular 8

I'm new to using angular and I'm attempting to display values from an array within another array in a table format. Here is my JSON array that I'd like to display in rows: { "data": { "Influencer": [ { ...

arraysangulartypescriptobjectangular8

What is the significance of utilizing the "NgForm" tag in Angular applications?

What is the rationale behind using "NgForm" in a form tag when this attribute is already automatically attached to the tag? Could this be a typo? What advantages does using this tag bring, and is there a way to utilize it without direct attachment? ...

angular

The installation of the module assets-webpack-plugin was not completed through the npm install command

When trying to install assets-webpack-plugin from https://github.com/ansrivas/angular2-flask by running npm install within the front/ folder, I encountered an issue where the plugin was not being added to node-modules/ as expected. Strangely enough, when ...

angularnpm

Angular2 array sorting function is not functioning properly on mobile browsers

I'm currently working with a code snippet that looks like this: const words = ['apple', 'banana', 'zoom'] words.sort((first, second) => { const a = first; const b = second; return a == b ? 0 : a < b || a == ...

angulartypescript

Angular 4: The types "AbstractControl" do not have the property "push" or "controls" available

I tried implementing the code found at http://plnkr.co/edit/yV94ZjypwBgHAlb0RLK2?p=preview, but I am encountering errors related to push and controls. I followed the instructions provided, but I am unsure of what is causing the issue. import { Component ...

angulartypescript

Having difficulty forming queries correctly using TypeScript, React, and GraphQL

Apologies for the potentially naive question, but I am new to working with GraphQL and React. I am attempting to create a component that contains a GraphQL query and incoming props. The props consist of a query that should be passed into the GraphQL query. ...

reactjstypescriptnext.jsapolloreact-apollo

Converting a TypeScript class to a plain JavaScript object using class-transformer

I have a few instances of TypeScript classes in my Angular app that I need to save to Firebase. However, Firebase does not support custom classes, so I stumbled upon this library: https://github.com/typestack/class-transformer which seems to be a good fit ...

javascripttypescriptclass-transformer

What are the steps for deploying an Angular 6 application on an Express server?

In my express server.js file, I have the following line of code: app.use(express.static(path.join(__dirname, '/dist/'))); This line is responsible for serving up the Angular app when users navigate to /. However, if the app has additional route ...

angularexpress

Traverse a tree structure of nested child objects in an Angular template using a JavaScript

Check out the Javascript object below: { "id": "1554038371930_ajhnms9ft", "name": "CPS", "nodes": [ { "id": "1554038905938_le34li2cg", "name": "Consumer Journey", "nodes": [ { ...

javascriptangularloopsobject

Execute Angular's custom builders one after the other

I am currently working on an Angular 13 project that involves custom builders. One of these builders generates a file containing a $templateCache module, which can take some time to complete. The problem arises when the main Angular builder starts before ...

angularrxjs

React.js with Typescript is throwing an error stating that a property does not exist on the child component

Currently, I am working with React in conjunction with typescript 2.3.4. I keep encountering the error TS2339: Property 'name' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'. This issue arises wh ...

reactjstypescript

Creating a variable within an ngFor loop

For my angular2 project, I need to display a matrix of workers and courses. Here's the current code I am using: <tr *ngFor="let worker of workers"> <td class="{{worker.fired ? 'fired-worker':''}}">{{worker.lastName ...

angular

I need help creating a functional Component in react and utilizing destructive assignment. I attempted to write some code but it doesn't seem to be functioning properly

Can someone help me convert this into destructive assignment? I keep getting the error message Binding element 'onClickBackDrop' implicitly has an 'any' type.ts(7031) I'm struggling to figure out where I went wrong import React ...

reactjstypescriptreact-functional-component

NPM Package: Accessing resources from within the package

My Current Setup I have recently developed and published an npm package in typescript. This package contains references to font files located within a folder named public/fonts internally. Now, I am in the process of installing this package into an Angul ...

angulartypescriptnpmrelative-path