IONIC Section 4 - 4.14 Creating Ionic elements programmatically

Click here for more videos available on our youtube channel !

Hello everyone, now in our "ion-card" we want to make a list of all our expenses. We must keep in mind that we are in the "ion-grid" with our rows and columns to control the width of our elements in this grid. The width of the list we want to render must also be controlled, it should not take up the full width of the page on large screens. We therefore add a new row with ion-row under the first one, with a new “ion-col” inside and in this “ion-col”, I want to integrate an “ion-list”. I will give this list an ID "expenses-list" for the list of expenses because we want to access this list to restore elements to it. So “ion-list” here, is a provided element by Ionic, which helps us structure the data of a list, therefore, structure the elements one below the other and display them as a nice list. You can also add other features such as elements from the listing. So in “app.js”, we want to have access to this list of expenses, so we will do “const expensesList = document.querySelector”, this list is extracted with the # inserting the name of our ID. So we add “(‘#expenses-list’); ". We can now use this reference to add new stuff and we want to add new stuff here, where the console currently saves the amount recently entered. We will create a new item with the document creation option, “const newItem = document.createElement(); », which is a default DOM API, which has nothing to do with Ionic and which allows us to create new HTML elements. What is good is that these Web components, these custom HTML elements can be created just like normal HTML elements. In the parentheses you can insert "ion-item", which is the selector or label provided by Ionic for this item of "ion item", turns out to be an element that can be used in different situations. It can also be used in an ion-list, to wrap all the contents of a single list item that should in principle be rendered pleasantly. So in the JS file, we will create a new element “newItem.textContent = “enteredReason + ': €' + enteredAmount; ". So I define a textual content which is equal to "entered Reason'' then we concatenate with our currency with the euro symbol, and we add “enteredAmount” afterwards. Now I put “expensesList” below, and we can now reach the list of expenses you have access to here "appendChild()" which we will use later when working with Angular, but I'm doing it here with JavaScript to give you an introduction for Ionic elements and nothing else. So we are going to add a child which will be “newItem” in the parentheses, you can save this progress. So I review with you here all of our code of what we did during this video because I made some small errors, we have “const expensesList = document.querySelector('#expenses-list');” and below we have, “const newItem = document.createElement('ion-item')”; and below you will insert “newItem.textContent=enteredReason”+':€'+“enteredAmount”. And below we will ask it to display "expensesList.appendChild(newItem)". And if we check our app by reloading it, when I enter a element in our list, so for example "invoice" of 10. We obtain our data below with our currency. You can even press multiple times for this expense to multiply. This is how you can interact with Ionic components in your code. Even though we no longer write this code later, Angular will do it for us later behind the scenes. It is therefore extremely important to understand that Angular interacts with web components, with Ionic components as with normal HTML elements, it can render them to the DOM, etc. It's not Angular that compiles these web components with normal HTML and JavaScript code, which can be used directly with DOM APIs. This video is coming to an end, I'll give you an appointment for the next one.