delete recipe

src/app/app.routes.ts

@@ -1,4 +1,4 @@
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 import { RecipeComponent } from './recipe/recipe.component';
 import { RecipeListComponent } from './recipe-list/recipe-list.component';
 import { HomeComponent } from './home/home.component';

src/app/recipe-list/recipe-list.component.html

@@ -42,9 +42,12 @@
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef>Show</th>
       <td mat-cell *matCellDef="let recipe">
-        <button mat-button color="warn" (click)="onSelectRecipe(recipe)">
+        <button mat-button color="accent" (click)="onSelectRecipe(recipe)">
           Show
         </button>
+        <button mat-button color="warn" (click)="onDeleteRecipe(recipe)">
+          Delete
+        </button>
       </td>
     </ng-container>
 

src/app/recipe-list/recipe-list.component.ts

@@ -6,6 +6,7 @@ import { MatTableModule, MatTableDataSource } from '@angular/material/table';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatButtonModule } from '@angular/material/button';
 import { TruncatePipe } from '../pipes/truncate.pipe';
+import { RecipeService } from '../services/recipe.service';
 
 @Component({
   selector: 'app-recipe-list',
@@ -27,10 +28,10 @@ export class RecipeListComponent implements OnInit {
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
 
-  constructor(private router: Router) {}
+  constructor(private router: Router, private recipeService: RecipeService) {}
 
   ngOnInit(): void {
-    this.recipes = JSON.parse(localStorage.getItem('recipes') || '[]');
+    this.recipes = this.recipeService.getRecipes();
     this.dataSource.data = this.recipes;
   }
 
@@ -45,4 +46,10 @@ export class RecipeListComponent implements OnInit {
   onSelectRecipe(recipe: Recipe): void {
     this.router.navigate(['/recipe', recipe.id]);
   }
+
+  onDeleteRecipe(recipe: Recipe): void {
+    this.recipeService.deleteRecipe(recipe.id);
+    this.recipes = this.recipeService.getRecipes();
+    this.dataSource.data = this.recipes;
+  }
 }

src/app/services/recipe.service.ts

@@ -20,6 +20,12 @@ export class RecipeService {
     localStorage.setItem(this.localStorageKey, JSON.stringify(recipes));
   }
 
+  deleteRecipe(recipeId: number): void {
+    let recipes = this.getRecipes();
+    recipes = recipes.filter(recipe => recipe.id !== recipeId);
+    localStorage.setItem(this.localStorageKey, JSON.stringify(recipes));
+  }
+
   getIngredientRecipes(recipeId: number): IngredientRecipe[] {
     const ingredientRecipes: IngredientRecipe[] = JSON.parse(
       localStorage.getItem(this.ingredientRecipeKey) || '[]'