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...
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example