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 !

Bonjour à tous, maintenant dans notre « ion-card », nous voulons rendre une liste de toutes nos dépenses. Il faut garder en tête que nous sommes dans le « ion-grid » avec nos lignes et nos colonnes pour contrôler la largeur de nos éléments dans cette grille. La largeur de la liste que nous souhaitons rendre doit également être contrôlée, elle ne doit pas occuper toute la largeur de la page sur les grands écrans. Nous ajoutons donc une nouvelle rangée avec ion-row sous la première, avec un nouvel « ion-col » à l’intérieur et dans ce «ion-col», je souhaite intégrer une « ion-list ». Je vais donner à cette liste un ID « expenses-list » pour la liste de dépenses car nous souhaitons accéder à cette liste pour y restituer des éléments. Alors “ion-list” ici, est un élément fourni par Ionic, qui nous aide à structurer les données d’une liste, donc, structurer les éléments les uns en dessous des autres et les afficher comme une belle liste. Vous pouvez également ajouter d’autres fonctionnalités telles que des éléments de la liste. Donc dans « app.js », on veut avoir accès à cette liste de dépenses, donc on va faire « const expensesList = document.querySelector », cette liste est extraite avec le # en insérant le nom de notre ID. Donc on ajoute « (‘#expenses-list’); ». Nous pouvons maintenant utiliser cette référence pour ajouter de nouveaux éléments et nous souhaitons ajouter de nouveaux éléments ici, où la console enregistre actuellement le montant récemment saisi. Nous allons créer un nouvel élément avec l’option de création de documents, « const newItem = document.createElement(); », qui est une API DOM par défaut, qui n’a rien à voir avec Ionic et qui nous permet de créer de nouveaux éléments HTML. Ce qui est bien, c’est que ces components Web, ces éléments HTML personnalisés peuvent être créer simplement comme des éléments HTML normaux. Dans les parenthèses on peut insérer « ion-item », qui est le sélecteur ou l’étiquette fournie par Ionic pour cet élément de « ion item », s’avère être un élément qui peut être utilisé dans différentes situations. Il peut être utilisé également dans une « ion-list », pour envelopper tout le contenu d’un élément de liste unique qui devrait en principe être restitué de manière agréable. Donc dans le fichier JS, on va créer un nouvel élément « newItem.textContent =« enteredReason + ': €' + enteredAmount; ». Donc je définis un contenu textuel qui est égal à "entered Reason'' puis on concatène avec notre devise avec le symbole de l’euro, et on ajoute “enteredAmount” par la suite. Maintenant, je mets « expensesList » ci-dessous, et nous pouvons maintenant atteindre la liste des dépenses à laquelle vous avons accès ici « appendChild() » que nous utiliserons plus tard lorsque nous travaillerons avec Angular, mais je le fais ici avec JavaScript pour vous donner une introduction pour les éléments Ionic et rien d’autres. Donc on va ajouter un enfant qui sera “newItem” dans les parenthèses, vous pouvez sauvegarder cette progression. Donc je revois avec vous ici l’intégralité de notre code de ce que nous avons fait durant cette vidéo car j’ai effectué quelques petites erreurs, nous avons « const expensesList = document.querySelector('#expenses-list');” et en dessous, nous avons, “const newItem = document.createElement('ion-item’)»; et en dessous vous allez insérer “newItem.textContent=enteredReason»+ ' : € '+ « enteredAmount»;. Et en dessous on va lui demander d’afficher « expensesList.appendChild(newItem)»;. Et si on check notre appli en la rechargeant, lorsque je saisie un élément dans notre liste, donc par exemple « facture » de 10. On obtient nos données ci-dessous avec notre devise. Vous pouvez même appuyer plusieurs fois pour que cette dépense se multiplie. Voilà comment vous pouvez interagir avec des components Ionic dans votre code. Même si nous n’écrivons plus ce code ultérieurement, Angular le fera pour nous plus tard dans les coulisses. Il est donc extrêmement important de comprendre que Angular interagit avec les components Web, avec les components Ionic comme avec les éléments HTML normaux, il peut les restituer au DOM, etc. Ce n’est pas Angular qui compile ces components Web avec du code HTML et Javascript normal, pouvant être utilisé directement avec les API DOM. Cette vidéo touche à sa fin, je vous donne rendez vous pour la prochaine.