How to assign the first element context with default value? - html

Question

I am using the follwing code to display some values from the array
<div class="row">
<div class="column" *ngFor="let card of cards; let i=index">
<div class="card">
<h3>Card {{card.id}}</h3>
<p>{{card.text}}</p>
</div>
</div>
</div>
But I would like to set the first one is a button with given hard code text. It shouldn't from the array.
I think that probably using ngClass to compare when the index is 0. But not sure how?

Answer 1

Angular has the first and last variables out of the box.
I can't clearly understand what you are asking, but I think you want to show a button only on the first? You can also target the last like below.
<div class="row">
<div class="column" *ngFor="let card of cards; let i=index let first = first; let last = last">
<div class="card">
<h3>Card {{card.id}}</h3>
<p>{{card.text}}</p>
<ng-container *ngIf="first"><button>first item only</button></ng-container>
<ng-container *ngIf="last"><button>last item only</button></ng-container>
</div>
</div>
</div>

Answer 2

You might try something like this:
<div class="row">
<div class="column" *ngFor="let card of cards; let i=index">
<div
class="card"
(click)="((i === 0) || (i === cards.length)) && yourClickEvent($event)"
>
<h3>Card {{ (i === 0) ? 'Your Hard code ID' : card.id }}</h3>
<p>{{card.text}}</p>
</div>
</div>
</div>
The condition in the click event above, will check if its either the first or last card and then implement your click functionality.. so is the case with the ID
Is this what you are trying to achieve?