IONIC Section 4 - 4.14 Création d'éléments Ionic par programmation

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Dans cette vidéo, nous allons enrichir notre carte de dépenses (<ion-card>) en affichant la liste de toutes les saisies. Comme nous travaillons dans une <ion-grid>, il faut garder en tête que la largeur de chaque élément se contrôle via les lignes (<ion-row>) et les colonnes (<ion-col>) : on évite ainsi qu'une liste n'occupe toute la largeur de l'écran sur les grands formats.

Structurer la liste dans la grille

Nous ajoutons une nouvelle <ion-row> sous la première, puis une <ion-col> qui accueille une <ion-list>. On lui attribue un identifiant id="expenses-list" pour pouvoir la récupérer côté JavaScript. <ion-list> est un composant fourni par Ionic qui structure des données les unes en dessous des autres ; <ion-item> servira ensuite à envelopper chaque entrée pour bénéficier d'un rendu cohérent.

Dans app.js, on récupère la liste via const expensesList = document.querySelector('#expenses-list');. Là où la console se contentait jusqu'ici d'enregistrer le montant saisi, nous allons désormais créer un véritable élément. C'est document.createElement('ion-item') qui s'en charge : il s'agit d'une API DOM standard, indépendante d'Ionic, et c'est précisément la force des Web Components — ils s'utilisent comme n'importe quelle balise HTML.

  • const expensesList = document.querySelector('#expenses-list');
  • const newItem = document.createElement('ion-item');
  • newItem.textContent = enteredReason + ' : € ' + enteredAmount;
  • expensesList.appendChild(newItem);

On assigne au nouvel élément un contenu textuel qui concatène la raison saisie, le symbole euro et le montant, puis on l'ajoute à la liste avec appendChild. À ce stade, en rechargeant l'application et en saisissant par exemple « facture » à 10, la nouvelle entrée s'affiche bien sous le formulaire. On peut même réitérer pour multiplier les entrées.

Même si Angular prendra le relais plus tard pour générer ce code automatiquement, il est essentiel de comprendre cette mécanique : Angular ne fait que compiler ces Web Components Ionic en HTML et JavaScript classiques, qui interagissent directement avec les API du DOM. C'est cette compréhension qui rendra la suite limpide.

En résumé

Cette leçon enseigne comment créer dynamiquement des éléments Ionic en JavaScript, particulièrement pour construire une liste de dépenses. L'instructeur montre comment accéder à un conteneur `ion-list` via `document.querySelector()`, créer des éléments `ion-item` avec `document.createElement()`, ajouter du contenu textuel (raison et montant avec devise), puis insérer les nouveaux éléments dans la liste avec `appendChild()`. Cette approche démontre que les Web Components Ionic se manipulent comme des éléments HTML normaux, sans dépendre d'Angular, ce qui est fondamental pour comprendre comment les frameworks modernes interagissent avec les composants web standards.

Points clés

  • Accéder à un élément Ionic du DOM avec document.querySelector() en utilisant l'attribut ID
  • Créer dynamiquement un élément ion-item via document.createElement('ion-item')
  • Ajouter du contenu textuel (montant, devise, description) aux éléments créés
  • Utiliser appendChild() pour insérer les nouveaux éléments dans la liste parent
  • Les Web Components Ionic fonctionnent comme des éléments HTML standard et peuvent être manipulés avec les API DOM natives
  • Ce processus fonctionne sans dépendre d'Angular - le framework gère le reste en arrière-plan

Questions fréquentes

Comment accéder à une liste Ionic depuis le JavaScript?

Utiliser document.querySelector() avec le sélecteur de l'ID de la liste. Par exemple: const expensesList = document.querySelector('#expenses-list');

Comment créer un nouvel élément ion-item par programmation?

Utiliser document.createElement('ion-item') pour créer l'élément, puis ajouter le contenu textuel et insérer l'élément dans la liste avec appendChild().

Pourquoi utiliser ion-item plutôt qu'un élément HTML standard?

ion-item est un Web Component fourni par Ionic qui structure automatiquement les données de liste de manière élégante et professionnelle, avec des styles et comportements prédéfinis adaptés à une application mobile.