Accessing specific array element in an Angular2 Template

Question

I have an array that I can loop through using ng-for syntax. However, ultimately I want to access just a single element of that array. I cannot figure out how to do that.

In my component script I have

  export class TableComponent {

    elements: IElement[];

}

In my template, I am able to loop through the elements via

<ul>
<li *ngFor='let element of elements'>{{element.name}}</li>
</ul>

However, trying to access an item in the element array by secifically referencing an item utilizing

  x {{elements[0].name}}x

does not seem to work.

The formatting in the template is pretty explicit, so I want to be able to access each element of the array explicitly in the template.

I am not understanding something basic....

Günter Zöchbauer · Accepted Answer · 2020-07-16 00:11:55Z

30

2020 Edit :

{{elements?.[0].name}}

is the new way for the null check

Original answer : {{elements[0].name}}

should just work. If you load elements async (from a server or similar) then Angular fails when it tries to update the binding before the response from the server arrived (which is usually the case). You should get an error message in the browser console though.

Try instead

{{elements && elements[0].name}}

edited Jul 16, 2020 at 0:11

answered Jul 23, 2016 at 17:23

Günter Zöchbauer

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

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

3 Comments

John Ptacek Over a year ago

This was exactly the issue. Async call and the data was not initialized on load. This is a bit different behavior than Angular 1.x. Thanks!

Günter Zöchbauer Over a year ago

@RamiAlloush what Dart/Flutter version?

Rami Alloush Over a year ago

Hi @GünterZöchbauer, I thought we were talking about Angular :D. I'm running Angular v9. I just want to do elements?.[0] but I can't. Thanks

Jecfish · Accepted Answer · 2016-07-24 04:18:04Z

7

Work around, use ngIf check the length. elements? means if elements is null, don't read the length property.

<div *ngIf="elements?.length">
    {{elements[0].name}}
</div>

answered Jul 24, 2016 at 4:18

Jecfish

4,2211 gold badge22 silver badges16 bronze badges

Collectives™ on Stack Overflow

Accessing specific array element in an Angular2 Template

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related