Get only the first element of an array with NgFor

Obtaining the first element of the Array with *ngFor is not possible, since it is a directive to iterate over an array of elements and generate an identical template for each element with the corresponding values.

Explanation

What if you can do it is to add certain validations that let you know if it is the first element and take an action that could be show it, not show it or give a special treatment to its visualization. *ngFor has certain variables such as the following:

• index: number: The index of the current element in the iterable.
• first: boolean: True when the article is the first element in the iterable.
• last: boolean: True when the element is the last element in the iterable.
• even: boolean: True when the element has an even index in the iterable.
• odd: boolean: True when the element has an odd index in the iterable.

Example:

Using first and *ngIf we could allow to show only the first element in the following way:

<div *ngFor="let valor of equipo.equipment_details; first as isFirst">
     <span *ngIf="isFirst">{{valor.sale_price}}</span>
</div>

Conclusion

If your intention is to always visualize only the first element , I recommend you use a function that takes only that element from the list and returns it to use it, which would be more performant. The previous form that I showed you is recommended for when you want to give a special treatment to that item or you want to show some additional element next to that item.

If what you are trying is from your array of 3 elements in your example, bring only the first element and still have an array to run it with the directive NgForOf from Angular you can do the following:

equipo.equipment_details.splice(0, 1)

On the contrary, if you try to go through your array but always get the sale_price of the first element, my recommendation is to use a calculated variable that returns that value instead of using value.sale_price use that variable, example:

get firstSalePrice() {
  return this.equipo.equipment_details[0].sale_price || 0;
}

You can do this:

<p *ngFor="let item of exampleObject; let i=index;" >
  <span *ngIf="i === 0">{{item.id}} - {{i}}</span>
</p>