How to Use Ionic Controllers in Ionic 5


In this video, we’re going to take a look at the new way to use Ionic’s controllers in Ionic 5. This specifically applies to just JavaScript or StencilJS. If you’re using Angular, it’ll be the same as it was before, same with React as well. Basically, I’m talking about the way you use the controllers like the alert controller, modal controller, toast controller, the controllers that kind of create dialogues on the screen. The way in which you use those in Ionic 5 if using StencilJS or just plain JavaScript that has changed and it is a change that makes things a lot nicer in my opinion.

0:43 I will quickly recap how it worked before. If you’re familiar with that if you’re not then you don’t really need to worry about it. What we would do before to access the controllers since everything is sort of used through the web components that Ionic provides, we would actually say in the app root file - doesn’t have to be in here but it’s just a good place to put it - we would put something like the ion-modal-controller so it actually has to sort of physically create that web component in our application. Then from another file, we would use a query selector to grab a reference to the modal controller, and then we could use the methods that it provides like the create method for creating modal’s. We don’t need that anymore so we can just delete that completely.

1:32 What Ionic does now is it allows you just to import it as a module. The controllers can be imported as a module. What that means is that we can just say import and then whatever control that we want to use so say alert controller, for example, and we’ll import that from @ionic/core. We could also import as a modal controller, toast controller, and so on if we wanted to but we’ll just use alert controller as an example.

import { alertController } from "@ionic/core";

2:03 What I’m going to do basically in this little demo application I have here let’s is a little Show Alert button. I just want to click that and have that launch an alert. I’ve got a button the calls and inside of here, we’re just going to use the new method using the controllers. We’re going to make that an async function since we’re going to wait for this alert to be created but the general syntax is exactly the same as before. It’s just that rather than having to get a reference to the alert controller from that actual web component element in our application now we just use the imported controller so that would look something like this:

const alert = await alertController.create()

and then we supply our configuration options to that. If you're not familiar with those you can see them in the [Ionic Documentation]( for the ion-alert component but we just have stuff like header, message, buttons, and so on. Once we have our alert created, we can just call `alert.present` and that will display the alert for us. 

async showAlert() {
	const alert = await alertController.create ({
		header: 'Alert',
		subheader: 'Subtitle',
		message: 'This is an alert message.',
		buttons: ['Ok']

3:24 Let’s just quickly check that all that works. Jump into the browser, click Show Alert and you can see that our alert has popped up on the screen. It’s going to be the same no matter what controller you are using. If it is a toast controller it’s going to be the same format we just await the controller and use its create method or whatever method we need to use. Then we just use it the same as we were before we just don’t need to do anything, like before we’d have to do something like: const modalController = document.querySelector and so on to grab that reference. We don’t need that anymore we just need to import it from @ionic/core.

4:04 I’ll just reiterate one more time this is just for StencilJS or for plain JavaScript. If you’re using Angular, for example, you would just import the alert controller from the @ionic/angular library instead.

4:19 I hope you enjoyed this video if you did do feel free to leave a like and subscribe and see you in the next video.

Check out my latest videos: