Angular 2 ngfor first, last, index loop

Issue

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

Solution

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:

• index
• first
• last
• even
• odd

Answered By - Steveadoo