src/app/mock-heroes.ts: Define a HEROES constant

heroes.component.ts: Use HEROES constant

import { HEROES } from '../mock-heroes';
...
heroes = HEROES;

heroes.component.html: List heroes with *ngFor repeater directive

< li *ngFor="let hero of heroes">

You define private styles either inline in the @Component.styles array or as stylesheet file(s) identified in the @Component.styleUrls array.

@Component({
  ...
  styleUrls: ['./heroes.component.css']
})

heroes.component.html: Add a click event binding

< li *ngFor="let hero of heroes" (click)="onSelect(hero)">

heroes.component.ts: Add a click event handler

onSelect(hero: Hero): void {
  this.selectedHero = hero;
}

heroes.component.html: Add Angular’s *ngIf directive

< div *ngIf="selectedHero">

heroes.component.html: Add Angular’s class binding. This apply the .selected class to the < li> when the user clicks it.

< li *ngFor="let hero of heroes"
  [class.selected]="hero === selectedHero"
  (click)="onSelect(hero)">
  < span class="badge">{{hero.id}} {{hero.name}}
< /li>

AnteriorSiguiente

Más información

Live Example
Tutorial
Angular event binding
Angular class binding