Accessing specific array element in an Angular2 Template

John Ptacek :

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 :

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Accessing specific element of array of strings, with an integer index

Accessing specific array indices using the go template library

Accessing a specific element of an Array RDD in apache-spark scala

Perl: Why can you use @ or $ when accessing a specific element in an array?

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

Accessing array in django template

Angular: Accessing a template reference variable located inside `async` pipe element

Accessing element in array with assembly

Accessing element in async array

Accessing element array

Filter array in template Angular2

Angular2: Prevent authenticated users from accessing specific routes

Accessing element in an Angular2 JavaScript ES5 component

Accessing Select element value in angular2 gives Error

Accessing a specific element from the DOM

Accessing an element inside an Array of an Array

Problem during accessing nested array objects in angular2

How to access specific elements in an array - angular template?

Angular2: replace host element with component's template

Angular2: What is the best way to get a reference of a template element

Angular2 Detect if element in template view has class

Accessing the -1 element of an array in c

Accessing random array element in ZSH

Accessing the last element on a row in a 2D array that is in a structure

Accessing a div inside of a Polymer element template

Angular2 - *ngIf : How to show a specific element?

Angular2 - Get a specific element in the DOM and change it's class

Display a specific array on the template

Passing array element to template