HDTuto.com

Angular Get Index in NgFor Example



Hi All,

In this short tutorial we will cover an angular access index in ngfor. it's simple example of get index in ngfor angular. you will learn how to get index in ngfor angular. it's simple example of get index in ngfor angular 9/8. Follow bellow tutorial step of ngfor get index angular.

we can easily get index from ngform in angular 6, angular 7, angular 8 and angular 9 application.

I will give you very simple example so you can easily understand how to get index key in ngfor angular.

You can get index from ngfor as bellow:

let category of categories;let indexOfElem=index;

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? - HDTuto.com</h1>

<ul>

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

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

</li>

</ul>

You can see belloe output:

I hope it can help you...




April 26, 2020 | Category : Angular



Blog Search


Copyright © 2020 HDTuto.com. All rights reserved.