Angular Get Index in NgFor Example

Hello Devs, 

In this tutorial, we will learn Angular Get Index in NgFor Example

In this section, we will see a simple example of get index in ngfor angular. you will learn how to get index in ngfor angular

Follow this step by step guide below. 

Example:

src/app/app.component.ts

import { Component } from '@angular/core';

  

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name = 'Angular';

  

  categories = [

    {id: 1, name: 'JQuery'},

    {id: 2, name: 'Angular'},

    {id: 3, name: 'Vue'},

    {id: 4, name: 'React'}

  ]

}

src/app/app.component.html

<h1>How to get index of ngfor in Angular? - rathorji.in</h1>

  

<ul>

    <li *ngFor="let category of categories;let indexOfElem=index;">

      ngFor index: {{indexOfElem}} value : {{category.name}} 

    </li>

</ul>

May this example help you.