How to use ngFor with index as value in Attribute in Angular ? Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report NgFor is used as a structural directive that renders each element for the given collection each element can be displayed on the page. In this article, we will learn how to store the index value of ngFor in an attribute so I can utilize it. Creating Angular application & Module Installation Step 1: Create an Angular application using the following command. ng new appname Step 2: After creating your project folder i.e. appname, move to it using the following command. cd appnameProject Structure It will look like the following: Example 1: In this example, we will use an index as i. Here, the Index is an attribute in ngFor which tells the sequence of the object retrieved. HTML <!-- app.component.html --> <h2 style="color: green">GeeksforGeeks</h2> <h2>ngFor with index as value in attribute</h2> <div *ngFor="let item of gfg |keyvalue;index as i"> <b style="color: green;">{{i+1}} </b> <b>{{item.key}}:</b> {{item.value}} </div> JavaScript // app.component.ts import { Component, OnInit } from '@angular/core'; import { KeyValue } from '@angular/common'; import { Pipe, PipeTransform } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: "./app.component.html", styleUrls: ['./app.component.css'] }) export class AppComponent { gfg: any = { "HTML": "Hyper Text Markup Language", "CSS": "Cascade Style Sheet", "XML": "Xtensive Markup Language", "JS": "Javascript" } } JavaScript // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Output: Example 2: In this example, we will use let i=index. Here, the index is an attribute in ngFor which tells the sequence of the object retrieved. HTML <!-- app.component.html --> <h2 style="color: green">GeeksforGeeks</h2> <h2>ngFor with index as value in attribute</h2> <div *ngFor="let item of gfg |keyvalue;let i=index"> <b style="color: green;"> {{i+1}} </b> <b>{{item.key}}:</b> {{item.value}} </div> JavaScript // app.component.ts import { Component, OnInit } from '@angular/core'; import { KeyValue } from '@angular/common'; import { Pipe, PipeTransform } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: "./app.component.html", styleUrls: ['./app.component.css'] }) export class AppComponent { gfg: any = { "HTML": "Hyper Text Markup Language", "CSS": "Cascade Style Sheet", "XML": "Xtensive Markup Language", "JS": "Javascript" } } JavaScript // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Output: Comment More infoAdvertise with us Next Article How to use trackBy() Function with ngFor Directive in Angular ? N nikitamehrotra99 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads How To Display Values With Interpolation In Angular? Angular is a powerful framework for building dynamic web applications. One of its key features is data binding, which allows developers to display and update values seamlessly within the UI. Interpolation is a fundamental technique in Angular that enables the integration of component data directly i 3 min read How to Concatenate Pipe Values in a String in Angular? Pipes in Angular are features that let us transform the data into some other format in the templates. For example, converting a number into a currency, or a value into a date, etc. In this article, we will learn how to concatenate pipe value in a string with the help of a code example.Step 1: Initia 2 min read How to apply filters to *ngFor in Angular ? In this article, we will see How to apply filters to *ngFor in AngularJS, along with understanding their basic implementation through the examples. NgFor is used as a Structural Directive that renders each element for the given collection each element can be displayed on the page. Implementing the f 3 min read How to use trackBy() Function with ngFor Directive in Angular ? In this article, we will see How to use the 'trackBy' function with 'ngFor' Directive in Angular, along with understanding their basic implementation through illustrations.The NgFor is used as a structural directive that renders each element for the given collection each element can be displayed on 3 min read How to Sort an Array based on User Input in AngularJS ? AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. In this article, we will see how to sort an array based o 3 min read How to use Pipes within ngModel on input Element in Angular ? The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. In this article, we will learn about Usin 3 min read Like