IONIC Section 4 - 4.17 Using Controller Components

Click here for more videos available on our youtube channel !

Hello everyone, so we have this beautiful demo application in a form that we won't use anymore because for the rest of the course we will use Angular, but you will learn a lot about some of the basic Ionic components and, more importantly, where to find more information about these components and how to use them in general and take a look at this application, which is very visually pleasing, and with little work provides from our side. That's the power that Ionic gives while tweaking all those styles if you need to. And so we're going to move on to a component that works a little differently than the others and that will explain using Angular JavaScript instead of basic JavaScript. Let's say that when we enter data invalid, for example, we leave the fields empty and we click on “add expenses”. We wish display a small alert that warns the user that the entered value is invalid. Now, of course, we could throw an alert here, invalid values in our JS file, just above "return", for example “alert(‘Invalid values’); this is the built-in alert feature that every browser knows about. And if we go back to our application and reload, then we receive this default alert here. And if we take a closer look at our documentation, in the components category, more precisely that of "Aaert". Inside you will find some instructions on the use of alert for example, whether for Javascript or Angular. But as you'll find out with Angular, which is much more convenient, let's focus on JavaScript styling for now. To launch such an alert, first in our "ion-app", for example just before the closing tag, we must add our alert so "ion-alert" Now if you add this element, you will not see any change on your screen, because it is an invisible element, because it does not add no visual functionality. Now to use it we need to have access to the controller in our JS file, we will add a new constant, “const alert”, and we will use the method “document.createElement(‘ion-alert’); », because even if we don't see anything on the screen, it is of course a normal web component, just a component that doesn't render anything, it just adds JavaScript functionality behind the scenes. With access to this component, we can tap into this JavaScript functionality. So with our alert here, where we do our validation, just above “return”, we enter “document.body.appendChild(alert); ". This is a method provided by our component, and you can learn more in the documentation. Besides a message, we can also add an entries header invalid and we can also add a button array that allows us to label which buttons show up and which closes the alert. Which gives us: “{alert.header = 'Invalid values!'; alert.message=”. Please enter a valid reason and amount "; alert.buttons = ['OK'];} But if we save all this, you will not see anything because it is not displayed automatically. To do this, you must insert in the return “return alert.present();” so on this alert element we have applied the “present” method, to present it on the screen. So now with this added code, if we go back to our application and refresh it, and click on the buttons directly without entering any text in the fields, we see this alert here with a design suitable for the big screen. And if I push my curiosity, and I set to the iPhone format, we get an alert style compatible with a mobile version. This video is coming to an end, I invite you to watch the next one.