projects
/
examples
/
angular-tour-of-heroes
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
WIP: 6: Get Data from a Server k) Search by name
[examples/angular-tour-of-heroes]
/
src
/
app
/
heroes
/
heroes.component.html
diff --git
a/src/app/heroes/heroes.component.html
b/src/app/heroes/heroes.component.html
index
dd417cf
..
6866fe0
100644
(file)
--- a/
src/app/heroes/heroes.component.html
+++ b/
src/app/heroes/heroes.component.html
@@
-1,12
+1,17
@@
<h2>My Heroes</h2>
<h2>My Heroes</h2>
+<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>
+</div>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<ul class="heroes">
<li *ngFor="let hero of heroes">
- <span class="badge">{{hero.id}}</span> {{hero.name}}
+ <a routerLink="/detail/{{hero.id}}">
+ <span class="badge">{{hero.id}}</span> {{hero.name}}
+ </a>
</li>
</ul>
</li>
</ul>
-<h2>{{hero.name | uppercase}} Details</h2>
-<div><span>id: </span>{{hero.id}}</div>
-<div>
- <label>name: </label>
- <input [(ngModel)]="hero.name" placeholder="Type a name..." />
-</div>