The Problem

When using the *ngFor directive, you could access certain exported values like index, first and last. For example:

<li *ngFor="let user of users; index as i; first as isFirst; count as length">
    {{ i }}/{{ length }}. {{ user }} <span *ngIf="isFirst">default</span>
</li>

When using the @for control flow statement, those variables can now be accessed within the block without aliasing them.

@for (user of users; track $index) {
<li>
    {{ $index }}/{{ $count }}. {{ user }}
    @if ($first) {
        <span *ngIf="isFirst">default</span>
    }
</li>
}

Those variables can also be aliased, however that is often not required. For example, aliasing $index in this example is unnecessary.

@for (user of users; track $index; let index = $index) {
<li>
    {{ index }}/{{ $count }}. {{ user }}
    @if ($first) {
        <span *ngIf="isFirst">default</span>
    }
</li>
}

When migrating from *ngFor to control flow syntax, the Angular migration keeps the aliasing, so you can end up with unnecessary aliases.

Rule Proposal

A lint rule that finds unnecessary aliases would assist with cleaning up the migration as well as guiding developers who are unfamiliar with the ability to use the contextual variables.

The rule should report any contextual variables in @for statements that are aliased. An option can be provided for each contextual variable to allow specific aliases to be allowed. For example, { allowedAliases: { $index: ['i'] } would allow i to be used as an alias for $index.

Nested Blocks

There are legitimate use cases for aliasing these variables. For example, with nested @for blocks, you may need to know the index from the outer block within the inner block, so using the implicit $index variable would not be suitable. When there are nested @for blocks, aliasing should be allowed.

Simplification

There are some cases where an expression using a contextual variable can be simplified. For example, $index === 0 can be simplified to $first. Similar simplifications can be used for $last, $even and $odd. This would be useful for developers who may be aware of $index but not aware of the other contextual variables that can be used (plus it simplifies the templates).

References

• https://angular.dev/guide/templates/control-flow#contextual-variables-in-for-blocks
• https://angular.dev/api/common/NgFor?tab=usage-notes