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

2 commentaires

  1. Bonjour Simon,

    J’ai une petite question à vous poser concernant la déclaration de l’annotation @HostListener.
    Pourquoi doit-on indiquer deux fois l’événement que l’on souhaite écouter ? On l’écrit une première fois en paramètre de l’annotation dans les parenthèses puis une seconde fois via la fonction en elle même « onMouseEnter.

    Je ne comprends pas ce point.

    Merci.

    1. Bonjour,

      En fait, il faut distinguer l’annotation en elle-même @HostListener, et le nom de la fonction qui est déclenché lors de l’événement spécifie. Dans notre cas, le nom de la méthode est onMouseEnter(), mais on aurait très bien pu nommer cette fonction toto().

      Je pense que ce qui prête à confusion, c’est d’avoir écrit l’annotation et le nom de la méthode sur la même ligne, mais on aurait pu faire ceci :

      @HostListener(…)
      onMouseEnter() {
      // Le code a exécuté…
      }

      Est-ce que c’est plus clair pour vous avec cet exemple ?

      Bon apprentissage pour la suite,
      Simon.

Laisser un commentaire