Je vous propose d’améliorer le template qui liste les Pokémons, grâce à la directive NgFor.

Cependant, avant de développer notre template, je vous propose d’ajouter la librairie CSS Materialize , pour avoir une interface utilisateur digne d’un vrai site. Vous n’êtes pas obligé de l’utiliser, mais cela vous permettra d’avoir la même base de code que celle utilisée dans ce cours.

Pour cela, ajoutez le CSS de Materialize pour styliser notre application. Ajoutez la ligne de code de la vidéo dans le fichier index.html, avant la balise .

Ensuite, modifiez la ligne concernant le template, dans app.component.ts, car nous allons charger notre template depuis un fichier externe désormais:

Vous devez ensuite créer le fichier du template, app.component.html, dans le dossier app.

C’est tout bon ! Attaquons le vif du sujet, notre template !

Je vous fournis ci-dessous une correction avec le style fourni par Materialize. Le choix de l’interface utilisateur est très subjectif, et il est tout à fait probable que vous n’ayez pas le même code que celui de la correction. Je vous invite à vous en inspirer pour avoir la même base dans la suite du cours.
Dans la vidéo, je présente le template du composant à ajouter dans le fichier app.component.html.

TOUTES les classes utilisées ci-dessus sont des classes issues de la librairie Materialize, et ne sont pas liées à la syntaxe des templates d’Angular.

Nous allons détailler, comme ça personne n’est perdu.

  • Ligne 1: Un titre avec la classe center, c’est une classe de Materialize qui permet de centrer du texte.
  • Ligne 2: Une balise div avec la classe container, c’est une classe de Materialize qui permet de centrer le contenu de notre page web.
  • Ligne 3: Une balise div avec la classe row, c’est encore une classe de Materialize (décidément !) qui permet de définir une ligne dans la page, ce qui va nous permettre d’afficher nos Pokémons les uns à la suite des autres.
  • Ligne 4: On utilise la directive ngFor, afin de créer un nouveau bloc pour chacun de nos Pokémons. On précise que sur des petits écrans, chaque Pokémon prendra la moitié de l’écran: s6, et sur les autres écrans (tablettes, PC) chaque Pokémon prendra un tiers de l’écran: m4. Ces classes signifient respectivement : s pour small (petits écrans) et m pour medium (écrans moyens). Le container que nous avons défini précédemment possède une largeur arbitraire de 12, donc s6 signifie : « Prendre la moitié de l’écran sur les petits écrans », car 6 est bien la moitié de 12 ! 😮
  • Ligne 5: On utilise la classe card et horizontal pour définir un bloc avec une image à gauche et un texte à droite au sein de chaque bloc. On détecte le clic sur ce bloc, en appelant la méthode selectPokemon en passant en paramètre le pokémon sur lequel l’utilisateur a cliqué.
  • Ligne 6: On utilise simplement une classe de Materialize pour ajouter un peu de style… je ne présenterai plus les lignes de ce genre.
  • Ligne 7: On utilise la liaison de propriété pour définir une source à notre image. N’oubliez pas d’ajouter les crochets pour qu’Angular puisse interpréter l’expression passée en paramètre !
  • Ligne 11 et 12: On utilise l’interpolation pour afficher les propriétés de nos Pokémons !

Je vous invite à jeter un coup d’oeil à la documentation de Materialize pour comprendre ce que font toutes ces classes. La documentation est très bien faite, et il nous suffit la plupart du temps de récupérer les classes dont on a besoin pour ajouter du style à notre page web.

templates-end
Notre application de pokémons

Au final, voici ce que vous devriez obtenir, après avoir lancé l’application avec npm start, bien sûr ! 😉

40. Conclusion

Laisser un commentaire