Angular - 2.27-Exercice3
Nous arrivons enfin au dernier devoir de cette section du cours. Mettez en pratique ce que vous avez appris sur les directives et utilisez les directives les plus courantes pour ajouter un bouton qui dit "Affichez les détails". Ajoutez également un paragraphe avec le contenu de votre choix et basculez l'affichage de ce paragraphe avec le bouton créé dans la première étape. Enregistrez tous les clics de boutons dans un tableau et affichez ce tableau sur le paragraphe secret. À partir du 5ème élément, donnez à tous les éléments futurs du log un fond bleu via ngStyle et une couleur blanche en utilisant ngClass.
Mettez la vidéo en pause pour faire cet exercice. Lorsque vous avez terminé, revenez et continuez à regarder la correction.
Alors, avez-vous réussi ? Résolvons-le ensemble. Je vais commencer juste en dessous de cette liste ordonnée et ajouter un bouton avec quelques classes CSS : "btn, btn primary" et le texte "Afficher les détails".
Ensuite, j'ajouterai mon paragraphe avec le texte "Mot de passe secret = test". Je ne veux afficher cela que s'il n'est pas déjà affiché et s'il est affiché, je ne veux pas le ré-afficher. Pour cela, je vais utiliser la directive ngIf.
Je vais ajouter une propriété à mon composant d'application, que je nommerai "showSecret", n'importe quel nom que vous aimez bien sûr, et je vais le définir sur "false" initialement.
Maintenant, dans mon composant d'application, j'ajouterai un écouteur de clic sur mon bouton avec la liaison d'événement. Lorsque le bouton est cliqué, je vais simplement définir "showSecret" égal à "!" (négation logique) "showSecret". Ainsi, s'il est faux, il sera défini sur vrai et s'il était vrai, il sera défini sur faux. Maintenant, avec cela, je peux ajouter ngIf ici et vérifier si "showSecret" est vrai et ne le montrer que dans ce cas.
Si "ng serve" est en cours d'exécution, nous revenons en arrière et que je clique sur cela, maintenant vous voyez que le basculement fonctionne comme prévu, donc les trois premières tâches sont déjà résolues
.Maintenant passons à la quatrième étape, le connecter dans la console. Pour cela, je vais en fait dupliquer ce bouton et commenter la première solution avec le raccourci, parce que pour le connecter, j'appellerai une méthode "onToggleDetails", n'importe quel nom que vous aimez cependant. Je vais ajouter cette méthode dans le composant d'application.
Je vais utiliser le code de basculement ici pour définir "showSecret" sur "is not this.showSecret". Puis, je veux le connecter. Donc, je le nommerai "log" et il devrait être un tableau de nombres au début. Puis, je vais utiliser "this.log.push" pour pousser un nouveau nombre. Et ce nombre devrait en fait tenir compte de la longueur actuelle de "this". Donc, si "this" est au début à zéro, l'élément "this" sera également zéro. Ensuite, j'ajouterai plus un. Donc, si vous avez un élément dans le tableau, la longueur sera d'un tri de l'élément suivant, donc il devrait avoir une valeur de deux. "This" ajoute ces éléments au log. Maintenant, je le sors ci-dessous le paragraphe et je choisis un élément "div" ici.
Je vais utiliser "ngFor" dessus et nous apprendrons que nous utilisons "ngFor" en disant "let", et maintenant nous pourrions mettre "logItem", ou n'importe quel nom que vous voulez ensuite de "log" de la propriété que vous voulez parcourir. Cela pourrait également être une méthode appelée retournant un tableau. Cependant, cela doit être un tableau. Ainsi, ici, nous parcourons les logs entre les balises d'ouverture et de fermeture de "div".
Je peux maintenant utiliser l'interpolation de chaîne pour produire en sortie "logItem". Nous n'avons pas fait cela dans les dernières vidéos, mais cela vous a dit que "logItem" est une variable que nous pouvons maintenant utiliser dans un modèle, et c'est exactement ce que nous faisons ici. Je sors l'élément "logItem".
Donc, si nous regardons notre application, et que je clique sur ce bouton, vous voyez que j'ajoute cette liste, elle saute autour parce que j'ajoute et enlève ce mot de passe secret. Mais vous voyez que la liste grandit comme prévu. Le log fonctionne. Maintenant, à propos de cette coloration, la cinquième étape ici... Eh bien, c'est facile à produire lorsqu'on utilise un nombre comme celui-ci.
En le faisant, je vais aller dans mon div et je commencerai avec le style, le fond bleu noir. Nous utiliserons "ngStyle" et nous avons appris que nous avons besoin de la liaison de propriété pour que cela fonctionne correctement, parce que nous devons passer un objet JavaScript configurant nos styles quand nous voulons attacher quels styles. Ainsi, le style à attacher est d'une couleur de fond.
Je vais à nouveau utiliser la notation Camel case, bien que vous puissiez utiliser des guillemets simples pour avoir un "background-color" comme nom. Et maintenant, c'est facile de vérifier si "logItem" est un nombre parce que je veux vérifier si "logItem" est supérieur ou égal à cinq, auquel cas la couleur de fond devrait être bleue. Ceci est une chaîne, sinon elle sera transparente ou blanche pour avoir un fond non bleu ici. "LogItem" est bien sûr un nombre, donc cette vérification devrait être facile. Et oui, vous pourriez externaliser cette partie bien sûr dans une méthode que vous appelez ici. Généralement, avoir la plupart de la logique dans le code TypeScript, dans le corps de votre composant est une bonne pratique, mais ici, je pense que c'est aussi bien de le mettre dans le modèle et de montrer que c'est possible aussi.
Avec cette vérification maintenant en place, voyons si cela fonctionne comme prévu. Si je clique sur ce bouton, l'élément suivant devrait avoir un fond bleu et il l'a. Cela fonctionne, mais c'est assez difficile à lire. Alors, terminons la deuxième partie ici et donnons-lui une couleur blanche. Pour cela, dans mon fichier CSS, je vais définir une classe nommée white-text, peu importe le nom que vous choisissez, bien sûr, c'est totalement à vous de décider. Et je vais définir la couleur en blanc. Maintenant, cette classe CSS white-text ne doit être attachée que si nous sommes à l'élément cinq ou plus. Donc, à côté de ng-style, je vais ajouter ng-class et j'utiliserai une liaison de propriété, donc des crochets carrés ici aussi, car j'ai besoin de passer un objet JavaScript à la propriété ng-class de la directive ng-class pour que cela fonctionne correctement.
Entre des guillemets simples, étant donné que nous avons un tiret à l'intérieur du nom, j'ajouterai la classe white-text, la classe que nous venons de créer ici. Seulement si la condition de connexion spécifiée ici en tant que valeur renvoie true. Et la condition est simplement que l'élément logItem est égal ou supérieur à cinq, tout comme sur la directive ng-style. Donc, si this renvoie true, nous devrions avoir la classe white-text attachée, ce qui devrait rendre le texte blanc. Voyons si cela fonctionne.
Je vais cliquer sur Afficher les détails. Donc ici, le texte n'est clairement pas blanc. Cela fonctionne et maintenant ça a l'air bien. Fond bleu, texte blanc. Génial. Maintenant, je vais montrer un beau bonus à la solution dans la prochaine vidéo, où j'utiliserai des horodatages car cela utilise une addition supplémentaire de ngFor que nous n'avons pas vue auparavant.