Skip to content
Fix Code Error

ngFor with index as value in attribute

March 13, 2021 by Code Error
Posted By: Anonymous

I have a simple ngFor loop which also keeps track of the current index. I want to store that index value in an attribute so I can print it. But I can’t figure out how this works.

I basically have this:

<ul *ngFor="#item of items; #i = index" data-index="#i">
    <li>{{item}}</li>
</ul>

I want to store the value of #i in the attribute data-index. I tried several methods but none of them worked.

I have a demo here: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

How can I store the index value in the data-index attribute?

Solution

I would use this syntax to set the index value into an attribute of the HTML element:

Angular >= 2

You have to use let to declare the value rather than #.

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

Angular = 1

<ul>
    <li *ngFor="#item of items; #i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

Here is the updated plunkr: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview.

Answered By: Anonymous

Related Articles

  • Combining items using XSLT Transform
  • What is the worst programming language you ever worked with?
  • Python is not calling fucntions properly
  • How do i update a javascript variable as its value changes?
  • How do you easily create empty matrices javascript?
  • How does PHP 'foreach' actually work?
  • PHP parse/syntax errors; and how to solve them
  • Active tab issue on page load HTML
  • Is it possible to apply CSS to half of a character?
  • Next.js - Warning: Prop `dangerouslySetInnerHTML`…
  • Octave using 'for' statement to show two animations…
  • How to reset after dynamically loading data using in…
  • How can I use/create dynamic template to compile…
  • Resetting forms in Polymer 2.x
  • What's the difference between eval, exec, and compile?
  • Cannot update nested dictionary properly
  • Access preview api from a CMS in Next.js
  • data.table vs dplyr: can one do something well the…
  • center images with each other in logo carousel
  • Dynamic tabs with user-click chosen components
  • Ember.js belongsTo relationship undefined but…
  • Can't install via pip because of egg_info error
  • access key and value of object using *ngFor
  • After a little scroll, the sticky navbar just is not…
  • Working demo of state management in Polymer 2.x using Mixins
  • Examples of GoF Design Patterns in Java's core libraries
  • Creating a custom counter in Spark based on…
  • Subtract three rows from an array in angular 7
  • Angular exception: Can't bind to 'ngForIn' since it…
  • Polymer 2.0 nested iron-pages
  • How to send post request to the below post method…
  • Smart way to truncate long strings
  • How to add 'load more' functionality to items on a…
  • Convert JSON File which contains multiple dictionary…
  • Convert array to nested JSON object - Angular Material tree
  • Ember - Return a promise from beforeModel not…
  • Using Polymer.dart to manipulate the shadow DOM from…
  • Why doesnt my table sort my div variable in numerical order?
  • Formatting JSON using the RESTSerializer in the…
  • Centering in CSS Grid
  • Add Bootstrap Glyphicon to Input Box
  • Asking the user for input until they give a valid response
  • How to implement bootstrap-datepicker as Aurelia…
  • Git merge with force overwrite
  • beginner with vue.js treeview
  • Keras Sequential API is replacing every layer with…
  • Data binding in a dynamically inserted polymer element
  • I want to keep a long process running in the…
  • How to filter a RecyclerView with a SearchView
  • Why does C++ code for testing the Collatz conjecture…
  • How not to get a repeated attribute of an object?
  • How to enable Keyboard navigation between…
  • Iterate over JSON and print values in Vue.js
  • For-each over an array in JavaScript
  • What does "Fatal error: Unexpectedly found nil while…
  • Round number to nearest integer
  • What is Ember RunLoop and how does it work?
  • How to create a fix size list in python?
  • Delegation: EventEmitter or Observable in Angular
  • Difference between git checkout --track…
  • How to access innerHTML of a template in the content…
  • Catching errors in Angular HttpClient
  • Display Grid does not work in Polymer correctly
  • How to get to work in Polymer 2.x
  • What is an optional value in Swift?
  • Polymer 1.x: How to filter iron-data-table?
  • Fix top buttons on scroll of list below
  • How to show title in hover - css / jquery
  • multiple login routes using ember-cli-simple-auth
  • Processing $http response in service
  • Reading and displaying json data using Polymer
  • Importing a function from a class in another file?
  • listen to a collection add/change as a model…
  • Confirm deletion in modal / dialog using Twitter Bootstrap?
  • Ukkonen's suffix tree algorithm in plain English
  • Polymer 1.x: How to animate custom elements using…
  • Java - Logic error appending a user input to an ArrayList
  • *ngIf and *ngFor on same element causing error
  • Best way to replace multiple characters in a string?
  • Reset/remove CSS styles for element only
  • Angularjs $q.all
  • How do I install Java on Mac OSX allowing version switching?
  • Exception: Can't bind to 'ngFor' since it isn't a…
  • How to loop back to start of question in case of…
  • Dynamically add event listener
  • Polymer 1.x: How to use dataSource function to…
  • Design DFA accepting binary strings divisible by a…
  • How can I use the $index inside a ng-repeat to…
  • How to make vuetify navigation drawer to close group…
  • bootstrap 4 responsive utilities visible / hidden xs…
  • How can I fix MySQL error #1064?
  • Why do I have to "git push --set-upstream origin "?
  • Backbone.js Comparator not sorting (Coffeescript)
  • Polymer dom-repeat not rendering changes with…
  • How to compute precision, recall, accuracy and…
  • Aurelia parent view model method is not binding
  • How do I update the DOM in polymer 1.x when data is changed?
  • Getting the input value of a Polymer paper-input…
  • What does the "yield" keyword do?
  • Call list-item by index number in Polymer function

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

Next Post:

Find out whether radio button is checked with JQuery?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error