If we want to display the index of ng-repeat in angular 1,

we use the following code

<div ng-repeat="car in cars">
 <ul>
  <li>Index: {{$index+1}}</li>
  <li>Car Name:{{car.name}}</li>
 </ul>
</div>

Now when the same I implement in Angular 2, it is not displaying index value

<div *ngFor="#car of cars">
 <ul>
      <li>Index: {{index+1}}</li>
      <li>Car Name:{{car.name}}</li>
     </ul>
 </div>

But when I add #i = index in *ngFor, it suddenly display index value

 <div *ngFor="#car of cars; #i = index">
     <ul>
          <li>Index: {{i+1}}</li>
          <li>Car Name:{{car.name}}</li>
         </ul>
 </div>

As both 2nd and 3rd code are same, but it work only when we declare the local variable and assign the variable to index.

Such an ambiguous thing.

Will any one help to understand better use of this ?

If we want to display the index of ng-repeat in angular 1,

we use the following code

<div ng-repeat="car in cars">
 <ul>
  <li>Index: {{$index+1}}</li>
  <li>Car Name:{{car.name}}</li>
 </ul>
</div>

Now when the same I implement in Angular 2, it is not displaying index value

<div *ngFor="#car of cars">
 <ul>
      <li>Index: {{index+1}}</li>
      <li>Car Name:{{car.name}}</li>
     </ul>
 </div>

But when I add #i = index in *ngFor, it suddenly display index value

 <div *ngFor="#car of cars; #i = index">
     <ul>
          <li>Index: {{i+1}}</li>
          <li>Car Name:{{car.name}}</li>
         </ul>
 </div>

As both 2nd and 3rd code are same, but it work only when we declare the local variable and assign the variable to index.

Such an ambiguous thing.

Will any one help to understand better use of this ?

• javascript
• angular
• loops
• ngfor

• 1 2nd and 3rd code aren't the same? – AVJT82 Commented May 30, 2017 at 12:22

6 Answers 6

reference this:https://angular.io/docs/ts/latest/api/mon/index/NgFor-directive.html

<div *ngFor="#car of cars;let i=index">
     <ul>
          <li>Index: {{i+1}}</li>
          <li>Car Name:{{car.name}}</li>
         </ul>
 </div>

<div *ngFor="let car of cars; index as i">
  <ul>
    <li>Index: {{i}}</li>
    <li>Car Name:{{car.name}}</li>
  </ul>
</div>

<li *ngFor="let item of items; let i = index;">
    {{i}}
</li>

DEMO PLNKR

To prevent overriding of variables within your template. There is also the odd, even, first, last variable you can assign in the *ngFor loop. But if you had a ponent like this:

@Component({..})
export class SillyComponent {

   public first: number;
   public last: number;
   public index: number;

}

There is no way to access these from within the *ngFor loop if they are immediately assigned by the templating engine. This is one of the reasons why you have to declare them first explicitly inside your template. Besides that, it also gives you better IDE hinting and readability of your code

I also see you are using a very very old notation. You should use the let keyword in templates now to declare variables:

<div *ngFor="let car of cars; let i = index">
   <ul>
        <li>Index: {{i+1}}</li>
        <li>Car Name:{{car.name}}</li>
   </ul>
</div>

The reason you can't use index is that it is in the local scope of ng-for

<div *ngFor="#car of cars; #i = index">

# or let denotes local variables , index over here is the local variable for ng for so outside ng for it is not defined so it is not accessible, to access this data we use local variable from current scope to refer local scope of ng for. So for this specific reason we need to refer using any local variable.

Your 1st code snippet is angular 1.x ng-repeat, which creates new child scope, So $index is the property of new child scope which is exposed and you can use directly. Like you use any $scope property of controller without prefixing $scope to it in html.

now in angular2, In this case there is no separate scope, just this of javascript.

Also, angular2+ is written in typescript So ngFor export the variable index(also other properties like odd, even , first, last), to consume it you need to declare some local variable.

ngFor creates a block like for loop of javascript. and i creates a template local variable to get the index of the array.

also, use let instead of #, changed since 2.0.0-beta.17

Here are some good articles for parison. link, link