Angular hover 시 목록 값 보여주기 예시 / 마우스 호버

<div
      id="inventory"
      *ngFor="let item of inventories | paginate:
{ itemsPerPage: pageInfo.itemsPerPage, currentPage: pageInfo.currentPage, totalItems: pageInfo.totalItems}"
      class="flex w-full text-sm"
    >


<div
    class="relative flex basis-2/12 justify-center items-center text-blue-900 font-semibold py-4 hover:bg-gray-50 group"
    (mouseover)="statusOver(item)"
    (mouseleave)="isStatus = false"
  >
    {{item.status}}
    <!-- hoverEvent -->
    <div
      *ngIf="isStatus && item.sequence === hoveredItem"
      class="w-full absolute bottom-12 left-20 bg-white z-30 rounded-lg text-gray-700 border border-gray-200 shadow"
    >
      <div class="flex gap-20 px-4 py-3 border-b border-gray-100">
        <div class="font-bold whitespace-nowrap">재고 상태 상세</div>
        <ion-icon
          class="w-6 h-6 cursor-pointer hover:text-red-500"
          name="close-outline"
          (click)="statusLeave(item)"
        ></ion-icon>
      </div>

      <div class="flex flex-col gap-4 p-4">
        <div class="flex flex-col">
          <div>2022-01-10</div>
          <div>페퍼로니 ({{item.sequence}})</div>
          <div>출고승인</div>
        </div>
        <div class="flex flex-col">
          <div>2022-01-10</div>
          <div>페퍼로니 ({{item.sequence}})</div>
          <div>출고승인</div>
        </div>
      </div>
    </div>
    <!-- hoverEvent -->

1. mouseover, mouseleave 활용

2. 목록에 노출된 아이템의 고유 번호와 호버 시 해당 아이템의 고유 번호를 비교

isStatus: boolean = false; // 호버 여닫 여부
selectedId!: number; // 호버 시 선택 된 값 저장

statusOver(inventory: Inventory) {
    if (!inventory.status) {
      this.selectedId = 0;
      return;
    }
    this.isStatus = true;
    this.selectedId = inventory.sequence;
  }

  statusLeave(inventory: Inventory) {
    if (!inventory.status) {
      return;
    }
    this.isStatus = false;
    this.selectedId = 0;
  }

2. 컴포넌트