Ionic - 7.10 Afficher une liste de lieux dans une grille Ionic
Dans une page Ionic, les données viennent souvent d'un service Angular. Cette leçon montre comment injecter ce service dans la page Discover, charger les lieux au démarrage et les afficher dans une grille. Les cartes montrent le titre, l'image, la description et le prix de chaque lieu.
Injecter le service et charger les lieux
Le service est injecté dans le constructeur de la page Discover. La page l'utilise ensuite pour récupérer la liste des lieux, stockée dans une propriété de la page.
Le chargement se fait dans ngOnInit. Les pages sont mises en cache lorsqu'on passe d'un onglet à un autre, donc ce code ne se répète pas à chaque affichage de la page.
Le service contient une dizaine de lieux factices, définis dans un tableau. Cela permet de tester l'affichage avant de brancher une vraie source de données.
Construire la grille de cartes
La grille est construite avec ion-grid, puis ion-row et ion-col. La première carte affiche le lieu situé à l'indice zéro du tableau, avec une interpolation pour son titre et sa description.
Une image est ajoutée avec ion-img, et le prix avec le pipe currency d'Angular. Ce pipe affiche le symbole de la devise, ici le dollar. Il peut être configuré pour une autre devise, comme le rappelle la documentation officielle d'Angular.
Pour centrer la carte, la colonne prend une taille de 12 colonnes par défaut et de 8 à partir du format sm, avec un décalage de 2. Le texte est aussi centré. La deuxième ligne reprend ces réglages pour rester alignée.
Afficher les autres lieux
Pour les autres lieux, la méthode slice permet de parcourir le tableau à partir de l'indice 1. Une boucle *ngFor affiche donc chaque lieu restant.
Chaque lieu est présenté dans une vignette ion-thumbnail placée à gauche, avec une image carrée. À droite, un ion-label contient un titre de niveau 2 et un paragraphe pour la description.
En résumé
La page Discover reçoit les lieux par un service, chargés dans ngOnInit. Une grille Ionic affiche la première carte en grand, puis les autres en vignettes. Les images passent par ion-img, et le prix s'affiche avec le pipe currency d'Angular.
Points clés
- Le service est injecté dans le constructeur et les lieux sont chargés dans ngOnInit.
- Une grille Ionic se construit avec ion-grid, ion-row et ion-col.
- Le pipe currency affiche le prix avec un symbole de devise.
- La méthode slice permet de parcourir les lieux à partir du deuxième.
- ion-thumbnail et ion-label structurent chaque vignette.
Questions fréquentes
Pourquoi charger les lieux dans ngOnInit et non à chaque affichage ?
Les pages sont mises en cache quand on change d'onglet. Le code de ngOnInit ne s'exécute donc pas à chaque fois que la page redevient visible.
Comment afficher le prix avec un autre symbole ?
Le pipe currency d'Angular ajoute un symbole, par défaut le dollar dans la vidéo. La documentation officielle d'Angular explique comment choisir une autre devise.
Les données sont-elles réelles ?
Non, la vidéo utilise des lieux factices stockés dans le service. Une vraie source de données remplacerait ce tableau.