Angular - print element of JSON just once - json

Question

This is my code:
<ion-content padding>
<h1>Datum: </h1>
<ion-list>
<ion-item *ngFor="let u of tecaj">
<h2>{{u.datum}}</h2>
<h2>{{u.drzava}} | {{u.valuta}}</h2>
<p>{{u.srednji_tecaj}}</p>
</ion-item>
</ion-list>
</ion-content>
and I want to print date just once, so
<h2>{{u.datum}}</h2> just once in first <h1> after "Datum:"
on screenshot there is my JSON file. how do I take just one element of JSON object without *ngFor?

Answer 1

Others have proposed good solutions, but the ngFor directive gives you access to several variables (index, first, last, odd and even) which allow even cleaner and more elegant code. So that means we can do the following:
<ion-item *ngFor="let u of tecaj; let first = first">
<h2 *ngIf="first">{{u.datum}}</h2>

Answer 2

I would say if you don't want to use for loop then I would go with David but I don't see any problem in using for loop and you can extract a single date by using the index in the loop as follows
<ion-content padding>
<h1>Datum: </h1>
<ion-list>
<ion-item *ngFor="let u of tecaj; index as i">
<div *ngIf="i===0">
<h2>{{u.datum}}</h2>
<h2>{{u.drzava}} | {{u.valuta}}</h2>
<p>{{u.srednji_tecaj}}</p>
</div>
</ion-item>
</ion-list>
</ion-content>

Answer 3

You can change it as follows to access the datum, drzava, valuta and srednji_tecaj properties of the first element in the array:
<h1>Datum: </h1>
<ion-item *ngIf="tecaj">
<h2>{{ tecaj[0]?.datum }}</h2>
<h2>{{ tecaj[0]?.drzava}} | {{ tecaj[0]?.valuta }}</h2>
<p>{{ tecaj[0]?.srednji_tecaj }}</p>
</ion-item>
Everything inside interpolation ({{}}) will be evaluated and stringified and can then be rendered on the DOM.