add modal detail

client/src/app/shared/modal/recipe-modal.component.html

@@ -0,0 +1,30 @@
+<button class="btn btn-sm btn-circle btn-ghost" (click)="openModal()">
+  <svg
+    class="w-6 h-6 text-gray-800 dark:text-white"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 20 20"
+  >
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1"
+      d="M7.75 4H19M7.75 4a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 4h2.25m13.5 6H19m-2.25 0a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 10h11.25m-4.5 6H19M7.75 16a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 16h2.25"
+    />
+  </svg>
+</button>
+
+<dialog class="modal" #detailModal>
+  <div class="modal-box w-11/12 max-w-5xl">
+    <h3 class="font-bold text-lg">Hello! {{ id }}</h3>
+    <p class="py-4">Click the button below to close</p>
+    <div class="modal-action">
+      <form method="dialog">
+        <!-- if there is a button, it will close the modal -->
+        <button class="btn">Close</button>
+      </form>
+    </div>
+  </div>
+</dialog>

client/src/app/shared/modal/recipe-modal.component.ts

@@ -0,0 +1,28 @@
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'recipe-modal',
+  templateUrl: './recipe-modal.component.html',
+  standalone: true,
+})
+export class RecipeModalComponent {
+  @Input({ required: true }) id!: string;
+
+  private detailModal: ElementRef<HTMLDialogElement> | null = null;
+
+  @ViewChild('detailModal', { static: false }) set setDetailModal(
+    modal: ElementRef
+  ) {
+    this.detailModal = modal;
+  }
+
+  openModal() {
+    this.detailModal?.nativeElement.showModal();
+
+    if (this.detailModal?.nativeElement.open) {
+      console.log('open');
+    } else {
+      console.log('close');
+    }
+  }
+}