Comprehensive Analysis of first, last, and index Variables in Angular 2 ngFor Loops

Problem Background and Error Analysis

During Angular development, when using the *ngFor directive for loop rendering, developers often need to access loop index position information. The original code used incorrect syntax: *ngFor="let indicador of indicadores; #first = first", which caused template parsing errors.

The error messages indicated: TypeError: Cannot read property 'toUpperCase' of undefined and Parser Error: Unexpected token #. This shows that the Angular template parser could not recognize the # symbol in this context.

Correct Syntax Analysis

In Angular templates, the # symbol is used to create template reference variables that point to DOM elements or directive instances. Local variables for the *ngFor directive need to be declared using the let keyword.

The correct syntax should be: *ngFor="let indicador of indicadores; let first = first"

Angular provides the following local variables for the *ngFor directive:

• index - Current item index position (starting from 0)
• first - Whether it's the first item (boolean)
• last - Whether it's the last item (boolean)
• even - Whether it's an even item (boolean)
• odd - Whether it's an odd item (boolean)

Complete Code Example

Here is the complete corrected component template example:

<md-button-toggle-group>
  <md-button-toggle 
    *ngFor="let indicador of indicadores; let first = first"
    [value]="indicador.id"
    [checked]="first">
    <span>{{ indicador.nombre }}</span>
  </md-button-toggle>
</md-button-toggle-group>

Corresponding component class definition:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  indicadores = [
    { id: 1, nombre: 'Indicador 1' },
    { id: 2, nombre: 'Indicador 2' },
    { id: 3, nombre: 'Indicador 3' }
  ];
}

Syntax Evolution and Version Differences

In subsequent Angular versions, the syntax has evolved. Angular 6+ introduced a more concise syntax form:

<li *ngFor="let user of userObservable; first as isFirst">
  <span *ngIf="isFirst">default</span>
</li>

This syntax uses first as isFirst instead of the original let first = first, providing better readability and consistency.

Best Practice Recommendations

1. Always use correct variable declaration syntax, avoiding confusion between template reference variables and loop local variables

2. Use bracket syntax when binding properties to ensure correct property binding

3. Consider using more descriptive variable names, such as let isFirst = first to improve code readability

4. When migrating between different Angular versions, pay attention to syntax differences and update code promptly

Common Error Troubleshooting

When encountering template parsing errors, focus on checking:

• Whether variable declaration syntax correctly uses the let keyword
• Whether property binding uses correct bracket syntax
• Whether variable names conflict with local variable names provided by Angular
• Whether there are unclosed tags or syntax errors in the template

By following these specifications and best practices, developers can effectively avoid template parsing errors and improve development efficiency.