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;    }}

trackBy: hero?.id

.even{    background: lightgray;}.first{    font-weight: bold;}.last{    color: white;    background: black;}