How to get the last element of an array in Angular2 template WITHOUT LOOPING EVERYTHING?

Question

This question is not asking how to get access to looping variables like i, first, last but how to retrieve and set variable as TEMPLATE VARIABLES.

This is not working...

<div #lastElement="arr[arr.length-1]"></div>

So I actually need to create a local variable in component then bind it directly?

I feel lots of stuff I can do it with ng-* directives in the past are all required to hardcode in Component... Kind of degrading tbh

My suspicion is you are getting an undefined error due to the component binding before the data is ready. You might need to use a ternary to get around this. #lastElement="!!arr && arr.length > 0 ? arr[arr.length-1] : undefined" — SnareChops
– SnareChops, Commented Feb 4, 2016 at 6:08
Can you please elaborate a bit more on why you need this. Maybe there is another solution. — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 4, 2016 at 9:17
There is a list of social media icons, but only the last one requires a few more directives. — tom10271
– tom10271, Commented Feb 5, 2016 at 1:40

vusan · Accepted Answer · 2016-12-26 11:48:36Z

16

You can use boolean keyword last, here in this example:

<div *ngFor="let item of items;let last = last;let first = first;let index = index">
first:{{first}}
index:{{index}}
last:{{last}}
</div>

result:

first:true index:0 last:false
first:false index:1 last:false
first:false index:2 last:false
first:false index:3 last:true

answered Dec 26, 2016 at 11:48

vusan

5,3574 gold badges50 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joshua Szuslik Over a year ago

The question is to do it without looping everything. My answer below should be the correct answer.

tom10271 Over a year ago

@JoshuaSzuslik You are looping too

Günter Zöchbauer · Accepted Answer · 2016-02-04 07:01:19Z

3

You can't assign arbitrary values to template variables. Template variables are for references to elements and directives and locals used for structural directives.

edited Feb 4, 2016 at 7:01

answered Feb 4, 2016 at 6:13

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Comments

nPcomp · Accepted Answer · 2018-10-05 12:57:25Z

1

You would set the lastelement variable in your template loop. Angular will automatically bind the last element in your loop to the last directive.

<div *ngFor="#item of items; #lastElement = last">
   // Items go here
</div>

https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

edited Oct 5, 2018 at 12:57

nPcomp

10.3k5 gold badges60 silver badges54 bronze badges

answered Apr 11, 2016 at 16:44

Joshua Szuslik

1282 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to get the last element of an array in Angular2 template WITHOUT LOOPING EVERYTHING?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related