add recipe detail
This commit is contained in:
@@ -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){
|
||||
}
|
||||
|
||||
}
|
||||
|
@@ -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()]
|
||||
};
|
||||
|
@@ -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() {}
|
||||
|
||||
|
@@ -1 +1,4 @@
|
||||
<p>recipe works!</p>
|
||||
<p>{{recipe.id}}</p>
|
||||
<p>{{recipe.name}}</p>
|
||||
<p>{{recipe.description}}</p>
|
||||
|
||||
|
@@ -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){
|
||||
}
|
||||
|
||||
}
|
||||
|
Reference in New Issue
Block a user