Как показать другой элемент при наведении в Angular?

Основная проблема вашего кода

1. Неверное название мероприятия.
2. Элемент не отображается, поэтому вы не можете настроить таргетинг на элемент.

Вот простое решение для вас, это может быть и другой способ реализации.

Попробуйте этот, наденьте свой .ts файл компонента.

  onImgMouseover($event): void {
    const box = document.getElementsByClassName('bg-box-hidden')[0];
    box.style.display = 'block';
  }
  
  onImgMouseout($event): void {
    const box = document.getElementsByClassName('bg-box-hidden')[0];
    box.style.display = 'none';
  }

и нужно изменить некоторые HTML что-то вроде

   <div
     class="grid pb1rem"
     (mouseenter)="onImgMouseover($event)"
     (mouseleave)="onImgMouseout($event)"
     >
     <div *ngIf="avatar === null" class="image_wrapper">
       <input
         type="file"
         accept=".png,.jpg"
         (change)="updateImage($event)"
         class="file-input"
         #selectImage
       />
     </div>
     <div *ngIf="avatar !== null" class="image-content">
       <img
         class="image-bg"
         [src]="avatar"
         (click)="selectImage.click()"
         hover-class="test"
       />
     </div>
     
     <div #show class="bg-box-hidden" hover-class="show">
       <button class="btn only-icon">
         <i nz-icon nzType="delete" nzTheme="outline"></i>
       </button>
       <div class="box-button-up">
         <input
           type="file"
           accept=".png,.jpg"
           (change)="updateImage($event)"
           class="file-input"
           #selectImage
         />
       </div>
     </div>
     </div>