Découvrir Angular 2

Récupérer une valeur sur l'évènement

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Un évènement est attaché à un élément et à une action à un moment donné. Au même titre que les informations de l'évènement, vous pourrez récupérer l'élément HTML.
03:54

Transcription

Pour ceux qui sont habitués à faire du jQuery, vous allez certainement vous dire, mais comment là, je vais faire pour interagir avec mon élément. L'élément sur lequel j'ai cliqué, j'ai peut être besoin de récupérer quelque chose. C'est vrai, ouais ! vous avez raison. Imaginons qu'ici, effectivement, je récupère une information. Par exemple, là, on mettrait en ID, pourquoi pas ! une information qui serait unique selon la boucle d'itération. Cela serait possible, par exemple, on pourrait ici, venir caler la référence. Ce qui fait qu'on aurait besoin de cette référence-là. Comment je fais pour la récupérer ? Il faut savoir que lorsque vous êtes en train de travailler sur l'évènement l'Event, ici, vous avez la possibilité de récupérer l'élément. Comment on va faire pour récupérer l'élément : on va utiliser Target. De temps en temps, ce ne sera pas forcément Target. Il faut faire attention, car il peut se trouver à divers endroits cet élément. Cela peut être Src Element Target ou alors Current Target. Ce sont les trois que vous pouvez avoir ! La plupart du temps, on fait une feinte. On crée ici, une variable avec Let, qu'on va appeler Element. Et on va lui dire, ça peut être soit Event.Target, soit Event.src Element, soit Event, et on met le dernier Event.currentTarget. En faisant cela, vous êtes sûrs d'avoir un élément. Á ce moment là, on va faire un Console.log de cet élément-là, Element. Comment, je fais maintenant pour récupérer ces attributs ? Imaginons que j'ai envie de récupérer ces attributs. Comment vais-je faire ? Eh bien, je vais simplement, ici, faire un point, et faire Attributes. Alors attention ! car celui-ci n'est pas forcément listé dans l'auto-complétion. Si vous ne le connaissez pas, cela peut être compliqué. Si je fais Element.Attributes, je vais avoir la liste des attributs de l'élément. On va recharcher la page qui va se recharger toute seule, et on va cliquer sur Details. Et effectivement, on va voir qu'on a bien tous les éléments ici, sous forme d'objets. C'est très propre, vraiment super sympa à utliser. Et on peut tout à fait allez récupérer l'ID facilement. On va essayer, là, d'avoir l'ID. D'avoir un Console.log de l'ID, c'est cela qui nous intéresse. On va ici, faire Details, vous allez voir une chaîne de caractères ID : 1,2,3,4. Bien sûr, si je vais cliquer sur le prochain ID 3,4,5,6 et enfin ID 5,6,7,8. C'est pas forcément très intéressant pour nous, pourquoi ? Car vous voyez qu'on récupère une espèce de chaînes de caractères, comme ceci. On ne peut pas malheureusement faire mieux ! Il y a une méthode qui permet de faire Element.ID, et qui vous récupérera une chaîne. Par contre, pour les autres propriétés : faites attention ! Car, on n'aura pas forcément accès à tout. Si vous faites Href, comme cela, et que vous cliquez, on va bien récupérer le Href, mais, il peut arriver que vous ayez des propriétés qui passent mal. N'hésitez pas aussi à utiliser les Data. Si par exemple, ici, ce n'est pas un vrai identifiant Css mais une Data que je veux, je peux tout à fait utiliser Data ID, et ici, récupérer la Data. Si, je fais Data ID, comme cela, et que je recharge ma page que je viens cliquer, je ne vais pas avoir du tout d'information. Pourquoi ? Parce qu'on va me dire qu'ID n'est pas définit. Faites attention aussi, car quand vous allez utiliser les Data, il y a une subtilité, ici, les Data, ce ne sera pas vraiment des propriétés, parce qu'elles ne sont pas reconnues. On sera obligés quand on va utiliser de la Data de passer par d'autres méthodes un peu plus particulières. Donc, si vous avez besoin de faire cela et de passer des données à votre fonction, il y a d'autres méthodes en Angular qui existe. Ne faites pas du Data quelque chose, comme on a pu le faire en jQuery parce qu'on le faisait beaucoup : on passait de l'information comme cela. En Angular, on a des modèles, et on verra après, que les modèles, c'est quand même, le mieux pour interagir avec une fonction.

Découvrir Angular 2

Prenez en main toute la puissance du framework AngularJS. Exploitez ses fonctionnalités, et développez rapidement des applications web robustes et performantes !

2h50 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :6 sept. 2016
Durée :2h50 (40 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !