Comment changer l'arrière-plan div en fonction du champ de composant au survol de la souris

Question

J'ai un div qui lorsqu'il est survolé, la couleur d'arrière-plan change, je dois également sélectionner la couleur en fonction d'un élément du composant.

<div *ngFor="let u of users;" 
  [style:hover.background-color] = "u.selected ? 'red' : 'blue' ">
</div>

Answer 1

À partir du lien de commentaire ci-dessus :

"En fait, ce n'est pas un problème angulaire : les pseudo-éléments ne font pas partie de l'arborescence DOM et n'exposent donc aucune API DOM pouvant être utilisée pour interagir avec eux."

Vous pouvez donc utiliser des variables CSS à la place :

Fichier de style :

.highlight:hover {
  background-color: var(--highlight-color);
}

Modèle :

<div class="highlight" *ngFor="let u of users;" 
         [ngStyle] = "{'--highlight-color': u.selected ? 'red' : 'blue'} ">
      {{ u.name }}
    </div>