IONIC Section 4 - 4.17 Using Controller Components
Click here for more videos available on our youtube channel !We now have a nice demo expense application in plain JavaScript. We are not going to keep using that style for the rest of the course because we will switch to Angular, but it was a great way to learn the basic Ionic components and, more importantly, to know where to find information about them and how to use them in general. The result is visually pleasing with very little effort on our side — that is the power Ionic gives you.
We will now look at a component that works a bit differently from the others, which is a good opportunity to introduce the controller pattern that Ionic offers. Imagine that when the user submits invalid data, for example leaves the fields empty and clicks "Add expense", we want to show a small alert telling them the entered values are invalid. The simplest option would be a native browser alert just above return: alert('Invalid values'). It works, but it looks like a generic browser dialog.
Using the ion-alert controller
Ionic provides its own ion-alert component. In the documentation, in the components category, the Alert page shows how to use it both in plain JavaScript and in Angular. We focus on the JavaScript style. First, just before the closing </ion-app> tag, we add an <ion-alert> element. You will not see anything new on screen because the alert is an invisible controller component that only adds JavaScript functionality behind the scenes.
In app.js, in the validation block, we create the alert programmatically and configure it:
const alert = document.createElement('ion-alert');
alert.header = 'Invalid values!';
alert.message = 'Please enter a valid reason and amount.';
alert.buttons = ['Okay'];
document.body.appendChild(alert);
return alert.present();We use document.createElement('ion-alert') because ion-alert is a regular web component. We set header, message and a buttons array that labels the actions, append the element to the document body, and finally call alert.present() to actually display it on screen — without that call, nothing appears.
Once saved, if we refresh the app and click the add button without entering any text, the styled Ionic alert appears, with a design suited to large screens. Switching the browser to an iPhone viewport, the same alert automatically adapts to a mobile-friendly style. See you in the next video.
Summary
This lesson introduces Ionic's Alert Controller component as a superior alternative to the browser's default alert() function for handling form validation. The instructor demonstrates how to access the alert component using querySelector, configure it with headers, messages, and buttons, then display it using the present() method. The Alert component automatically adapts its styling for both desktop and mobile devices, providing a professional user experience while maintaining Ionic's integrated design system.
Key points
- Ionic's Alert component is an invisible DOM element that requires JavaScript access via querySelector() to activate and configure
- Configure alerts with properties including header, message, and a buttons array that allows users to interact with the alert
- Call the present() method on the alert object to display it on screen after configuration
- The Alert Controller integrates seamlessly with Angular and Ionic, unlike the basic browser alert() function
- Ionic alert styling automatically adapts for different screen sizes and device types (desktop, tablet, mobile)
- Use alert validation to prevent users from submitting forms with empty or invalid fields
FAQ
Why use Ionic's Alert component instead of JavaScript's alert() function?
Ionic's Alert component provides better customization (headers, buttons, messages), professional styling that matches the Ionic design system, and seamless integration with Angular. The browser's default alert() function is less flexible and less visually cohesive with modern Ionic applications.
How do you access and display an Ionic alert in JavaScript?
Use document.querySelector() to get a reference to the alert element, configure its properties (header, message, buttons), then call the present() method to display it on screen.
What are the main properties you can configure on an Ionic Alert component?
You can configure the header (title), message (main content), and buttons array (to label and style the buttons). The component automatically handles layout and styling across different device sizes.