CATALOGUE Code & Data Formation Ionic Apprendre Ionic 5

Envoyer et recevoir des paramètres dans un modal avec Ionic et Angular

Retour à la formation
Chapitre 3 Leçon 10
Précédent
Suivant

Apprenez à envoyer et récupérer des paramètres via un modal Ionic en utilisant Angular, NavParams et NGModel.

Détails de la leçon

Description de la leçon

Dans cette leçon sur Ionic et Angular, nous abordons la gestion de paramètres dans un modal. La leçon commence par la préparation d'une liste personnalisée de catégories. Ensuite, nous expliquons comment envoyer cette liste au modèle à travers la fonction create du modèle contrôleur en utilisant component props. Nous continuons en montrant l'utilisation du service Nav Params pour récupérer les objets envoyés en paramètres.

Une fois les paramètres récupérés, nous associons ces valeurs aux éléments de la vue en utilisant les directives Angular classiques comme ngFor et ngModel. Par exemple, nous montrons comment afficher les labels de catégories dans des composants ion-label et lier les cases à cocher (checkboxes) à leurs valeurs booléennes.

Enfin, nous terminons avec des tests pour vérifier que toutes les cases à cocher sont cochées par défaut et que les changements sont bien reflétés dans la liste reçue. La prochaine étape consistera à apprendre comment fermer un modal et retourner les modifications à la page initiale.

Objectifs de cette leçon

Maîtriser l'envoi et la récupération de paramètres dans un modal Ionic,
Utiliser les services Angular pour gérer les données passées entre composant et modal.

Prérequis pour cette leçon

Connaissance de base d'Ionic et Angular, Expérience avec TypeScript et les composants Angular.

Métiers concernés

Développeurs d'applications mobiles, créateurs de solutions web interactives, ingénieurs front-end.

Alternatives et ressources

Autres frameworks de développement mobile comme React Native ou Flutter, Utilisation de modals avec Vanilla JavaScript ou d'autres bibliothèques JavaScript.

Questions & Réponses

En utilisant la fonction create du modèle contrôleur avec un objet component props.
L'utilisation du service Nav Params permet de récupérer les objets envoyés en paramètres.
La directive ngFor est utilisée pour itérer sur des listes et afficher les éléments dans la vue.