Taobin-Recipe-Manager/client/src/app/features/toppings/toppings.component.html

<main class="relative overflow-auto max-h-[80%] h-[88vh] bg-stone-100">
  <div class="w-full m-4 space-x-4 sticky top-0 bg-stone-100 z-10">
    <button class="btn" (click)="showToppingBuilder = true">
      <p>New Topping</p>
    </button>
    <button class="btn">
      <p>Save Changes</p>
    </button>
  </div>

  <table class="table w-full" [formGroup]="toppingGroupForm">
    <thead class="text-xs sticky top-12">
      <tr class="bg-primary">
        <th>Is Use</th>
        <th>ID</th>
        <th>Name</th>
        <th>Other Name</th>
        <th>Desciption</th>
        <!-- <th>Default</th> -->
        <th>Default</th>
      </tr>
    </thead>

    <tbody
      formArrayName="toppingGroup"
      *ngFor="let tpg of toppingGroup.controls; let i = index"
    >
      <tr formGroupName="{{ i }}">
        <td>
          <input class="toggle" type="checkbox" formControlName="inUse" />
        </td>
        <td>
          <input
            class="input input-sm input-bordered"
            formControlName="groupID"
          />
        </td>
        <td>
          <input class="input input-sm input-bordered" formControlName="name" />
        </td>
        <td>
          <input
            class="input input-sm input-bordered"
            formControlName="otherName"
          />
        </td>
        <td>
          <input class="input input-sm input-bordered" formControlName="Desc" />
        </td>
        <!-- <td>{{tpg.idDefault}}</td> -->
        <td class="grid grid-flow-row grid-cols-3 rounded-md gap-2">
          <div
            *ngFor="let m of getMemberByGroupId(getAttrFromForm(i, 'groupID'))"
          >
            <button
              class="button border-solid border-2 border-black rounded-md p-2"
              [ngClass]="{
                'button bg-red-200': m == getAttrFromForm(i, 'idDefault')
              }"
              (click)="setDefaultOfToppingGroup(i, m)"
            >
              {{
                returnThisOrElse(
                  getMemberData(getAttrFromForm(i, "groupID"), m).name,
                  ""
                )
              }}
              ({{ m }})
            </button>
            <!-- <button>Edit</button> -->
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</main>

<!-- modal -->
<input
  type="checkbox"
  id="topping_builder_modal"
  class="modal-toggle"
  #checkbox="ngModel"
  [(ngModel)]="showToppingBuilder"
/>
<label for="topping_builder_modal" class="modal">
  <div class="modal-box max-w-5xl">
    <h3 class="text-xl font-bold">Topping Builder</h3>
    <!-- body -->

  </div>
</label>