CSS select box custom Primary feat.tailwind

<div class="flex items-center cursor-pointer" [ngClass]="class">
  <div
    class="flex w-full gap-2 border border-gray-200 rounded-md max-w-max shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)]"
    (click)="isOpen = !isOpen"
  >
    <div class="flex-col relative">
      <div
        #box
        class="flex w-full items-center justify-between gap-[0.6875rem] px-3 py-[10px]"
      >
        <div>10</div>
        <div>
          <app-icon
            [ngClass]="{ 'rotate-180': isOpen }"
            name="material-symbols:keyboard-arrow-up"
            class="h-5 w-5 transition-all"
          />
        </div>
      </div>
      <ng-container *ngIf="!isOpen">
        <div
          class="bg-white border w-full border-gray-200 rounded-md absolute flex flex-col z-10 left-0 bottom-12"
        >
          <div *ngFor="let item of pageAmount" class="p-2">
            <div
              (change)="handleAmount(item)"
              class="flex w-full text-gray-600 hover:bg-primary hover:text-white items-center rounded-md px-3 py-2.5 justify-center"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </ng-container>
    </div>
  </div>
</div>

1. isOpen: boolean 변수를 활용해서 여닫기

2. (click) 클릭 이벤트 발생 시 isOpen 변수에 !isOpen 할당

3. *ngIf = 조건 : true 시 자식 요소 로드