jessebrault/meals-made-easy-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use input signal for recipe-card.

Browse Source
This commit is contained in:
Jesse Brault 2025-12-16 10:27:32 -06:00
parent 80752f7513
commit 855acfddb9
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/recipes-page/recipe-card/recipe-card.html
View File

@ -1,3 +1,4 @@
@let recipe = this.recipe();
<article>
<a [routerLink]="recipePageLink()">
@if (mainImage.isSuccess()) {

25
src/app/recipes-page/recipe-card/recipe-card.ts
View File

@ -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),
};
});
}