34. Les variables référencées dans le template

35. Détecter l’appui sur la touche Entrée

Il existe une autre manière de récupérer les données entrées par les utilisateurs, sans la variable $event. Angular propose une fonctionnalité permettant de déclarer des variables locales dans le template. Ces variables nous garantissent un accès sur l’élément du DOM depuis le template.

On déclare une variable locale avec l’opérateur #.

Dans l’exemple de code de la vidéo, nous avons déclaré une variable box référence dans le template. La variable box est une référence à l’élément sur lequel elle a été déclarée. Nous pouvons ensuite récupérer la valeur entrée par l’utilisateur grâce à la propriété value, et l’afficher via à l’interpolation. L’interpolation sert alors à afficher la variable référencée dans le template.

Les variables référencées dans le template sont accessibles pour tous les éléments fils et frères de l’élément sur lequel elles ont été déclarées.

Heu, à quoi sert le (keyup)= »0″ à la ligne 4 ?

Ce code est important car Angular prend en compte la liaison de données entre le composant et le template seulement si on effectue une action en réponse à des événements asynchrones, comme des frappes sur le clavier.

Et pourquoi zéro ? Et bien le zéro est la plus courte déclaration pour signifier que nous ne voulons rien exécuter, mais simplement activer la liaison de données entre la variable locale et la valeur interpolée !

Les variables référencés dans le template peuvent être intrigantes au départ, mais elles permettent d’écrire un code plus lisible avec l’habitude. Reprenons notre exemple précédent avec des variables référencées dans les templates.

C’est quand même plus simple que de manipuler l’objet $event non ?

Je vous propose de voir ensemble deux autres événements qui pourront nous être utiles:

  • Détecter lorsque l’utilisateur appuie sur Entrée.
  • Lorsqu’il perd le focus sur un champ texte.

A tout de suite dans la vidéo suivante ! 😉

35. Détecter l’appui sur la touche Entrée

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 )

Connexion à %s