Angular document.getElementById не работает с интерполяцией динамически

Question

У меня есть список динамических c изображений, которые я хочу отображать непрозрачностью, только когда пользователь наводит курсор на конкретное изображение. Моя проблема заключается в том, что я назначаю каждому изображению идентификатор динамически, но не могу динамически получить свойство элемента.

Я получаю ошибку Получил интерполяцию ({{}}) там, где ожидалось выражение

<span *ngFor="let image of imagess">   
  <img  attr.id="Image{{image.id}}"
    [src]="sanitizer.bypassSecurityTrustUrl('data:'+image.mimeType+';base64, '+image.frontImage)"       
    onmouseover="style.opacity=.16;"
    onmouseout="style.opacity=1;"
    />    
  <span onmouseover="document.getElementById('Image'{{image.id}}).style.opacity=.16;"> <----Right here is what I need 

  //Icons and other things here      
  </span>    
</span>

Answer 1

Я бы переписал его на Angular way:

<span *ngFor="let image of images">   
  <img
    ...
    #img   
    (mouseover)="img.style.opacity= '.16'"
    (mouseout)="img.style.opacity= '1'"
    />    
  <span 
    (mouseover)="img.style.opacity= '.16'"
    (mouseout)="img.style.opacity= '1'"
  >Hover over me</span>    
</span>

Ng-run Пример