CODEWITHSUNDEEP
javascriptangularloopsngfor
VIKAS KOHLI
VIKAS KOHLI

Reputation: 8470

Why index variable not display indexing in *ngFor loop in Angular 2?

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 ?

Upvotes: 2

Views: 4992

Answers (6)

Liran H
Liran H

Reputation: 10609

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

Upvotes: 1

anoop
anoop

Reputation: 3822

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 comparison. link, link

Upvotes: 0

Vikash Kumar
Vikash Kumar

Reputation: 1718

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.

Upvotes: 0

Always Learn
Always Learn

Reputation: 672

reference this:https://angular.io/docs/ts/latest/api/common/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>

Upvotes: 2

Poul Kruijt
Poul Kruijt

Reputation: 71961

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 component 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>

Upvotes: 0

Michel
Michel

Reputation: 28359

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

DEMO PLNKR

Upvotes: 0

Related Questions