replace href by routerLink

src/app/components/recipe-mini/recipe-mini.component.html

@@ -6,6 +6,6 @@
   <div class="recipe-details">
     <h2>{{ recipe.name }}</h2>
     <p>{{ recipe.description | truncate:50:false }}</p>
-    <a href="/recipe/{{ recipe.id }}">{{ 'recipe.see' | transloco }}</a>
+    <a [routerLink]="['/recipe', recipe.id]">{{ 'recipe.see' | transloco }}</a>
   </div>
 </div>

src/app/components/recipe-mini/recipe-mini.component.ts

@@ -3,11 +3,12 @@ import { Recipe } from '../../model/recipe.model';
 import { Input } from '@angular/core';
 import { TruncatePipe } from '../../pipes/truncate.pipe';
 import { TranslocoPipe } from '@jsverse/transloco';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-recipe-mini',
   standalone: true,
-  imports: [TruncatePipe, TranslocoPipe],
+  imports: [TruncatePipe, TranslocoPipe, RouterModule],
   templateUrl: './recipe-mini.component.html',
   styleUrl: './recipe-mini.component.css'
 })