How to animate each MatListItem on mouseenter in angular 20?

i have a comment component with a mat-list component from material and inside it many mat-item-list so for each mat-list-item component i want to listen event like mouseenter and do something when event is happening.

This is the template of the component

@if(comments.length !== 0){
    <mat-list>
        <h2 mat-subheader>Commentaires </h2>
        
        @for (comment of comments; let i = $index; track $index) {
            <mat-list-item animateList>
                <span matListItemTitle>{{ comment.comment }}</span>
                <span matListItemLine>{{ comment.createdDate | timeAgo }}</span>
            </mat-list-item> 
        }
    </mat-list>
}

I create a directive for it to listen the event on it

import { AfterViewInit, Directive, ElementRef, HostListener, inject, Renderer2 } from '@angular/core';


@Directive({
  selector: '[animateList]'
})

export class AnimateList {

  //dependency injection
  el = inject(ElementRef);
  render = inject(Renderer2);

  //adding event 

  @HostListener('mouseenter')
  onMouseEnter() {
    this.render.addClass(this.el.nativeElement, 'active');
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.render.removeClass(this.el.nativeElement, 'active');
  }

}

and here is the animation that i want

.active{
    animation: scale-colored 300ms ease-in;
}


@keyframes scale-colored {
    from {
        background-color: white;
        transform: scale(1);
        z-index: 1;
    }
    
    to {
        background-color: rgb(147, 150, 242);
        transform: scale(1.05);
        z-index: 2;
    }
}