Ionic 4: todo App + firebase

15 Toast Controller Building Mobile Apps with Ionic 4 Video

in this video we are going to learn how we can use toast controller in ironing a toast controller is used to display a toast notification to the user at the

bottom or at the top of the screen this notification is ideally a small piece of information that the application gives to the user in the screenshot here you can see how a toast notification looks

like on iOS to display a toast notification we use toast controllers and a toast component is just a certain notification that appears on top of an app's component it

can be used to display short messages to the user so now that we know what are those notifications let's learn how we can use the toast controller to display those notifications within our ionic

application so here we are back inside Visual Studio code and the first thing I'll do is create another button inside my application to display the toast

notification I changed the name of the function that is called when this button is clicked and let's call this function as show toast and I'll also change the text on

the button and there we have the new button next we just need to go ahead and create the show toast function inside our TS file so in here just after the show loading

function I'll just go ahead and create the show toast function and just like we had to import the loading controller from at ioniq slash angular package we will also have to

import the toast controller from the same package so all you have to do is just go ahead and type in toast controller within the same import statement next we have to

inject it into our constructor so inside the constructor where we are passing in the loading controller we have to put in a comma and we can go ahead and type in toast ctrl put in a colon and pass in

the toast controller as its type so far everything looks good now inside the show toast function we can go ahead and use the toast ctrl object to display the toast notification so I'll just go ahead

and type in this dot toast ctrl dot create and just like the create function for the loading controller the create function of loading controller also expects a JSON object with a number of

values and the first value that we will pass in inside this JSON object is the message and the message contains the text that is displayed on this toast notification

so let's go ahead and type in a random message I'll put in a comma and I'll also pass in the duration so I want this toast notification to be dismissed automatically after 5 seconds or five

thousand milliseconds since the create function here also returns a promise we can either choose to use the den function or we can evade this statement and make the show toast

function asynchronous just like how we did with the show loading function I'll use the second path and I'll make the short host function asynchronous and here I just get a reference using the

await keyword now I can use the toast object to present this toast to the user and to do that I just have to call the present function on the toast object here let's save that

and now we can go ahead and click on the second button and see how the notification looks like as I click on the button you can see that we have this notification at the

bottom and it disappears after five seconds along with the message and duration you can also pass in a color and by default the color of the notification was light but you can pass

in any of the available colors in ionic so you can pass in primary secondary tertiary and here I'll be passing in dark because the dark notification really pops out another parameter that

you can pass in is show close button which either takes in the value true or false if you pass in true here a close button will be displayed on the notification which will allow you to

dismiss the notification manually with the value true set for show close button you can also pass in close button text that takes in a string and this is the string that will be displayed on the

close button in your notification the last parameter that you can pass in is position and the value of position can either be top bottom or middle the default value is bottom but you can also

display your notification on the top or in the middle it is recommended that you display your notifications on the bottom let's save that let's see how all these properties

change how the notification looks like I'll go ahead and click on this button and I get this notification which is dark in color and has the button text closed and if I click on this button the

notification is dismissed and that's how you can use toast controller to display toast notifications in your ionic applications in the next video we are going to learn how we can display alerts

and prompts in our application using the alert controller