Angular ngFor index - How to get current last even and odd index?


s

Let’s create an employee model

export class Employee {
  id: Number;
  name: string;
  salary: Number;
}

Angular ngFor Index syntax and example

*ngFor is an short hand form for ngForOf directive This can be used to iterate an array of objects or objects.

Here is an ngFor syntax

This can be applied to any html element objectarray - array of object object - typescript object or model class there are different local variables we can use

  • index : get the index of an current item in an array
  • count - length of an array which is equal to array.length
  • first: returns true if current object is first object,else false.
  • last: returns true if current object is last object,else false.
  • even: returns true if an current object index is even number
  • odd : returns true if an current object index is odd number

How to get first last event odd index of an Object Array

Let’s create an angular component

  • Initialize an object array with employee data
import { Component } from '@angular/core';
import { Employee } from './employee';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  employees: Employee[] = [
    { id: 1, name: 'Ram', salary: 5000 },
    { id: 2, name: 'John', salary: 1000 },
    { id: 3, name: 'Franc', salary: 3000 },
    { id: 4, name: 'Andrew ', salary: 8000 }
  ];
  constructor() {
  }

  ngOnInit() {}
}

ngFor is used to iterate an enumerated objects like array of objects.

<table style="width:100%">
  <tr>
    <th>name</th>
    <th>index</th>
    <th>Count</th>
    <th>First</th>
    <th>Last</th>
    <th>Odd</th>
    <th>Even</th>
  </tr>
  <tr
    *ngFor="let employee of employees; let i=index;let count=count;let first=first;let last=last;let even=even;let odd=odd;"
  >
    <td>{{employee.name}}</td>
    <td>{{i}}</td>
    <td>{{count}}</td>
    <td>{{first}}</td>
    <td>{{last}}</td>
    <td>{{even}}</td>
    <td>{{odd}}</td>
  </tr>
</table>

outputs: Angular ngfor index current example

Conclusion

ngFor directive used to iterate an object array, can get current index as wells check for current index is first,last ,odd and event.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

Angular Material list | Best mat-list and item examples

Fix for Property has no initializer and is not definitely assigned in the constructor

How to convert json to/from  object in angular|Typescript 

How to convert number to words in Angular|Typescript example

How to Format array of dates in typescript Angular example

In this post, you learn writing comments in Angular and typescript. You can also write single multiline and documentation comments in Typescript. This includes declare comments in Angular typescript and template HTML components.

Typescript Singleton pattern Implementation with example