Intro directives

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.

  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"
  < span class="badge">{{}} {{}}
< /li>


Más información

Live Example
Angular event binding
Angular class binding