CODEWITHSUNDEEP
angularangular-material
PriNcee
PriNcee

Reputation: 2607

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

Upvotes: 176

Views: 276168

Answers (4)

smoyer
smoyer

Reputation: 8242

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>

Upvotes: 338

user2982122
user2982122

Reputation: 161

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.

Upvotes: 0

Sebastian Hernandez
Sebastian Hernandez

Reputation: 2376

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

Upvotes: 99

Rohit Tagadiya
Rohit Tagadiya

Reputation: 3738

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.

Upvotes: 28

Related Questions