From 5f12d19dbc654d5c953b6d556da6b7c35388e7d9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-P9VU163\\admin" <rumyancevkv@mail.ru>
Date: Tue, 24 Jun 2025 13:08:02 +0300
Subject: [PATCH] add Delete a hero

---
 src/app/hero.service.ts              | 10 ++++++++
 src/app/heroes/heroes.component.css  | 36 ++++++++++++++++++++++++++++
 src/app/heroes/heroes.component.html |  2 ++
 src/app/heroes/heroes.component.ts   |  5 ++++
 4 files changed, 53 insertions(+)

diff --git a/src/app/hero.service.ts b/src/app/hero.service.ts
index 579fde9..d9316b3 100644
--- a/src/app/hero.service.ts
+++ b/src/app/hero.service.ts
@@ -56,6 +56,16 @@ export class HeroService {
     );
   }
 
+  /** DELETE: delete the hero from the server */
+  deleteHero(id: number): Observable<Hero> {
+    const url = `${this.heroesUrl}/${id}`;
+
+    return this.http.delete<Hero>(url, this.httpOptions).pipe(
+      tap(_ => this.log(`deleted hero id=${id}`)),
+      catchError(this.handleError<Hero>('deleteHero'))
+    );
+  }
+  
     /**
    * Handle Http operation that failed.
    * Let the app continue.
diff --git a/src/app/heroes/heroes.component.css b/src/app/heroes/heroes.component.css
index 4bf53ff..5f7c543 100644
--- a/src/app/heroes/heroes.component.css
+++ b/src/app/heroes/heroes.component.css
@@ -5,6 +5,15 @@
   padding: 0;
   width: 15em;
 }
+
+input {
+  display: block;
+  width: 100%;
+  padding: .5rem;
+  margin: 1rem 0;
+  box-sizing: border-box;
+}
+
 .heroes li {
   position: relative;
   cursor: pointer;
@@ -51,4 +60,31 @@
   text-align: right;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
+}
+
+.add-button {
+ padding: .5rem 1.5rem;
+ font-size: 1rem;
+ margin-bottom: 2rem;
+}
+
+.add-button:hover {
+  color: white;
+  background-color: #42545C;
+}
+
+button.delete {
+  position: absolute;
+  left: 210px;
+  top: 5px;
+  background-color: white;
+  color:  #525252;
+  font-size: 1.1rem;
+  margin: 0;
+  padding: 1px 10px 3px 10px;
+}
+
+button.delete:hover {
+  background-color: #525252;
+  color: white;
 }
\ No newline at end of file
diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html
index 0b4ebcd..fa1f3c0 100644
--- a/src/app/heroes/heroes.component.html
+++ b/src/app/heroes/heroes.component.html
@@ -4,6 +4,8 @@
     <a routerLink="/detail/{{hero.id}}">
       <span class="badge">{{hero.id}}</span> {{hero.name}}
     </a>
+    <button type="button" class="delete" title="delete hero"
+      (click)="delete(hero)">x</button>
   </li>
 </ul>
 
diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts
index 82b9ec0..fcb5d26 100644
--- a/src/app/heroes/heroes.component.ts
+++ b/src/app/heroes/heroes.component.ts
@@ -39,4 +39,9 @@ export class HeroesComponent implements OnInit {
       });
   }
 
+  delete(hero: Hero): void {
+    this.heroes = this.heroes.filter(h => h !== hero);
+    this.heroService.deleteHero(hero.id).subscribe();
+  }
+
 }
\ No newline at end of file