CATALOGUE Code & Data Formation Ionic Apprendre Ionic 5

Créer et Personnaliser un IonList avec Ionic et Angular

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

Apprenez à structurer et afficher les informations essentielles d'une annonce avec Ionic et Angular.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous abordons la création et l'enrichissement d'un IonList pour afficher des informations spécifiques d'annonces. Nous commencerons par choisir les informations importantes à afficher, telles que le titre, le prix, la catégorie, la date de publication et une image.

Tout d'abord, nous structurons le contenu textuel en utilisant des balises HTML spécifiques à Ionic, telles que <IonLabel> pour encapsuler le texte. Nous ajoutons le prix avec le symbole de l'euro, puis formatons la date de publication en utilisant le pipe date d'Angular pour obtenir un format lisible.

Ensuite, nous intégrons la catégorie de l'annonce, et expliquons comment gérer les différences de mise en forme par défaut fournies par Ionic pour avoir une application moderne et adaptée aux mobiles.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Comprendre comment enrichir un IonList avec des informations spécifiques.
  • Apprendre à formater le contenu textuel et les dates avec Angular.
  • Maîtriser les balises HTML spécifiques à Ionic.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous avez besoin de :

  • Connaissances de base en Angular et Ionic.
  • De préférence, avoir Visual Studio Code installé.

Métiers concernés

Les compétences acquises dans cette leçon sont utiles pour les métiers suivants :

  • Développeur mobile
  • Ingénieur front-end
  • Architecte logiciel

Alternatives et ressources

Des solutions alternatives incluent l'utilisation de :

  • React Native pour les applications mobiles.
  • Vue.js et Quasar Framework.

Questions & Réponses

Les attributs affichés sont le titre, le prix, la catégorie, la date de publication et une image.
Pour ajouter le symbole de l'euro dans le prix, utilisez la combinaison de touches Alt-G-R plus E.
Le pipe Angular utilisé pour formater les dates est le pipe 'date'.