Taobin-Recipe-Manager/client/src/app/shared/modal/recipe-modal.component.html

<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 mb-3">{{ title }}</h3>
    <form class="flex flex-col gap-2" [formGroup]="recipeDetail">
      <div class="flex flex-col gap-1">
        <label>
          <span class="text-base label-text">Product Code: </span>
        </label>
        <input
          type="text"
          class="w-full input input-sm input-bordered input-ghost"
          formControlName="productCode"
        />
      </div>
      <div class="flex flex-col gap-1">
        <label><span class="text-base label-text">Name: </span> </label>
        <input
          type="text"
          class="w-full input input-sm input-bordered input-ghost"
          formControlName="name"
        />
      </div>
      <div class="flex flex-col gap-1">
        <label><span class="text-base label-text"> Other Name:</span> </label>
        <input
          type="text"
          class="w-full input input-sm input-bordered input-ghost"
          formControlName="otherName"
        />
      </div>
      <div class="flex flex-col gap-1">
        <label><span class="text-base label-text"> Description:</span> </label>
        <input
          type="text"
          class="w-full input input-sm input-bordered input-ghost"
          formControlName="description"
        />
      </div>
      <div class="modal-action">
        <a class="btn px-10" (click)="save()">Save</a>
        <a class="btn" (click)="close()">Close</a>
      </div>
    </form>
  </div>
</dialog>

<dialog class="modal" #confirmModal>
  <div class="modal-box w-11/12 max-w-5xl">
    <h3 class="font-bold text-lg mb-3">Confirm Dialog</h3>
    <p>Are you sure you want to delete this recipe?</p>
    <div class="modal-action">
      <button type="submit" class="btn btn-success">Confirm</button>
      <form method="dialog">
        <!-- if there is a button, it will close the modal -->
        <button class="btn btn-error">Close</button>
      </form>
    </div>
  </div>
</dialog>