add recipe detail

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { RecipeService } from './recipe.service';
 
 @Component({
   selector: 'app-root',
@@ -7,7 +8,12 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
   imports: [RouterOutlet, RouterLink, RouterLinkActive],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
+  providers: [RecipeService]
 })
 export class AppComponent {
   title = 'tiramisu';
+
+  constructor(protected recipes: RecipeService){
+  }
+
 }

src/app/app.config.ts

@@ -1,8 +1,10 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { withComponentInputBinding } from '@angular/router';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)],
+  providers: [provideRouter(routes, withComponentInputBinding()), provideAnimationsAsync()]
 };

src/app/recipe.service.ts

@@ -5,7 +5,9 @@ import { Recipe } from '../cookbook/type';
   providedIn: 'root',
 })
 export class RecipeService {
-  #recipes: Recipe[] = [];
+  #recipes: Recipe[] = [
+    {id: 0, name: 'crepe', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []}
+  ];
 
   constructor() {}
 

src/app/recipe/recipe.component.html

@@ -1 +1,4 @@
-<p>recipe works!</p>
+<p>{{recipe.id}}</p>
+<p>{{recipe.name}}</p>
+<p>{{recipe.description}}</p>
+

src/app/recipe/recipe.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
-
+import { Recipe } from '../../cookbook/type';
+import { RecipeService } from '../recipe.service';
 @Component({
   selector: 'app-recipe',
   standalone: true,
@@ -7,7 +8,15 @@ import { Component, Input } from '@angular/core';
   templateUrl: './recipe.component.html',
 })
 export class RecipeComponent {
+  recipe: Recipe = {id: -1, name: '', description: '', image: '', ingredients: []};
+  
   @Input()
   set id(id: string) {
+    console.log('test',this.recipes.get(0));
+    this.recipe = this.recipes.get(parseInt(id))!;
   }
+
+  constructor(protected recipes: RecipeService){
+  } 
+
 }