161

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

Akash Kumar Verma
  • 3,185
  • 2
  • 16
  • 32
PriNcee
  • 2,436
  • 3
  • 17
  • 21

4 Answers4

308

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
Akash Kumar Verma
  • 3,185
  • 2
  • 16
  • 32
smoyer
  • 7,932
  • 3
  • 17
  • 26
  • Thank you! that helped me so much, but i tried to use the first because searching about it i found some examples like: http://blog.angular-university.io/angular-2-ngfor/ (Identifying the first and the last element of a list) – PriNcee May 31 '17 at 15:22
  • Ah, ok. You can also do that. Instead of `let i = index`, just change it to `let first = first;` and change the [checked] binding to just check "first" instead of "i == 0". – smoyer May 31 '17 at 15:25
  • nice! now is working! but i cant understand at all why i must bind the checked attribute with brackets – PriNcee May 31 '17 at 15:30
  • Because `checked` is an `input`, the binding is required to pass in the value to it. You can read about it more here: https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#why-input – Nehal May 31 '17 at 15:43
  • @PriNcee because that's how angular determines you want to bind to a variable. Without the brackets, it just thinks you want to pass a string value into that attribute. – smoyer May 31 '17 at 15:44
  • 37
    @Steveadoo in [`ngFor`](https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html) Angular exposes the following local variables `index`, `first`, `last`, `even` and `odd`. Could you update the answer to clarify this point for future users? – Christopher Moore May 31 '17 at 15:48
  • 4
    Instead of `let first = first` you can write `first as isFirst` (isFirst is the custom variable) as described here: https://angular.io/api/common/NgForOf#local-variables – jurl Dec 02 '18 at 11:50
  • can i get last and before last one ? – Youssef Boudaya Aug 26 '21 at 08:36
  • How can we toggle to other option if we choose let `first as isFirst;` ? It will always point first index. – Optimist Rohit Dec 08 '21 at 05:48
93

Here is how its done in Angular 6

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

Note the change from let first = first to first as isFirst

Akash Kumar Verma
  • 3,185
  • 2
  • 16
  • 32
Sebastian Hernandez
  • 2,257
  • 4
  • 23
  • 32
  • ```let first = first``` and ```first as isFirst``` both the declarations are correct to use, second one alias is pretty much readable – Mohan Ram Nov 28 '19 at 18:36
25

By this you can get any index in *ngFor loop in ANGULAR ...

<ul>
  <li *ngFor="let object of myArray; let i = index; let first = first ;let last = last;">
    <div *ngIf="first">
       // write your code...
    </div>

    <div *ngIf="last">
       // write your code...
    </div>
  </li>
</ul>

We can use these alias in *ngFor

  • index : number : let i = index to get all index of object.
  • first : boolean : let first = first to get first index of object.
  • last : boolean : let last = last to get last index of object.
  • odd : boolean : let odd = odd to get odd index of object.
  • even : boolean : let even = even to get even index of object.
Rohit Tagadiya
  • 3,373
  • 1
  • 25
  • 25
  • How can we toggle to other option if we choose `let first as isFirst;` ? It will always point first index. – Optimist Rohit Dec 08 '21 at 05:48
  • @optimistrohit you can add multiple available variables for a single directive, like first for first element, last for the last one – drac_o Dec 09 '21 at 04:51
  • 1
    I need to display a button only for the last Id and this is very helpful. – Rich Jul 28 '22 at 14:13
0

Unfortunately, last does not work if there are many database entries to be displayed by ngFor. If you add {{last}} to the item that is being listed so that you can see its contents, you will see that every so often, last is true and then changes to false. When the actual last item is shown, last is shown as true and all the others above are shown as false. This means that "last" is true even though the last item is not shown.

user2982122
  • 161
  • 1
  • 5