43. Prendre en compte les actions de l’utilisateur

44. Utiliser notre directive

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

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s