Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir Angular 2

Conditionner des affichages

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans certains cas, vous pouvez avoir besoin de cacher ou d'afficher des informations en fonction d'une condition. Découvrez comment dans cette vidéo.
04:24

Transcription

Vous pourrez également, ici, ouvrir votre panneau de développeur, je vous le conseille vraiment pour voir un petit peu ce qui se passe. Vous verrez, quand vous venez travailler, par exemple, sur une interpolation, ici, avec une répétition. Vous avez de l'information et de l'aide. Donc, cela vous permet de garder un peu le contrôle sur ce qui se passe. Vous verrez bien effectivement toutes les informations dont vous avez besoin. Et surtout, votre conception de page. Maintenant qu'on a parlé de la boucle, je vais traiter de la conditionnelle. C'est à dire, la façon d'afficher ou non une information en fonction d'une autre information. Donc on va conditionner les affichages. Pour faire ça, on va rajouter une State. Zéro, c'est pas encore livré ; une autre state qui va être A1, c'est en cours de livraison. Et une state qui va être ici : A2, ça a été livrée. Cela, vous pouvez le définir de la sorte. Et maintenant comment on va faire ? Je vais vouloir afficher un texte en fonction de la condition. Là, je vais vouloir afficher un paragraphe pour avoir une class par exemple : la class state, et on va pouvoir avoir trois states : la state zéro, et puis ensuite la state, évidemment un et deux. Je vais donc afficher un et deux, ici, je vais mettre à livrer là, en cours de livraison. Enfin, ici, je vais mettre commande finalisée ou commande livrée, ce qui sera encore plus parlant. Quand vous aurez fait çà, évidemment il va falloir afficher le state, en fonction du statut réel de la livraison. Et on va utiliser encore une fois, ici, une directive qui existe et disponible en Angular 2 : NgIf. L'expression sera une conditionnelle que vous allez définir. Et vous allez pouvoir facilement pouvoir le faire. En disant quoi ? Item.state, égale, égale à zéro. Alors, je vous conseille de le faire dans l'autre sens pour éviter les assignation barbares. Donc ça va être plutôt zéro, égale égale et vous allez reprendre ce bloc là. Vous allez pouvoir ici le dupliquer en dessous, en disant : si c'est un, on affiche en cours de livraison, et si c'est deux on affiche ici : commande livrée. Bien sûr, on pourrait le faire en amont, mais c'est pour vous montrer que dans le template, on peut utiliser NgIf pour conditionner un affichage particulier. Alors, ici, on va simplement basculer et on va aller regarder ce qui se passe. On voit bien que la première livraison est à livrer. La deuxième est en cours de livraison, et la troisième est finalisée et livrée. C'est assez simple de faire des conditionnels, il suffira juste d'avoir une propriété sur laquelle on va conditionner les informations. Généralement, cela va être un chiffre, une information particulière On pourra faire pas mal de choses avec les conditionnels. Là, je vous ai montré NgIf, mais évidemment, il y a d'autres possibilités. On verra un petit plus tard, des choses un peu sympa, qu'on peut faire avec les conditionnels. Pensez en tout cas à utiliser NgIf, quand vous avez besoin d'afficher ou non une information. Qu'est ce qui se passe dans le template ? Dans le template, si vous regardez à l'intérieur vous verrez qu'effectivement, on a bien des NgIf qui sont faits. Et regardez ! on a même des NgIf Falls qui apparaissent. Là, on a des trous avec des Falls et puis un peu en-dessous, on a des falls, des trous et des falls. Bien sûr, le bout de template n'est pas rajouté directement mais on a quand même une conservation du contrôle. On voit ce qui se passe, on voit bien qu' il y avait ici, trois possibilités et que sur les trois, il a choisi celui qui correspondait bien à la conditionnelle qu'on a définie. Et d'ailleurs on ne retrouve plus la conditionnelle ensuite dans le code Html qui est générée. On retrouve uniquement ce qui nous intéresse. C'est compilé avant d'être affichée réellement au client ; cela c'est pas mal ! Là, si on a toutes ces infos, c'est parce qu' on est en mode Dave, en mode débug. Quand on est plus en mode débug, on a juste la compilation finale. Vous voyez que c'est très sympa. On a beaucoup moins d'informations nauséabondes qu'on pouvait avoir avec Angular 1, avec la version deux, et ça, c'est plutôt sympa !

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 !