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> <article>
<a [routerLink]="recipePageLink()"> <a [routerLink]="recipePageLink()">
@if (mainImage.isSuccess()) { @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 { Recipe } from '../../model/Recipe.model';
import { RouterLink } from '@angular/router'; import { RouterLink } from '@angular/router';
import { injectQuery } from '@tanstack/angular-query-experimental'; import { injectQuery } from '@tanstack/angular-query-experimental';
@ -13,14 +13,12 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
styleUrl: './recipe-card.css', styleUrl: './recipe-card.css',
}) })
export class RecipeCard { export class RecipeCard {
@Input({ required: true }) public recipe = input.required<Recipe>();
public recipe!: Recipe;
protected readonly recipePageLink = computed(() => [ protected readonly recipePageLink = computed(() => {
'/recipes', const recipe = this.recipe();
this.recipe.owner.username, return ['/recipes', recipe.owner.username, recipe.slug];
this.recipe.slug, });
]);
protected readonly faGlobe = faGlobe; protected readonly faGlobe = faGlobe;
protected readonly faLock = faLock; protected readonly faLock = faLock;
@ -29,8 +27,11 @@ export class RecipeCard {
private readonly imageService = inject(ImageService); private readonly imageService = inject(ImageService);
protected mainImage = injectQuery(() => ({ protected readonly mainImage = injectQuery(() => {
queryKey: ['images', this.recipe.mainImage.owner.username, this.recipe.mainImage.filename], const recipe = this.recipe();
queryFn: () => this.imageService.getImage(this.recipe.mainImage.url), return {
})); queryKey: ['images', recipe.mainImage.owner.username, recipe.mainImage.filename],
queryFn: () => this.imageService.getImage(recipe.mainImage.url),
};
});
} }