[Angular 2] *ngFor

heros.ts:

import {Component} from "@angular/core";

const HEROES = [
    {id: 1, name:'Superman'},
    {id: 2, name:'Batman'},
    {id: 5, name:'BatGirl'},
    {id: 3, name:'Robin'},
    {id: 4, name:'Flash'}
];

@Component({
    selector:'heroes',
    styleUrls: [
        'heroes.component.css'
    ],
    template: `
    <table>
        <thead>
            <th>Name</th>
            <th>Index</th>
        </thead>
        <tbody>
            <tr *ngFor="let hero of heroes; let i = index; trackBy: trackBy(hero);
             let isEven=even; let isFirst=first; let isLast=last;"
             [ngClass]="{'even': isEven, 'first': isFirst, 'last': isLast}">
                <td>{{hero.name}}</td>
                <td>{{i}}</td>
            </tr>
        </tbody>
    </table>
`
})
export class Heroes {
    heroes = HEROES;

    trackBy(hero){
        return hero ? hero.id: undefined;
    }
}

here we can also use:

trackBy: hero?.id

 

heroes.component.css:

.even{
    background: lightgray;
}

.first{
    font-weight: bold;
}

.last{
    color: white;
    background: black;
}