From 855acfddb9208ebfaa1218bfac769917401bb8b7 Mon Sep 17 00:00:00 2001
From: Jesse Brault <jbrault@mac.com>
Date: Tue, 16 Dec 2025 10:27:32 -0600
Subject: [PATCH] Use input signal for recipe-card.

---
 .../recipes-page/recipe-card/recipe-card.html |  1 +
 .../recipes-page/recipe-card/recipe-card.ts   | 25 ++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/app/recipes-page/recipe-card/recipe-card.html b/src/app/recipes-page/recipe-card/recipe-card.html
index 749385b..d00fc63 100644
--- a/src/app/recipes-page/recipe-card/recipe-card.html
+++ b/src/app/recipes-page/recipe-card/recipe-card.html
@@ -1,3 +1,4 @@
+@let recipe = this.recipe();
 <article>
     <a [routerLink]="recipePageLink()">
         @if (mainImage.isSuccess()) {
diff --git a/src/app/recipes-page/recipe-card/recipe-card.ts b/src/app/recipes-page/recipe-card/recipe-card.ts
index c6117a8..5a81d6d 100644
--- a/src/app/recipes-page/recipe-card/recipe-card.ts
+++ b/src/app/recipes-page/recipe-card/recipe-card.ts
@@ -1,4 +1,4 @@
-import { Component, computed, inject, Input } from '@angular/core';
+import { Component, computed, inject, input } from '@angular/core';
 import { Recipe } from '../../model/Recipe.model';
 import { RouterLink } from '@angular/router';
 import { injectQuery } from '@tanstack/angular-query-experimental';
@@ -13,14 +13,12 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
     styleUrl: './recipe-card.css',
 })
 export class RecipeCard {
-    @Input({ required: true })
-    public recipe!: Recipe;
+    public recipe = input.required<Recipe>();
 
-    protected readonly recipePageLink = computed(() => [
-        '/recipes',
-        this.recipe.owner.username,
-        this.recipe.slug,
-    ]);
+    protected readonly recipePageLink = computed(() => {
+        const recipe = this.recipe();
+        return ['/recipes', recipe.owner.username, recipe.slug];
+    });
 
     protected readonly faGlobe = faGlobe;
     protected readonly faLock = faLock;
@@ -29,8 +27,11 @@ export class RecipeCard {
 
     private readonly imageService = inject(ImageService);
 
-    protected mainImage = injectQuery(() => ({
-        queryKey: ['images', this.recipe.mainImage.owner.username, this.recipe.mainImage.filename],
-        queryFn: () => this.imageService.getImage(this.recipe.mainImage.url),
-    }));
+    protected readonly mainImage = injectQuery(() => {
+        const recipe = this.recipe();
+        return {
+            queryKey: ['images', recipe.mainImage.owner.username, recipe.mainImage.filename],
+            queryFn: () => this.imageService.getImage(recipe.mainImage.url),
+        };
+    });
 }