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"
      (ngSubmit)="save()"
    >
      <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">
        <button type="submit" class="btn">Save</button>
        <form method="dialog">
          <!-- if there is a button, it will close the modal -->
          <button class="btn">Close</button>
        </form>
      </div>
    </form>
  </div>
</dialog>