Angular 2 ngfor first, last, index loop

I'm trying to set as default the first occurrence in this example: plunkr

getting the following error:

    Unhandled Promise rejection: Template parse errors:
    TypeError: Cannot read property 'toUpperCase' of undefined ("dButtonToggleGroup">
    <md-button-toggle [ERROR ->]*ngFor="let indicador of indicadores; #first = first" value="indicador.id" [checked]="first">"): ng:///AppModule/HomeComponent.html@35:78
    Parser Error: Unexpected token #, expected identifier, keyword, or string at column 31 in [let indicador of indicadores; #first = first] in ng:///AppModule/HomeComponent.html@35:78 ("<md-button-toggle *ngFor="let indicador of indicadores; #first = first" value="indicador.id" [ERROR ->][checked]="first">
    <span>{{ indicado"): ng:///AppModule/HomeComponent.html@35:153

what is wrong??

Check out this plunkr.

When you're binding to variables, you need to use the brackets. Also, you use the hashtag when you want to get references to elements in your html, not for declaring variables inside of templates like that.

<md-button-toggle *ngFor="let indicador of indicadores; let first = first;" [value]="indicador.id" [checked]="first"> 

Edit: Thanks to Christopher Moore: Angular exposes the following local variables (documented here):

• index
• first
• last
• even
• odd

Edit for Angular 17+:

The variables are also available in the new @for control flow syntax.

<ul>
  @for (item of items; track item; let first = $first, last = $last, even = $even, odd = $odd, index = $index) {
      <li>{{ item }}: {{ first }}, {{ last }}, {{ even }}, {{ odd }}, {{ index }}</li>
  }
</ul>