From 973524fc7e84196c11c787f4c1fca1e8419776af Mon Sep 17 00:00:00 2001
From: "DESKTOP-P9VU163\\admin" <rumyancevkv@mail.ru>
Date: Tue, 24 Jun 2025 12:58:13 +0300
Subject: [PATCH] add Add a new hero

---
 src/app/hero.service.ts              |  8 ++++++++
 src/app/heroes/heroes.component.html | 12 +++++++++++-
 src/app/heroes/heroes.component.ts   | 10 ++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/app/hero.service.ts b/src/app/hero.service.ts
index 09ca774..579fde9 100644
--- a/src/app/hero.service.ts
+++ b/src/app/hero.service.ts
@@ -48,6 +48,14 @@ export class HeroService {
     );
   }
 
+  /** POST: add a new hero to the server */
+  addHero(hero: Hero): Observable<Hero> {
+    return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(
+      tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
+      catchError(this.handleError<Hero>('addHero'))
+    );
+  }
+
     /**
    * Handle Http operation that failed.
    * Let the app continue.
diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html
index 9e5774a..0b4ebcd 100644
--- a/src/app/heroes/heroes.component.html
+++ b/src/app/heroes/heroes.component.html
@@ -5,4 +5,14 @@
       <span class="badge">{{hero.id}}</span> {{hero.name}}
     </a>
   </li>
-</ul>
\ No newline at end of file
+</ul>
+
+<div>
+  <label for="new-hero">Hero name: </label>
+  <input id="new-hero" #heroName />
+
+  <!-- (click) passes input value to add() and then clears the input -->
+  <button type="button" class="add-button" (click)="add(heroName.value); heroName.value=''">
+    Add hero
+  </button>
+</div>
\ No newline at end of file
diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts
index 8180f3d..82b9ec0 100644
--- a/src/app/heroes/heroes.component.ts
+++ b/src/app/heroes/heroes.component.ts
@@ -29,4 +29,14 @@ export class HeroesComponent implements OnInit {
     this.heroService.getHeroes()
         .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);
+      });
+  }
+
 }
\ No newline at end of file