33 lines
889 B
HTML
33 lines
889 B
HTML
|
<h3>Heroes</h3>
|
||
|
|
<!-- #docregion add -->
|
||
|
|
<div>
|
||
|
|
<label>Hero name:
|
||
|
|
<input #heroName />
|
||
|
|
</label>
|
||
|
|
<!-- (click) passes input value to add() and then clears the input -->
|
||
|
|
<button (click)="add(heroName.value); heroName.value=''">
|
||
|
|
add
|
||
|
|
</button>
|
||
|
|
<button (click)="search(heroName.value)">
|
||
|
|
search
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<!-- #enddocregion add -->
|
||
|
|
|
||
|
|
<!-- #docregion list -->
|
||
|
|
<ul class="heroes">
|
||
|
|
<li *ngFor="let hero of heroes">
|
||
|
|
<a (click)="edit(hero)">
|
||
|
|
<span class="badge">{{ hero.id || -1 }}</span>
|
||
|
|
<span *ngIf="hero!==editHero">{{hero.name}}</span>
|
||
|
|
<input *ngIf="hero===editHero" [(ngModel)]="hero.name"
|
||
|
|
(blur)="update()" (keyup.enter)="update()">
|
||
|
|
</a>
|
||
|
|
<!-- #docregion delete -->
|
||
|
|
<button class="delete" title="delete hero"
|
||
|
|
(click)="delete(hero)">x</button>
|
||
|
|
<!-- #enddocregion delete -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- #enddocregion list -->
|