ngForDirective

1.... <ul>

<li *ngFor="let contact of contacts; index as i">

<div>

{{i}} {{contact.firstName}} {{contact.lastName }}

</div>

</li>

2............

<ul>

<li *ngFor="let contact of contacts; index as i">

<div *ngIf='"f">the first record</div>

{{i}} {{contact.firstName}} {{contact.lastName }}

</div>

</li>

3...............................................

<ul>

<li *ngFor="let contact of contacts; index as i;last as l">

<div *ngIf='"f">the first record</div>

{{i}} {{contact.firstName}} {{contact.lastName }}

</div>

<div *ngIf='"l">the first record</div>

{{i}} {{contact.firstName}} {{contact.lastName }}

</div>

</li>

.............................................................................................................

table format...

<ul>

<li *ngFor="let contact of contacts; even as e;last as o">

<div *ngIf='"e" style="background-color:red">the first record</div>

{{i}} {{contact.firstName}} {{contact.lastName }}

</div>

<div *ngIf='"o" style="background-color:red">the first record</div>

{{i}} {{contact.firstName}} {{contact.lastName }}

</div>

</li>