Ce que nous aimerions maintenant, c’est que la bordure change de couleur lorsqu’un utilisateur survole un élément. Pour cela nous avons besoin de:

  • Détecter lorsque le curseur entre ou sort d’un élément de la liste.
  • Définir une action pour chacun de ces événements.

On va utiliser une nouvelle annotation @HostListener. Cette annotation permet de lier une méthode de notre directive à un événement donné. Nous allons donc créer deux nouvelles méthodes dans notre directive, qui seront appelées respectivement quand le curseur de l’utilisateur entre sur un élément, et quand il en ressort: ce sont les événements mouseenter et mouseleave.

Dans le code final de notre directive, j’utilise l’annotation @HostListener.

Voici ce que nous avons ajouté par rapport à la version précédente de notre directive:

  • Nous avons importé HostListener depuis la librairie core d’Angular.
  • Nous avons défini la propriété el grâce à la syntaxe des constructeurs de TypeScript. C’est pourquoi nous pouvons utiliser this.el ailleurs dans notre directive.
  • Nous utilisons l’annotation @HostListener pour détecter deux événements, mouseenter et mouseleave.

Il est fortement recommandé d’utiliser @HostListener plutôt que de définir nous-même des écouteurs d’événements. Vous y gagnerez à tous les niveaux: cela vous évite d’interagir directement avec l’API du DOM, vous n’avez pas à détacher vous-même les écouteurs d’événements lorsque la directive est détruite, etc.

Voilà, nous avons désormais une directive qui va rajouter une bordure de couleur lorsqu’un utilisateur passera son curseur au-dessus d’un Pokémon de la liste. Il ne reste plus qu’à l’intégrer à notre application.

44. Utiliser notre directive

Laisser un commentaire