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

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>

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

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