ngFor is a structural directive that renders a template for each item in a collection. The directive is placed on an element, which becomes the parent of the cloned templates. The ngForOf directive is generally used in the shorthand form *ngFor. In this form, the template to be rendered for each iteration is the content of an anchor element containing the directive.
\nAngular creates an < ng-template > element and applies the *ngFor directive onto it, where it becomes a property binding in square brackets, [ngFor]. The rest of the < div >, including its class attribute, is then moved inside the < ng-template >:<\/p>\n
<ul *ngFor=\"let item of items; let i = index\" data-index=\"i\">\r\n <li>{{item}}<\/li>\r\n<\/ul><\/pre>\nhere is how your code will be converted by angular internally<\/p>\n
<ng-template ngFor let-item [ngForOf]=\"items\" let-i=\"index\">\r\n <ul data-index=\"i\">\r\n <li>{{item}}<\/li>\r\n <\/ul>\r\n<\/ng-template><\/pre>\nIn the above code, you can see that the data-index attribute having \u201ci\u201d that will always give you data-index=”i” because it is not the attribute of the ul element that\u2019s why the value of i is not acceptable<\/p>\n
If you want to store the value of i in the data-index attribute, then you need to make data-index as attribute<\/p>\n
\/\/for angular 2+\r\n<ul>\r\n <li *ngFor=\"let item of items; let i = index\" [attr.data-index]=\"i\"> \r\n {{item}}\r\n <\/li>\r\n<\/ul>\r\n<\/pre>\n\/\/for angularJS\r\n<ul>\r\n <li *ngFor=\"#item of items; #i = index\" [attr.data-index]=\"i\">\r\n {{item}}\r\n <\/li>\r\n<\/ul>\r\n<\/pre>\nAnd if you add *ngFor on ul, your ul will also be part of the iteration, that\u2019s why I added it on li. <\/p>\n
References:
\nangular.io\/guide<\/a>
\nangular.io\/api<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"ngFor is a structural directive that renders a template for each item in a collection. The directive is placed on an element, which becomes the parent of the cloned templates. The ngForOf directive is generally used in the shorthand form *ngFor. In this form, the template to be rendered for each iteration is the content […]<\/p>\n","protected":false},"author":1,"featured_media":8776,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[9],"tags":[],"class_list":["post-8775","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8775"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=8775"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8775\/revisions"}],"predecessor-version":[{"id":8778,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8775\/revisions\/8778"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/8776"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=8775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=8775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=8775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}