diff --git a/daidokoro/src/app/component/ingredients/ingredients.component.css b/daidokoro/src/app/component/ingredients/ingredients.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/daidokoro/src/app/component/ingredients/ingredients.component.html b/daidokoro/src/app/component/ingredients/ingredients.component.html
new file mode 100644
index 0000000..97f0504
--- /dev/null
+++ b/daidokoro/src/app/component/ingredients/ingredients.component.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+

+
+
{{ ingredient.$name }}
+
+
+
+
+
diff --git a/daidokoro/src/app/component/ingredients/ingredients.component.spec.ts b/daidokoro/src/app/component/ingredients/ingredients.component.spec.ts
new file mode 100644
index 0000000..dc7c651
--- /dev/null
+++ b/daidokoro/src/app/component/ingredients/ingredients.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IngredientsComponent } from './ingredients.component';
+
+describe('IngredientsComponent', () => {
+ let component: IngredientsComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [IngredientsComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(IngredientsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/daidokoro/src/app/component/ingredients/ingredients.component.ts b/daidokoro/src/app/component/ingredients/ingredients.component.ts
new file mode 100644
index 0000000..af71741
--- /dev/null
+++ b/daidokoro/src/app/component/ingredients/ingredients.component.ts
@@ -0,0 +1,45 @@
+import {Component, OnInit} from '@angular/core';
+import {IngredientService} from "../../service/ingredient.service";
+import {Ingredient} from "../../model/ingredient.model";
+import {NgFor} from "@angular/common";
+import {LoginService} from "../../service/login.service";
+import {Link} from "../../model/link.model";
+import {LinkService} from "../../service/link.service";
+
+@Component({
+ selector: 'app-ingredients',
+ standalone: true,
+ imports: [
+ NgFor,
+ ],
+ templateUrl: './ingredients.component.html',
+ styleUrl: './ingredients.component.css'
+})
+export class IngredientsComponent implements OnInit{
+
+ ingredients: Ingredient[] = [];
+ links: Link[] = this.linkService.getLinks()
+
+ constructor(private ingredientService : IngredientService,private loginService: LoginService,private linkService : LinkService) {}
+
+ ngOnInit() {
+ this.ingredientService.getAll().subscribe(ingredients => {
+ this.ingredients = ingredients;
+ });
+ }
+
+ onClickLogin(event: Event): void {
+ event.preventDefault(); // Prevent the default anchor behavior
+ this.loginService.login();
+ }
+
+ onClickLogout(event: Event): void {
+ event.preventDefault(); // Prevent the default anchor behavior
+ this.loginService.logout();
+ }
+
+ isLogged(): boolean {
+ return this.loginService.isLogged();
+ }
+
+}
diff --git a/daidokoro/src/app/component/recipe-detail/recipe-detail.component.css b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html
new file mode 100644
index 0000000..f411fb3
--- /dev/null
+++ b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html
@@ -0,0 +1,5 @@
+{{recipe?.$name}}
+ {{recipe?.$createdAt}}
+
+{{recipe?.$description}}
+
diff --git a/daidokoro/src/app/component/recipe-detail/recipe-detail.component.spec.ts b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.spec.ts
new file mode 100644
index 0000000..3db95b6
--- /dev/null
+++ b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecipeDetailComponent } from './recipe-detail.component';
+
+describe('RecipeDetailComponent', () => {
+ let component: RecipeDetailComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [RecipeDetailComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(RecipeDetailComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/daidokoro/src/app/component/recipe-detail/recipe-detail.component.ts b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.ts
new file mode 100644
index 0000000..2949c8a
--- /dev/null
+++ b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.ts
@@ -0,0 +1,26 @@
+import {Component, Input} from '@angular/core';
+import {Recipe} from "../../model/recipe.model";
+import {RecipeService} from "../../service/recipe.service";
+import {RouterLink, RouterLinkActive, RouterOutlet} from "@angular/router";
+import {NgFor} from "@angular/common";
+
+@Component({
+ selector: 'app-recipe-detail',
+ standalone: true,
+ imports: [RouterOutlet,RouterLink, RouterLinkActive,NgFor],
+ templateUrl: './recipe-detail.component.html',
+ styleUrl: './recipe-detail.component.css'
+})
+export class RecipeDetailComponent {
+
+ recipe : Recipe|null = null;
+
+ constructor(private recipeService : RecipeService) {
+ }
+
+ @Input()
+ set id(id: number) {
+ this.recipe = this.recipeService.getRecipe(id)!;
+ }
+
+}