Ionic 4: todo App + firebase

16 Alert Controller Building Mobile Apps with Ionic 4 Video

in this video we are going to learn about the alert controller an alert is just a dialog that presents user with some information or it is used to

collect information from the user using input fields alert like all other overly components also appears on top of the apps content and it also requires that the user dismisses the alert if they

want to continue interacting with the application as long as the alert is displayed the user is not able to interact with the rest of the application and to display an alert we

use the alert controller so here we are inside Visual Studio code where we left off in the last video and the first thing we'll do is create a third button in our application which we will use to

invoke a function that will in turn display an alert to the user so here I have created a new button and I changed the text on the button to click me for alert and I'll also change

the name of the function to which the click event of this button is bound so I'll change the name of the function to show alert let's save that and just like that we

get this new button in our application next we need to go to our home dot page dot ts file and create this new function so just as we created the show loading and show toast functions we will be

creating the show alert function now that we have created the show alert function we need to bring in the alert controller so step one will import that controller

from at ioniq slash angular package step two would be to inject the alert controller into this class by passing it as a parameter to our constructor I'll name the instance as alert ctrl

however you can name it whatever you want and this is going to be of the type alert controller so now that we have the alert ctrl object we can use it to display an alert to the user let's start

with the basic alert to do that we will type in this dot alert controller dot create and the create function here takes in a JSON object and this JSON object can contain key value pairs that

define the content and behavior of the alert controller so before we start defining the properties inside the create function let's make the show alert function asynchronous and we'll

store the return value of the create function inside an object called alert and we'll use the await keyword because the create function returns a promise finally we'll use the alert not present

function to display this alert to the user now we can go ahead and define all the properties for this alert controller the first property that you can pass in is the header and header requires a

string that is displayed on the top of the alert the font size of the header as you would expect is larger than anything on your alert so let's go ahead and type in something like are you sure

and the second property is going to be sub-header this is also a string and the font size will be smaller than that of the header so let's word and type in some text here and then we are going to

pass in a property called message which is supposed to contain longer strings so if you have a message that you want to display to the user you can pass that in to the message property

I have passed in a long string to the message property next we'll be passing in a property called buttons and the buttons property defines all the buttons that you want to

have in your alert the buttons property takes in an array and each object inside this array defines one of the buttons of your alert so inside this array will pass in a JSON object and the first

property that I am going to define for the first button is the text so I'll just go ahead and type in the text cancel and the second property that you can

pass in for a button is the handler and this is a function that is executed when this button is tabbed so that completes our first button and I'll put in a comma inside the array and

define the second button which is again going to be a JSON object on this button is well I'll define the text and the text is going to be delete and I'll also define a handler for this second button

as well and this will be executed when the user taps on the delete button so now that we have a header sub header message and two buttons we can go ahead and test this out so let's save the file

and let's click on the third button inside our application to display the alert and you can see that I get this beautiful alert which has the header are you sure and below that we have the sub

header followed by the message I have two buttons cancel and delete and you can click on either of the buttons to dismiss this alert if you tap on the cancel button the handler for the cancel

button will be executed and if you tap on the delete button the handler for the delete button will be executed so now that you know how you can create an alert with buttons let's learn how

you can add input fields to this alert so right after the message property here I will go ahead and define a property called inputs which is again going to be an array and each object inside this

array will define one of the inputs for your alert so I'll just go ahead and define the first one the first property is going to be name and you have to pass in a name if you want to retrieve the

value of this input field in one of your buttons handlers so let's give this first input field a name and let's give it a name called user name the second property that we are going to define for

this input field is going to be type and here you can see that you have so many options for the type of the input that you can have for now I am just going to have a simple text input so the type

will contain the value text I'll also define a placeholder value and the placeholder text will be displayed inside the input field when the user has not entered anything in that input

so let's go ahead and type in something here and just like we have defined this first input field I'll just go ahead and copy that and define my second input field in

this case the name is going to be email the type is also going to be email and the placeholder value is also going to be something like that let's save that and see how our alert looks like

now I'll go ahead and click on the third button to display the alert and you can see that along with the header sub header and message and the buttons that we previously had we now have two input

fields and the first input field displays the placeholder value which is what we have defined here and so does the second input field let's go ahead and enter some value inside these fields

and click on delete and the alert dismisses so we are able to add input fields to our alert but before concluding this lesson let's understand how we can get the values that the user

has entered in these input fields to do that you will have to use your handler functions that you have on your buttons so let's say that if the user taps on cancel we don't want to do anything but

if the user taps on the delete button we need the values of these username and email fields to do that all you have to do is just pass in a parameter to your handler function and for now we'll just

log it to the console and this object that you have passed in as a parameter to your handler function will contain the value of both these input fields keep in mind that you have to define a

name for your input field if you want to retrieve its value in one of your handler functions if you have not defined the name you will not be able to get its value inside the parameter in

your handler function so now let's go ahead and check this out I'll open the alert and I'll enter some text inside this alert and before I hit the delete button I'll open the console in my

browser so I'll open the chrome options select more tools and click on developer tools and here you can see that I have the browser's console opened I'll click on this button to clear the console and

now I don't have anything inside my console now I will just go ahead and tap on the delete button and see if I get some logs inside this console and you can see that as I tabbed on the

delete button I get a JSON object logged to the console which contains a property called email which is equal to the value of the email text that we entered inside our alert and similarly we have a

username that also contains the text that we entered in the input field for the username and that's how the alert works you can have all kinds of input fields and for dates and numbers you can

also set the minimum and maximum value using the min and Max properties feel free to play around with different types of input fields and buttons in your alerts so now that you know how you can

create and display alerts in your application in the next video we learn how we can create new pages and implement navigation within an ionic application