IONIC Section 4 - 4.14 Creating Ionic elements programmatically

Click here for more videos available on our youtube channel !

In this lesson we want to render a list of all entered expenses inside our Ionic card. We are still inside an ion-grid with rows and columns to control the width of elements, and we do not want the list to take the full width of the page on large screens. So we add a new ion-row below the first one, with an ion-col inside, and in that column we place an <ion-list> with the id expenses-list so we can access it from JavaScript and append new items to it. ion-list is an Ionic-provided element that structures items one below the other and renders them as a clean list, with extra features available for list items.

Creating ion-items from JavaScript

In app.js, we grab the list with a CSS selector and use the standard DOM API to create new items dynamically:

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

document.createElement is a default DOM API, not specific to Ionic. The interesting part is that Ionic web components like ion-item can be created exactly like normal HTML tags. ion-item is a versatile element that can be used in many situations, and is especially nice inside an ion-list where it wraps each row of content.

We set textContent on the new item, building a string from the entered reason, the euro sign and the entered amount, then we call appendChild on the list to add the item at the end. We will do similar things with Angular later, but here we do it in plain JavaScript as a first introduction to Ionic elements.

If we reload the app and type "invoice" with an amount of 10, the new row appears in the list with the correct currency formatting, and we can press the button several times to add multiple entries. This is how you interact with Ionic components directly: even when Angular takes over later and writes this code for us behind the scenes, it still treats web components like ion-item as regular HTML elements rendered to the DOM. Angular does not compile these web components — they are normal HTML and JavaScript that can be used directly via the DOM APIs. See you in the next video.

Summary

This lesson covers how to programmatically create Ionic elements, particularly ion-item and ion-list components, using JavaScript's DOM API. The example demonstrates building a dynamic expense list by using document.createElement() to instantiate Ionic components and appendChild() to insert them into the DOM. Understanding this concept is foundational because even though Angular later handles component rendering automatically, developers must grasp how JavaScript interacts with Ionic's web components at the DOM level.

Key points

  • Use document.createElement() to programmatically create Ionic elements like ion-item by passing the Ionic tag name (e.g., 'ion-item')
  • Reference DOM elements with querySelector() and element IDs to gain access for manipulation and appending children
  • Add custom content to Ionic elements by setting text content and using appendChild() to nest child elements
  • Ionic components are standard web components that can be created and manipulated like regular HTML elements using vanilla JavaScript APIs
  • Appending programmatically created elements to an ion-list automatically applies Ionic's styling and layout behavior
  • This manual approach provides insight into how Angular later automates component creation and DOM manipulation behind the scenes

FAQ

How do you create an Ionic element like ion-item in JavaScript?

Use document.createElement() with the Ionic tag name as a string, for example: const newItem = document.createElement('ion-item'). This creates the Ionic component as you would create any standard HTML element.

How do you add the created elements to an existing ion-list?

First reference the ion-list using document.querySelector() with its ID selector. Then use the appendChild() method on that list reference to add your newly created ion-item elements to the DOM.

Why is it important to understand programmatic element creation if Angular handles it automatically?

Understanding how to manually create and manipulate Ionic components at the JavaScript level gives developers insight into what Angular does behind the scenes, making them better equipped to debug issues and work with web components effectively.