(`deleteHero id=${id}`))
+ );
+ }
+
/**
* Handle Http operation that failed.
* Let the app continue.
diff --git a/angular-tour-of-heroes/src/app/heroes/heroes.component.css b/angular-tour-of-heroes/src/app/heroes/heroes.component.css
index 94a91be..6d1344b 100644
--- a/angular-tour-of-heroes/src/app/heroes/heroes.component.css
+++ b/angular-tour-of-heroes/src/app/heroes/heroes.component.css
@@ -29,3 +29,45 @@
width: 250px;
}
+.heroes a:hover {
+ color:#607D8B;
+}
+
+.heroes .badge {
+ display: inline-block;
+ font-size: small;
+ color: white;
+ padding: 0.8em 0.7em 0 0.7em;
+ background-color:#405061;
+ line-height: 1em;
+ position: relative;
+ left: -1px;
+ top: -4px;
+ height: 1.8em;
+ min-width: 16px;
+ text-align: right;
+ margin-right: .8em;
+ border-radius: 4px 0 0 4px;
+}
+
+button {
+ background-color: #eee;
+ border: none;
+ padding: 5px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ cursor: hand;
+ font-family: Arial;
+}
+
+button:hover {
+ background-color: #cfd8dc;
+}
+
+button.delete {
+ position: relative;
+ left: 194px;
+ top: -32px;
+ background-color: gray !important;
+ color: white;
+}
diff --git a/angular-tour-of-heroes/src/app/heroes/heroes.component.html b/angular-tour-of-heroes/src/app/heroes/heroes.component.html
index 7cdbc43..6b96c37 100644
--- a/angular-tour-of-heroes/src/app/heroes/heroes.component.html
+++ b/angular-tour-of-heroes/src/app/heroes/heroes.component.html
@@ -1,10 +1,21 @@
My Heroes
+
+
+
+
+
diff --git a/angular-tour-of-heroes/src/app/heroes/heroes.component.ts b/angular-tour-of-heroes/src/app/heroes/heroes.component.ts
index cbd51b4..4ffb35e 100644
--- a/angular-tour-of-heroes/src/app/heroes/heroes.component.ts
+++ b/angular-tour-of-heroes/src/app/heroes/heroes.component.ts
@@ -21,4 +21,17 @@ export class HeroesComponent implements OnInit {
.subscribe(heroes => this.heroes = heroes);
}
+ add(name: string): void {
+ name = name.trim();
+ if (!name) { return; }
+ this.heroService.addHero({ name } as Hero)
+ .subscribe(hero => {
+ this.heroes.push(hero);
+ });
+ }
+
+ delete(hero: Hero): void {
+ this.heroes = this.heroes.filter(h => h !== hero);
+ this.heroService.deleteHero(hero).subscribe();
+ }
}