How to use ngFor with index as value in Attribute in Angular ?

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 appname

Project 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: