Bonjour, j'ai plusieurs images que j'affiche , et si je survole l'un d'entre eux je souhaites modifier cette image
voici mon template que j'ai testé:

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
  <div class="menu three wide" *ngFor="let p of produit, let i = index">
 
    <a (click)="onSelectMenu(menu)">
        <img #croque (mouseenter)="survol(p.img)" (mouseout)="quit()" src={{racineImg}}{{p.img}}{{extImg}}>
        {{p.nom}} - {{p.prix}} euros
    </a>
</div>

au moment ou je survole l'image avec mousenter je transmet p.img qui est le nom de l'image,
ce que j'essaye de faire c'est ensuite de modifier avec l'interpolation {{ p.img }} par une autre valeur connue

p.img non survolé par exemple = pizza
p.img survolé sera o_pizza

comment je dois m'y prendre au niveau du composant ?

les valeurs racineImg et extImg sont constant donc pas de problème mais comment arriver correctement à changer ce p.img au survole ?


Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
export class ProduitComponent implements OnInit {
 
  @Input() produit;
 
 
  racineImg = '../assets/produits/';
  extImg= '.png';
  p.nom = 'image'; //cette attribut n'est pas correcte 
 
  survol(produit){//chargement de la 2ème image  
    console.log("produit component:: produit ",produit); 
   this.p.nom=produit
  }
comment je m'y prend pour arrive correctement à changer le nom de l'image ?

merci de votre réponse