70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
// #docregion ng-for
|
|
<li *ngFor="#hero of heroes">
|
|
<span class="badge">{{hero.id}}</span> {{hero.name}}
|
|
</li>
|
|
// #enddocregion ng-for
|
|
|
|
// #docregion heroes-styled
|
|
<h2>My Heroes</h2>
|
|
<ul class="heroes">
|
|
<li *ngFor="#hero of heroes">
|
|
<span class="badge">{{hero.id}}</span> {{hero.name}}
|
|
</li>
|
|
</ul>
|
|
// #enddocregion heroes-styled
|
|
|
|
// #docregion selectedHero-click
|
|
<li *ngFor="#hero of heroes" (click)="onSelect(hero)">
|
|
<span class="badge">{{hero.id}}</span> {{hero.name}}
|
|
</li>
|
|
// #enddocregion selectedHero-click
|
|
|
|
// #docregion selectedHero-details
|
|
<h2>{{selectedHero.name}} details!</h2>
|
|
<div><label>id: </label>{{selectedHero.id}}</div>
|
|
<div>
|
|
<label>name: </label>
|
|
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
|
|
</div>
|
|
// #enddocregion selectedHero-details
|
|
|
|
// #docregion ng-if
|
|
<div *ngIf="selectedHero">
|
|
<h2>{{selectedHero.name}} details!</h2>
|
|
<div><label>id: </label>{{selectedHero.id}}</div>
|
|
<div>
|
|
<label>name: </label>
|
|
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
|
|
</div>
|
|
</div>
|
|
// #enddocregion ng-if
|
|
|
|
// #docregion hero-array-1
|
|
public heroes = HEROES;
|
|
// #enddocregion hero-array-1
|
|
|
|
// #docregion heroes-template-1
|
|
<h2>My Heroes</h2>
|
|
<ul class="heroes">
|
|
<li>
|
|
<!-- each hero goes here -->
|
|
</li>
|
|
</ul>
|
|
// #enddocregion heroes-template-1
|
|
|
|
// #docregion heroes-ngfor-1
|
|
<li *ngFor="#hero of heroes">
|
|
// #enddocregion heroes-ngfor-1
|
|
|
|
// #docregion class-selected-1
|
|
[class.selected]="hero === selectedHero"
|
|
// #enddocregion class-selected-1
|
|
|
|
// #docregion class-selected-2
|
|
<li *ngFor="#hero of heroes"
|
|
[class.selected]="hero === selectedHero"
|
|
(click)="onSelect(hero)">
|
|
<span class="badge">{{hero.id}}</span> {{hero.name}}
|
|
</li>
|
|
// #enddocregion class-selected-2
|