ionic framework 5 crash course for angular developers - Mobile App Development

everybody this is waste back with another video on ionic framework now this is going to be the crash course of ionic framework version 5 because recently they bring out a new version version 5 which has some new UI components adjusters a brand new animation API in new icons colors and teaming also it has an official support for react so I'm gonna do a crash course for angular developers so this is going to follow angular as a framework and also we're gonna take a look at a new UI components available in ionic version 5 video I will show you how you can use capacitor with ionic we're gonna take a look at couple of plugins from Cordova with ionic and native wrapper and capacitor plug-in as well so this is going to be a QuickStart guide for angular developers with a latest version of ionic and latest version of angular so I'm really excited to present you days it's a bit long with you about two hours but sick run you're gonna get a lot out of it if you just want to quickly start with ionic version 5 and you already familiar with angular framework you know if you do like the video please give this video a thumbs up and subscribe to the channel and if you think this video helped you and if you want to help me out there's a PayPal link in the description of this video to donate attention this is a crash course so we're not gonna cover every single UI component but we're gonna learn how to use and how to explore the documentation and find more about the UI components how to use them how to customize them but let's just say that you want to know some particular UI component that hasn't been covered in this video I would highly recommend to go through this playlist this is built on ionic 4 but things are pretty similar as long as the angular is concerned so you find a lot of things in this series I've covered everything in details and you will find some UI components being discussed here as well also I have a web projects basically built in pure JavaScript in typescript there's a playlist for that as well so have a look at that I've done a lot of JavaScript based tutorials and one of the most important ionics playlists that I've done recently it's a complete mobile application development project based workshop using ionic version 5 so there's about 17 20 videos that I would highly recommend go through these series I have started from a fresh project and took that fresh project to complete app so I would highly recommend go through this series if you are not sure what is angular and how to use angular with ionic framework I would highly recommend check out my course on udemy which is a complete essential guide for angular so this will cover everything you need to know to be able to use angular with ionic I'll drop a link for this into the description of this video also there are some good udemy courses for JavaScript that have done check out my udemy profile and you'll know what courses have done okay so let's get started with ionic framework 5 crash course ok so now we're gonna start by looking at documentation an ephemeral flash dog stick documentation for ionic you're gonna make sure that is like angular because this course I'm gonna be used angular and if you're not sure about angular here is a angular the IO slide thoughts where you can learn angular or you can also take a look at my udemy course I'll drop a link for this course in the description of this video and if you're interested in learning English let's check it out anyway so let's go back to any framework tops so we're gonna be using any framework is a hue toolkit we're gonna need to pass her which is the native bridge for cross-platform web apps also gonna need angular which basically is a framework we're gonna be using the build Bionic application so if your windows on an act open man formed on windows and open terminal on Mac so here I like to first of all make sure that I or Jessie's fault only I've got this no Jess is all troll point and be good to old guests are odd you can download but is the latest version so make sure you have a latest version install next we're gonna have to install couple things that just move I man from aside critical to environment setup and into market set up we need note an NPN and then pin get installed automatically with node oh that's fine you need to have a get Fela developer any big net developer will have a kit installed it is a version control system that is this is basically our highly recommended but it's something that you as a developer and we need to install a CLI so first thing you need to install incl a whatever - is NPN - I next - CLI is going to install an Xterra for me and then I can basically get a new project using ionic CLI if you want to create a project with capacitor we're gonna be a time tag but let's let's just let this finish and then once we have that then I'll show you how you can install acid or verbally as well also you have angular CLI installed yeah lie dodging AIDS and a goat copy and then I'm going to ace that bit there as well once we've bought COI since all go ahead and install capacitor let's click on dogs and I'm gonna click on installation and here is a in pigs Astro CLI okay that's what you need capacitor see a lot install that by using let's the pastes here for angle limit I have been Paul - at ala / CLI it's going to install the latest angular CLI which will basically be used within anak and here we got endpoint 1.7 that's good let's go and install a capacitor sold impedance all that babe now this bait is actually something that we can I need to do that for us on this issue I think here we have ionic start my out clubs here we can stay - - I set up actually critical path short project so what I'm gonna do is we're gonna create a new project using capacitor and ionic and then we're gonna start looking at all of the UI components provided by an ionic 5 okay so environment is set up now we got a node.js install we got angular Co install ionic CLI install also we're gonna be using an easy way to create our capacitor project I'm going to be creating a new ironing project using capacitor as its type now if I click on these packages and CDN here we have some information before we can create a project we need to talk about it so basically we have a project all ionic plus angular so it says when using ionic framework in an angular project install this ionic angular package from NPM this comes with all the ionic framework components and angular specific services and features but this will make it easy for us to actually use angular in ionic also you can do this with ng add ionic angular which will automatically set up your angular project to ionic and we have an official support for react I'm not really a big fan of ionic + react because react is something that he used with react native react has its own cross-platform app framework which will be is really good yep also we have some ionic on CD ends which you can use to add icons to your project so yeah we're going to be using this package ionic + angular so I'm going to go to starting here it says starting a new app is incredibly simple from Tomorrowland run this command so if we'd say ionic start okay I'd say is non-interactive duty okay we can't just do the ionic start we need to type our application name and then its type so we're gonna be using ionic but and I'm going to name my application as ionic tutorial and whenever using a blank template I'm gonna type - - the path sitter let's enter and it's going to prepare the project for me and one thing to notice here it's installing at this NPN dot CMD I and it's actually installing capacitor code for me okay and also instance Foley this capacitor C Allah as well there are four informations that we can add a platform by use the increase cap add Android iris and electron project as well that's good I will wait for this to finish the installation and then we're gonna open that into my favorite IDE which is a bit strong I know a lot of people will say it that's not really one of the best but I would debate because I think reps from is the best IDE for any kind of JavaScript development or angular or any Coria okay so a project is open I'm going to open web strong and FF strong we'll have our project open so here a second I'll get this project up and running in web strong okay so our project is open in Webster on let's explore packaged adjacent first though in package that JSON we have some dependencies we got angular common package using angular nine point one point six Inglot core and also we should be seeing a capacitor C Ally and capacitor core package here okay but we're using the latest version of capacitor which is capacitor 2 and we have rxjs which can be used in angular yeah things looking good we're gonna have to modify a few things in our project down the road to make sure that we have nothing coming from Ghidorah okay so I'm gonna change the description here let's say ionic played course project right above I'm going to get lived out there as well okay so a project is looking good I'm gonna open a built-in terminal in Webb swamp and I'm gonna type a command ionic build it's going to use this build script from a script tag and it's going to run this ng bill at the end of the day it is angular project and you are a kid is used as ionic now we have our project getting built for the first time once done then we will run this project in the browser ideally we're going to be running this into Android studio and a letter so yeah I'll just wait for this to finish so project is built now we can use ionic serve map to run that in the browser we're gonna go through our some of the API is that are provided in ionic later and also going to be looking at some CLI commands there you go so we have our ionic project running now in the Chrome browser you can make it look like it's running on a Pacific platform if I click on this button after going to the developer tools in chrome it's going to give me an option if I want to choose iPhone or Android which is like a pixel through here and I can choose the iPhone one I'm going to move this to the right okay and I would like to look at our code side-by-side okay I like to look at the code here but and then I want to see the app there as well so we know how we can run our application in the browser now as you can see it's a black template is being used so let's take a look at how we run our application in emulator I'm gonna windows so we'll only be able to use Android emulator so I'm going to go to the terminal and stop the server I'm going to type here a command I only cap ad Android okay now it's going to download the project Android on capacitor and it can add that here you see another folder appearing which will be like our Android project which we can open in Android studio if we go to the documentation and I'm going to take you to some of the commands that are available here for example we have a capacitor section here we go this capacitor ad now I can use this kinda capacitor ad and then you can use iOS Android or electron okay I used Android and I can also used electron if I wanna create an electron project there as well now in the short form you can use just a cap instead of any capacitor the full world is not required so now we have our android project here actually what we need to do is we need to use this command a bachelorís sink about so what it does it will actually perform ionic build and it will copy the web assets to capacitor native project it will update the native project in dependencies and it will install any discover the capacitor or to look for Dover plugins okay so got some options as well saying no builds which will be ignored ionic built a prod which will be used as a you know production and figuration will be used we got some advanced option like we're not going to talk about the East Bay anyways okay so that's the command that we never using we'll come back to this in a bit now here I'm going to do ionic sync and dryer now it's going to make a project again then to compile it then it's going to update our native Android project I'm going to open this new terminal here okay like to show you how you can set up Android studio with old SDKs and emulator but that would take up of time instead I would like to I would like you to take a look at one of my video I got comp I can those or something like Bionic and anak project shut up a typo is Musa and yep here is the video that I quitted like three months ago this is how to setup Android project from unique framework I would like you to have a look at this video and this will teach you how you can set up your Android studio with ionic it's it's it's about 17 minutes this will help you to set up your Android studio stuff so I'm not going to go through the speed again okay let's go back to the web phone here I'm going to take a look at if this is built like a dad's build now I'm going to use this command NPN but npx cap run and right ok this command is not gonna work because we have an installed capacity or CLI globally so for that we're gonna use any cap run and right before I press ENTER I want to show you the same command in documentation so if I go to a little session here we have a capacitor run command you can do ionic capacitor run and then you can specify your platform whether it's a Android or iOS this live reload flag is amazing it will basically run your application in an emulator it will automatically link that application to your development server and any change you make it will basically update the app as well so that is really really good so first of all let's just do I need cap run Android it's just going to try opening ended strudy now but in the project and we should see our app of running well let's wait for this to finish you okay so our project is actually built and we can see the end of studio automatically open now usually you're gonna get an error when you have an Android studio not installed properly so what are we gonna do is we're gonna go to this the best thing actually is a capacitor config you want to make sure that we have a defined a part for Android studio if you want that to open automatically or you can go to Android studio and open the project manually okay and here I'm going to use this pixel 3a and I'm going to click on this play button once I do that it's going to start processing it's going to open the emulator for me okay and once the project is build its going to open that into the emulator they go the new project is open now I I was actually showing you guys are the screen and that's why probably you missed some information now I'm gonna put this here okay and instead of like using a browser I'm just gonna use the emulator which is it is ideal okay because we are actually building an application for mobile not for the browser but you could actually run your application in the browser as well and start building the UI part of it and then worry about the native later okay so here we got this thing running now I wanna make sure that whenever I make a change so we're gonna go to source folder I've folder and I'm going to go to app component and then get home and here like to say made a change let's save the file now as you can see it's not updating your analytic so what we need to do here is we're gonna go back to Android studio we are going to go to weather build for app shut out we have a project set up properly so here it says I on ionic started let's not worry about that for now but what I want to show you here is a capacitor configuration this one okay it's not populated the way I wanted to populate so what I'm going to do is go back to the project let's stop the server and I'm going to use a CLI command which will basically a build a project to auto reload for us so when you finally cap run Android - - live reload - - external anyway I press ENTER and the same command is available here I say I need capacitor run Android this is where the liability and here you could define external or you could specify the actual path as well now in web strong it's asking me which basically which I appear wanna use so I'm using two IP so I'm gonna select the second one which is going to be one nine two one six eight dot one dot one red two and we just wait for this to finish and then we are going to install application again and you will see the application will auto reload when you have a server running let's open Android studio yep slot application and I'm going to go to build Wayne build click on rebuild project cradle is working hard to build this project for us let's just wait for that to finish and then I'm gonna type here why one main thing that you will notice in your config file now for the capacity kitty quickly I'm gonna show you this is using the server now if we go capacitor config now you'll see a server which is pointing to this rate and that's the same server that is running in our are you nuts Timmy l if I go to home page and I say controlled said save you see it will automatically reload at this stage we have all the things set up for us we have a blank template which is looking good we have our emulator running and now we can continue exploring ionic components before we start our journey with ionic framework we're gonna understand some basic concept in ionic framework so let's just say I have a mobile and I will open an application what do I see I see a uie where I could tap a button I have a card I have some alerts and notification apps and select boxes I have some models so all of these are actually if you I part of your application and then when you click on the button there is a code which runs and does its logic but also the third thing that we need to understand in a mobile application development is the native API for example here is my iPhone right now let's just say if I want to use a GPS sensor built into iphone how do I use that so that's like a native API available for using GPS if you want to take a picture from this camera you can use a native API so ionic framework has three things one it's a UI library itself so all of these nice components for example the card a checkbox cheap you know all these cards and list all our UI part of ionic framework now it has a representation of Android and iOS here but you see we have a UI components and then we have this native functionality so native functionality is something I still read this sentence so build a native powered experience with a collection of open source and premium plugins and integration that makes it easy to add a native device functionality to any ionic app with capacitor or with Cordova so let me explain now you're done the URI pod you have few buttons you want to click on that button and take a picture from your mobile camera so first thing you need to design that button which will be your UI code and then the second thing would be some sort of framework or language that will act on your button event in this case we have angular framework now the third thing is an API available to you for a camera now we do that by accessing need EAP is provided by ionic wrapper and in the background ionic uses capacitor or Cordova if I click on the documentation here you see capacitor link okay click on that it will open up a new page and here we have capacitor which is really a built by Arnie team and also works great with ionic framework we're gonna be using capacitor but also you can mix and match capacitor with córdoba córdoba is the old project it provides a native bridge as well now hope we understand what we're talking about here so one is a UI part of your application second is your angular framework which is like a untyped script framework which helps you to build things in terms of you are in your logic nicely and easily it it gives you a lot of things out of the box so but ionic is compatible with react plain Java suite view and angular's we're gonna use angular because it has the strongest support in ionic framework I'm going to take you back to a framework itself now here in the documentation we have a guide section it talks about angular react view and using plain JavaScript we have components which is a list of a components you can use out of the box when you use ionic as your UI library so it says only apps are made of high-level building blocks called components which allow you to quickly construct UI for your application so pretty much all the application have some sort of visual and iOS has a different look than Android this framework is a cross-platform so if you're running your application on Android it will have an Android based feel if you all know iOS it will have an iOS field so let's take a look at the first one action sheet okay so here if I click on this show button you see this is the action sheet native look in IRS if I click on an ant or ident click on action sheet this is how your native action sheet looks on Android 2 ad see these things is automatically handled now here we have a list of components that we can use now prerequisite for this course is you need to understand angular and angular allows you to create reusable components this is what's happening here when you use ionic with angular all of these components are basically angular components which are ready to use and they're really good they actually provide everything I'll never come across something which is not available here and I had to create a custom UI for it so ionic is is a really great library for building UI for your application now let's just say we created this action sheet if I click on that and I bring up with this options delete share now what happens when I click on the play button it has to do something right so that's a programming language and in this case we are using angular with with typescript typescript is a programming language angular is a framework which makes it easy to do things like we're using angular and all of these components are pre-built within angular for you to use we have a CLI command line interface so when you are a developer you know what CLI is right so ionic word to see a live which helps you to generate projects and generate ionic angular components services it gives you a lot more than just you know having play with angular so here's a list of commands that you can use you have commands like capacitor add special copy open we'll go through these commands later but here a list of the commands that we can use to mostly the command that we're going to be using is going to ionic serve which is this one okay so basically it starts a local development server for your app development and testing all you have to do is just hop on except reading your ionic project and you will have your project I'm right there are some flags that you could use like external if you want to allow this to serve on your local network so anybody can see that you can do that as well so we will talk about this now talking about CLI now and there we have native okay so here is a list of native API is available now you can see here for example if you want to use the camera I'm gonna go to see section here's a camera so it says camera take a photo or capture of video and it says required could have a plugin for more refreshment please discard of a plug-in ducts now if you look at the installation section ionic is really good when coming to compatibility with Cordova and capacitor now anything with salt is recommended to use capacitor as your compiler for a project but you can also use code or plugins which is really nice if you look at installation section here you see we have an installation guide for Cordova and we have also installation guide for capacitor and it's the enterprise equate plug-in available as well which basically gives you a lot more than you get from this open source plugins you know you can use capacitor or Cordova depending on how you're going to build your projects if using capacitor as the compiler of your project then please use capacitor okay here's a guide for that now using this plugin is the same thing but it's just more like installing when you have a capacitor base for the Cordova base product don't do curl it up anymore that's not really good idea to go with khludova once we have a capacitor okay so here's a list of native API is for example call directly call logs whole number okay so call number directed from Cordoba lending application the I have simulator do not draw access to phone subsystem okay that's fine so here's a vast list of native plugins that are available now we're going to be looking at some of the plugins available in capacitor as well to the matific capacitor here is a list of API is that capacitor provides and this is really good because it's it's most like it's like a native code that you can go and you know modify as well so use the pasture plane as much as you can if something is not built yet and you're not sure about the native code of Android and iOS then you're okay to use further abased plugins but to me all the basic functionality like a GPS a browser camera clipper console device file system you got network permission a push notification or sharing options or basically available in capacitors so you don't really have you know much to look for it's available here older basic plugins available in capacitor so that was the overview of our you know things available in ionic framework and I hope it gives you an idea what ionic is so UI angular has a library or framework sorry and then you have a native page which is capacitor or Cordova both works alongside so you can install academic project Java plugins within capacitor okay so let's start over gently by looking at some of the UI components now now let's try a couple of components before we move to creating some layouts in our ionic application so I'm going to use button first so let's go to the documentation for button so here you can see I on a button this is what we need to be able to create ionic button and here you can see an example how it's gonna look like an iOS and Android example is available here as well so ionic automatically handles the styling depending on a platform that is running so we don't have to worry about that but also we can specifically specify that we want to target iOS or Android now we will have the discussion later now we got some API here for example we can use these attributes expand attribute we have two options block or full you have a fill which basically an attribute which holds the background and the border color of the button okay if you take a look at this documentation it's pretty much you know straightforward we have a size that we can define we also have a usage right now if you notice we are looking at the react or we know using react in our ionic app so we use the angular we're gonna click on Handler and now we get an examples according to angular and here is a default button there's a lot of other examples as well for example here we're defining a secondary color we have a shape set around we have you know expand set to full okay so now let's go and copy let's just say this one okay when a cop it is let's go to web strong and here I'm going to paste that button there I'm going to save a server is a running it should update our emulator automatically so we're gonna go and open emulator now there you go we have a button there now I click on that doesn't do anything because we haven't wrote any code but here you can see we have the button let's try some API so we go back to the browser and we can see we have expand to full or block I hear it says block will basically have full width button with rounded corners full with button with the square corners and no border at the left-hand bottom let's try that I'm going to go and go into the talent we just zoom in a bit and I'm gonna use expand webstaurant is really really good because it gives you suggestion what are the attributes available what API is available but I unbutton so it's really helpful I'm going to type before now in emulator you can see by defining this full we have a full width of the button which is looking good now I can change the text of the button I'll just say test button save and the letter will update you see test well as the text I'm gonna use lock as expand value and they go now we gotta plot with the rounded corners let's bring up some other let's just the other API so for example we have this shape set to round let's go and try that I'm gonna use a shape and I say around I'll see what happens there you go you got the round shape now let's try some other API so we have Phil to outline trill we can set out line - oh heavens like a kind of button in a documentation if these are some uses examples you have a full list of properties available for example you specify the color for the button you can specify if it's disabled and not disabled the download property is well expand we used it Phil we used it as well we've a mode that we can define right now it's running on Android ok but if I go all the way up you'll see it different so here it's gonna here's our but I'm looking on ions and if I click on Android this is how they are looking on Android so we can define a mode specifically I'm gonna go back to if strong and first of all I'm going to get rid of this bill and say all I want is the block button and now you notice we have a block button I'm going to simply give it a size too large and then I'm gonna apply mode look at what molds available or if I go all the way to the properties we want to find out what is more so more it is or MD on top IRS let's say that I see the butter will look different there you go you see a little bit more rounded button there okay if I change this to MD and save now we have a little bit you know less rounded on the corner so you can see how you used a component now this documentation are really really helpful I would highly recommend spend some time reading about these components and at least find out what's available to you later on if you want to probably take a look at something that is already done for you and you don't have to write this custom CSIs for that so that's why this documentation is really really good we haven't gone to the looking at CSS custom properties how do we use them we got a slot which basically will be used in in iron item yeah this video was like showing you a basic component which is ion button and how to use it it's fairly simple all you gotta use copy that usage and then paste it here and then look at the API what's available to and utilize that next up we're going to be creating a tabs a UI now usually you have two kinds of UI in mobile application Alice one is a side menu that pops up and you can select the menu we take you to the specific page other one is having tabs at the bottom of your application and you can tap on that to go to Pacific page and we're gonna set that up I'm gonna take you to a documentation again and we're gonna go to a guide in guide we have a layout section which is really good in terms of keeping the information that we require now let's talk about structure so ionic framework provide several different layouts that can be used to structure an application from single page layout to split pane views and morons now we have two these header and footer go back to our code here you can see we are using header we have our iron content which is like your main area of your page and then we have on footer as well let's add that there now if I type something like this it's gonna go at the bottom okay there you go you can see that the food is at the bottom even though if I bring up the keyboard I'm not sure how I bring at the keyboard I need to probably have an input field selected so that's not gonna there yeah but we have a footer the Trading's this is your header okay that's your main content area and he's it for to define like to show you what exactly it is so we're gonna define some sort of like a colorful toolbar so let's just do a color let's just say a dark favorite okay we got the header maybe I want to go with danger but be more visible they go that's a header and for the footer we can define a color we don't have a footer color but I can use this on toolbar and that will take us for example a button and I can say that would be color here but I can just like submit let's save that now you'll have a butter at the bottom I'm going to use expand as full and there we have a button there and when I specify the color for that as dark and you'll notice we have a bottom footer and it has a button as in a primary color but you can specify the bottom color as well for example if I type dark here now we should be able to see a button at the bottom or in the footer okay so that's good and I would like to go and continue working on tabs if you are now I'm going to delete some of the code from here so we don't need this button we don't need a footer now let's save it and make sure that we don't have anything you know a page except the hotter until the title I would like to actually change the title to tabs view oh maybe tabs layout makes more sense save that file now inside our content I would like to have an ion tab so our tab is a component if we go to documentation I can move down a bit and here you see tabs layout is an example here it says a layout constraining of horizontal tabs can be used to let these I quickly change between content views okay and then we can use the iron browser outlet for that as well now I'm going to basically copy this code and I'm gonna go back to web strong and paste it here let's say see what we have now you can see at the bottom we have a forum tab and now we have a city tab spit here is basically just the content if I just get rid of that and also get rid of that and I save it and you can see no more text here but this iron tab we'll talk about later but what we're interested in for now is this iron tab bar you have a slot attribute which we can define to actually say if it's gonna be the top or at the bottom so if I use talk and save it moves all the way up as you can see we have some buttons there for on the tab but usually this is always at the bottom so we'll just do unto and move that to the bottom I'm just going to copy this and I need to paste that and here I'm going to change the title to account and there we got a taxi account we've seen how we can create the tabs now we're gonna take a look at how we can create this menu using ionic framework so here I can click on this menu hamburger button and then it pops out this site bar I would say and then you can click on any money to go that specific page okay so let's install the application first so I really a new instance of emulator it's why I have to install it so what I'm gonna do now is I'm going to use the command I'm going to CD Android and here I like to do cradle W and then I can say install debug and this is going to build the project for me so I don't have to open up Android studio anymore I can just use the command line to build the project for me and then also install that if I take a look at the package to chasten file this is our ionic tutorial that's the name of replication and this is what we expecting if I go and find this application this is what it's okay now it's also looking for this server because we need to have that server up and running also I'm gonna do one thing is an entire ionic cap sync Android it's going to update the Android project and then also I'm gonna go to capacitor configuration here is our server now because probably I created this project in a different computer or maybe I have a different IP address previously so that's why it's not you know accessing this one now so the fix is I can simply go and run this ionic app sync and Roy - - live reload - - external ok now let's see if it updates this this otherwise we can open CMD and we can see IP config and right now my ipv4 is 192 168 1 dot 1 1 3 that's my ipv4 address and that's what I can use here so now if I see it didn't update so what I can do now is I can simply 1 1 I 1 3 here and then I can say my knee cap sync Android once that sinking part is done then we can use the Gradle command to install that again cradle W install debug and let's see what it does now okay it did installed so now I'm gonna do is I'm gonna go open a new terminal I'm gonna type a annex herb - - external and once I was server is up and running I want to make sure that I don't use the browser it doesn't open the browser so here's a port and it should be targeting this one one reaches over ipv4 I see the browser was open and then we see the app is running I'm going to close the browser and I'm going to open any tutorial and now it's targeting this one one three and there you go we have our application up and running and it's also linking to this server now we've seen how we can create the tabs now we're gonna take a look at how we could create this a menu using ionic framework so here I can click on this menu hamburger button and then it pops out this side bar I would say and then you can click on any many to go that specific page in our code I'm going to remove this tabs layout let's say and then also I'm going to change perhaps to menu don't really need to say fullscreen so now I'm gonna show you how easy it is to actually create a layout it's very very easy after this I'm going to take it to the documentation here I've used this tab there and then also they have a I would say a sample code that you can just copy paste to build this a menu layout how easy it is now I'm going to just copy this sword go back to it get rid of everything and paste that code there let's save the file and now we should see a header with this button click on that and it opens up this menu so as you can see how easy it is to create that now I'm going to show you how you can add more items to it also how it's been built so let me explain so first of all we have this ion app if I take a look at this app component basically the iron app is there and then we're using the iron app again and this thing is supposed to go to app component so we were on a router outlet and if you go all the way down here we have a menu controller this iron app is probably not required let's just try getting rid of this and let's save and now still header still works okay as you can see no need for that ion app now we start by looking at this ion many so there's a component iron menu it has a Content ID set to main content and then we're starting with the header and then the iron toolbar just a generic ionic component then we start with iron content now here we have a list and then this is where we finish our menu after this point we have this hamburger button code which makes this menu and then the navigation part of it and then after this menu we start with our page which is this page so here I've got this on page with the main content ID also have some you know main content so to say interesting I'll save it and this is the page is going to get updated and even the header is inside this because we're talking about this page now all right so this is how you create a simple on a menu on menu in irony but also I would like to show you before we jump to using some component here we have a split pane layout a split pane layout has more complex structure because it combines the previous layout so I would use this split pane layout over R and a menu it will still create the same look but it has some more complication which we'll talk about down the road so I will try to just get this thing and then I'm going to go back and then instead of this code I'm gonna paste that I'm gonna save this let's see what we have now and there we go so now we got the menu something like this the code is a bit different code is in like ion split pane okay so now before we move further let's take a look at how you can add menus here so it's the same thing it's just adding this on split pane before the on menu and it finishes with that as well so here we have this home and here's a I on item we had on many toggle button so now if I go to they hear that's the title so to say main menu or change that now here we're starting this iron at least I don't want to start I on a list actually because if I look at it it has this navigate thing here so let's just get rid of that I don't want to have a handle there let's save this now we have a shred up you know icon and the menu I would like to leave the menu I sorry the icon here but I wanna get rid of this a line there so in eye on item which is a component here I'm going to get rid of the button I leave the button there and then have a class okay you my back that was not a class those lines and you say that to none click here and you don't see the line there now here we got this I on many toggle button and then here we have the item there so if I completely get rid of days you will see the menu but you won't see any item there so what we can do is if you know angular you can go and create a list of items and then you can use ng 4 here which will make it easier and you can pass in a lot of content there now let's uncomment before we wrap up this section let's go back to the documentation and I would like to show you here so it is important to note that element ID matching with the Contin ID specified by on split pane will be the main content always be visible now this can be done with iron never iron rather now if you know what kind of layout that you want from your application the easiest way is to use the starting template now if I go to documentation and I would like to go okay angular overview build your first app and then where we create an application here is we creating an application here you see the type of a template ok I'm going to grab this bit I'm gonna go back to the code I will create a new project just to show you guys so I'm gonna go to file explorer I'm gonna go to dev and I will just go through tutorial right click and open git bash there and I would like to just paste that and then here in two tabs I would like to use some other template so let's take a look at starting and then here we have a tabs side menu and blank I would like to use the side menu let's go back and I'm gonna paste that side menu there and I press ENTER and it's going to create a new project for me it might be a bit smaller for guys let me show me what the command was is ionic start for a gallery side menu tab angular and it's a capacitor project now it's just quitting the project for me I would like to just show you the code what kind of menu it creates but it's gonna create a side menu but it's gonna be a bit different than that we did so I'm gonna pause the video and once the project is complete and I'll show you okay so the project is create it let me open that up in the Python so I'm gonna just click on open and here we have a photo gallery project I'm going to open that into new window take a look at what is a code how the code is looking for menu so here we guarded app component now take a look at when you heard a black project and comparing it this project it's a bit different this is the way to do it this is the right way to start your side menu project okay so in our component they are starting with iron app and then they have this I on a router outlet ID main content and then they're putting that into on split pane then they're doing a menu here in the menu they if I I'm not gonna run this project but let me just explain to you what I was talking about here so here we got this inbox list and then we have a list headers inbox and then on note on menu and here what I was talking about this ng 4 here so if I go to app pages you see all of these pages are listed as an array and object and then it's an array of object it has an icon and then title in the URL as well and then we have labels as well here and then we got this you know a window location pod name which basically is going to load that bit there when the application start I could actually show you guys so if I do ionic serve let's see how it looks like and when you run on the browser it takes a bit of time when you compiling even though I have a very strong computer it's still taking a bit of time I wasn't expecting to take this long to compile because I just upgraded my PC with 32 gig of ram and it's a very high end processor as well Rison so he go so as you guys can see we got the menu and we got this idle and in this section there as well you see how cool it is out of the box ready to go let's stop the server and now you see how they've done it you can have a look so basically they create an object of array of objects which requires an URL and a name and then the menu icon and then you have this iron item okay router Direction rude so you can have a look you see everything is here if we take a look at the folder and here you see we have iron header and then this is iron content the same way that you do and if you want to add you know more pages or you want to add routing so you go to a prowling module here you will redirect to so it's redirecting folder slash inbox and if we take a look at here we have this folder called an ID which basically becomes your inbox on the go where you can go through this you know dynamically populate this so this template has been updated recently and I quite like it now so yeah give it a shot if you're starting a new project with it okay now let's move on testing some of the components I'm not gonna go through it every single component I'm just gonna show you a couple more how to use them one of them would be the card and then we can use couple more but most of them are very similar they're just angular components copy paste the sample and try to modify the way you like it so now we're gonna take a look at you are components in ionic five framework now I'm not gonna go through to every single a component but we're gonna quickly look at differences between these components some of them are fairly easy to use for example iron button which we already seen you just got a copy paste an example go through the documentation you know what's available to you some of them are going to be created in tight rib code start by looking at action sheet so let me take you to the documentation now action sheet is fairly simple let me teach you how you can read the documentation every component you click on text you to its documentation here they have a sample for example how it's going to look like so this action sheet is going to look like this so every time you open in the iPhone usually you tapping some better on your application and something come up like this so this is what we call action sheet similarly in Android if I click on that it's gonna look like this now this you are is automatically handled by any framework which is great now we read some documentation here so you have an understanding how to read the documentation and explore more so let's just say a button a button role property can either be destructive or cancel now it telling me some customizations now here is a usage section which every component have in the usage section we have angular react stencil view and JavaScript here's a simple example so I'm not gonna copy-paste example but let's take a look how we can utilize action sheet let's go to the pie chart and chrome on the side instead of emulator because I want to be able to switch between iOS and Android look of ionic so now we're gonna be reading a button here so let's just create a button I'm going to type message click show action shape and I save that and you will see a button in browser right now it doesn't do anything if I click on that so what I'm gonna do go to type script file and I want to create a function so say show action sheet and a tip now let's utilize this function in our HTML file so I'm going to call a click event on this button now this is going to come from just angular click event and I'm going to call this function show action sheet okay let's go to tab scroll now the way action sheet work is by importing its controller in your component constructor soldiers public of the action sheet controller I would say action sheet controller now as you can see patch army is one of the I wouldn't say one of the but the best IDE for JavaScript or Python JetBrains IDs are amazing they actually really they actually have really good intelligence and increase my production like I'll be writing less code and just using the suggestion from a pattern you will see or you'll notice in this tutorial so now here we are going to first of all create action feed constant variable I'm gonna set that equal to this stop action sheet controller and there's a method on it create and that takes an object now we're gonna make sure that we are using async function and we're gonna need an evade here so I want to wait before I go to the next line so I want to wait that for action sheet creation so in the object I press ctrl spacebar in patch on as you can see it's pretty good it's showing me all the properties available and yeah that's really really good so first of all I'm gonna use the header I'm gonna say custom action sheet next I would like to maybe have a sub header let's say custom sub header then I'm going to call the buttons a button is going to take an array and that will have first of all a text I would just say hands of it can also have a role as cancer destructive selected string undefined I'm going to define a role as canceled this thing is twinning error says missing whitespace okay well this is the widespread that it requires so that's fine I can just identity using Python alright didn't do it properly so we'll just leave that for now we'll fix that annotation later I've got froze and also I can have a handler which will take a function and I am just going to call this handle and we're just somebody they console the log and we can pass him button okay handler button was clicked and now we should see an action button so action sheet with this button so I'm going to click on action sheet now and right now as you can see it's not presenting okay so what we need to do once we create action sheet we want to await and want to say actual sheet dot present the kill is a present method on it now if I click on this button it shows the action sheet and I can click on the button there okay and then it will should say handler button was clicked now this is good let's go have a look at the documentation so now you've got text roll icon so if I use the roll as destructive now we might find a button action sheet button class that we could probably see the documentation there but for example I'm going to just use the scrubbed it okay and then I'm going to click on action sheet and we do click on this button okay now basically it's not really doing anything I'm gonna have to cancel out by clicking cancel button and it says handlebar dent loss cancel I'm just probably gonna zoom in a bit this is Handler button was quick so that's good as you can see we can create buttons now so this is how it's looking custom action sheet and we got a sub header which I'm going to get rid of and all I need is just a button okay take your cancel button now if I just let's just say copy let me just add a comma here first and I'm going to copy this and paste paste this few times and we should see a button let's just say click I would say sub meet let's save that and now if I click on this it has three brothers now I can click on this click it says handover and was canceled but let's just say I'm going to say click button was clicked and I need to say submit button was clicked and I can say here cancel button was clicked let's save the file and let's see what happens now let's click on action sheet I'm gonna say click and says click button was click and then cancel button was clicked now let's take a look at how it's looking in iOS so if I go and change the device so show device frame that doesn't do much so what I'm gonna do now is I'm gonna zoom out a bit and I'm gonna just go here and they click on iPhone learn let's refresh and there you go now it's showing an iPhone when I click on that and now you can see the action sheet is looking norica iPhone action sheet also I can click here and I say just higher device frame that's fine I don't wanna see that actually it looks nicer so I can just have that and show me you're curious as well so that's good so now if I go back and look at the pixel let's refresh and we'll make sure that I show look Android does not have that that's bad anyway so you can switch between iPhone and iOS now so as you can see the difference that's looking good now okay so you make sure that you have to refresh to see the actual you know changes to the view so now let's go to documentation and let's read more about action sheet so here you can see we have a CSS class that we can defile can pass in the custom CSS class form or parent component which is good intro animation you have an animation API in ionic 5 which wasn't present in ionic 4 so now you can use you know animations we can define this animation that we want a key bit Clause basically let's just say your application is running on actual device and you click on an action sheet and if it was a keyboard the keyboard was appear it will make sure that it will close that keyboard okay we can define leave animation we can specify the mode so when you specify the mode for example let's go to the code and I'm going to define a mode here and I'm gonna say just use iOS please don't worry about Android so then I save the file now if I go and change to pixel to I will refresh make sure your friend and I click on that and you can see the action it she is still coming as iPhone doesn't matter your Android or iPhone to action sheet has this kind of UI now it's not a good idea to specify mode manually because you know people are used to with their device or operating and look like Android people have their feeling about you know look of Android and iPhone once as the iPhone feel so you better not define the mode unless you really need to okay so that's good now we have some methods so every component has some sort of method we can see how do we use them so now let's just say if I want to basically do something after you know dismissed of the action sheet once the action should this persist I want to do something so the way I do it I'm going to say action sheet dot dismiss okay oh this way so also on it dismissed and I'm going to hall of function and that will take let's just say no perimeter but I'm going to just say console.log our action did it dismissed now I want to see the documentation was giving me an error hearsay says on did dismiss for what he do is on the dismiss and then you pass him okay so what do you need to do is this it's a promise overlay event let's go back to the code and see what's going on there so if I to see expected zero argument but got one okay that's fine I'm going to remove this bit and said equal to actually this is gonna be dot them and we just get that inside and then I'm gonna add another one here okay that should fix this now okay so it was a prom so you could not just pass in as an argument but you had to call this as a you know but then all right now once I click on action sheet comes up and if I just dismiss it it says action sheet dismissed so I say I this Miss sheet I'll just leave the type of there that's safe and let's see if that method a triggers so if I click on that get out and then it says I dismiss so you can see you can use these methods not all the UI component has this method but where you find it you can use it now if you don't find any method and you find an event that triggers after a certain you know action happens for example it says I on action sheet did present I want to make sure that the action sheet when it presents then I want to do something now here I don't see any method which let me see if the action sheet was actually presented so I'm going to copy this line and I want to show you how you can use that now just before this we are going to call action sheet don't add eventlistener and we do this use that you know text there I'm gonna have a function now you can say console the lung and I'll say action she'd did presented okay save and now when I click on an action sheet and if it presents it will log this method so let's click on that and this action sheet did present it as you can see I'm listening to that particular event now all of these things are basically angular things if you know angular you should be able to do this easily all you need to know is read how to do it the documentation that's the reason why I'm spending a lot of time and showing you how to use the methods how to use an events and what are the you know properties are available for that particular component and we pretty much covered a lot of things in our action sheet now let's move on to a next so let's just say we look at alert now alert is again something that will be created by its controller let's take a look at the buttons a buttons have something like you know URL email text text area so what he can basically do is you could actually create an alert you can ask for a confirmation yes and no you want to do something for example you want to click on a button to log out from an application and you want to make sure that the user understands that he's logging out you want to double check so what do you do you present an alert by saying hey can you please confirm that you really want to log out and once that's the case then you basically all a handler method so let's take a look at how do we do that so here is a good example for the alert as well so if I just go in copy this I don't have spent time on it because you would already seen how to use controller let me zoom in a bit so this is an example that I'm saying percent alert confirm okay let's go back to the code and after days I'm going to paste that code there alright now here it says alert controller is not there so what you need to do is let me just go to the constructor function at kama Interpublic alert control as you can see python or web strong will give me suggestions now let's add alert controller nope nope let options by a lead controller okay our problem solved okay now what we need to do is we need to go to the HTML and let's create another button there and instead of calling the same function I'm gonna say sleek to show alert and here I would like to call a method which says percent alert confirm all right let's go here I'm gonna click on that button and there you go you got analytic click ok taste confirm ok click again click cancel to cancel blah now all of these things are done here so you basically have an API which you can use to define properties and then you have a buttons where you can say you know cancel button or ok button that's just like a text there and you can pass in a handler that once that button is clicked what you want to do usually it's not just confirm can't supply it's a little it's a big logic that you perform on this so that's really really really really important to understand angular so yeah now let's go to the documentation again and let's quickly look at what it provides now you can see you can you know do a lot more than just uh just the ok and cancel you can have like a full inputs let me just put those inputs all of those just before the balance and we see what's going on there our protocols are saved and click on alert and there you go Bigelow I can pass in rallies I can do a date picker right there I have some attributes and the way we handle the data from this input is by having this handler the ok handler you see this one if you define a cancer role as canceled then you won't get the data there but if you have the other button it will have the data there so you just gotta use this handler function but have a look at this example this is what you probably will have to there's a radio button example there as well you got checkbox examples so this is like really really kind of like a big component which requires a lot of the same thing you see we have all the properties here on agar the events same kind events that's how you're gonna use and then you got methods that you can use those mats as well and something that we haven't looked at is CSS custom properties which you can basically modify by just using these properties this is like an angular thing I'm gonna I don't want to go into details but let's move on now we have an iron batch iron that is very simple no controller require just use this particular thing that's just me it just copy-paste it's just a simple angular component we go to the home page I'm gonna go here I'm going to paste that badge and let's see what we see color one in 55 there you go that's the badge there simple it has some properties as well you can define the colors you can define the mode and you have some custom cities properly so right now the mode is you know a bit circular not circular actually a rectangle as if I switch this to I phone a plus let's refresh and you will see a round kind of like in a badge I can change the color to primary you can see in the documentation you can change colors and you can change the mode as well very simple we already looked at iron buttons and ripple effect is something that you can pass in as you know repo parent this justice is fast right you will see what's ripple effect is now I'm gonna you know show you card card it's one of the most important UI component which can be a bit complicated it can be used with other components like iron item on label okay this is the really something that you need to learn to master you know your UI part of your application [Music] if so it's gilded the card documentation all right so here's an example it's showing me this is how it's gonna look like on iOS and now it's Android okay so it's hard substandard piece of UI that serves as a ancient one to more detailed information a card can be single component but it's often made up of some header title and content iron card is broken up to several sub components to reflect this so here's some of the examples that are available here so what I'm gonna do now is I'm going to copy one of the card from here let's go to perch on we're gonna go to tap your father let's get rid of some of the buttons here I'm gonna paste the car they're actually didn't copy so let's go and copy this breeding let's go back to perch on and I'm going to save father and see the card appearing all right so there you go we got the car there now and what this card has first of all it has a card tag I say let's cut let's call it card component if I click on that it takes me to its you know low level and card and it's like I can point okay let's not worry about that for now but this is the angular component now it has an card header now card header can take a subtitle and card title and the look that you get it is this one we have a card content so you start by having a card if you want to have its sub header or a title subtitle or title you put them into iron card header and then you start with iron card content let's go back to commentation and here are these components that are being used in the card we have something like on card and item there as well so I'm gonna copy this one all of them are like you know it's like a card related components but this an item is something that we need to talk about so let me pay stats example there and let's save the file and update our ma dagger so you see the card now what's happening is iron cart can have iron item an item is a block level component which means it has a full which you're not sure about the block level element in HTML I would recommend stop this video and go learn HTML first okay so block level component we takes up the whole space and here you can see an item it has an icon and iron label and when you put this ion label out slide and save this as you can see it's still in the card but it's not going to be visible why is that it's in the card but why not available because it's inside iron card and iron card can take a certain components not all of them so if I put something like you know Wow text it will appear okay there you are but look at that look at the URI part of it it's really small it's not really reflecting the native angular or I would say not angular but native iOS or Android kind of component so it's very important to use a certain UI component inside certain you are compliant so if I use an icon outside the iron item it doesn't work so you can see that to learn more about these kind of things you need to make sure that you read the documentation completely now find out more about ion card content or current card header or subtitle or title you can click on those and it will tell you what you've been you know what properties are what matters they allow you to apply so it's just a iron card header so in cod Harwich they had a component for iron card it is mode and then this property transferring subtitles and thing odd title is kind of like you know you can define a color for that and in the mode so if I go and define card I don't let me just get rid of this one and we go to iron card title and I'm going to use a color as family now it's gonna have like a bluish color nail there you go so you can see go and read the documentation always make sure I have a documentation open when I'm working on any projects so let's go to iron check box very simple I don't really have to show you much about it you can have something like you know just iron check box it's a simple component I'll just paste that here and say this and you will see the check box will appear so they go right now it's looking like this okay but if I just go in cut this and then paste it inside the iron card and now we got the checkbox there okay very easy to read document and he is a angular it's been used here with ng for you can get work at that as well now I don't I go to every single component because we have seen action sheet we've seen and pattern we seen and card so here or basically just you know all the components that you can probably go and read about them lets me show you this on grid which is like another most important so if you understand bootstrap or any UI library in javascript you should be able to pick up and quit very very easily it's basically a twelve column layout grid so I quit can have a row and the rows will have columns so it's like this that's a great has a row and that's just a column there now you can define twelve columns within one row and depending on the the column left it basically will go to the next line here's the example so you can see we have iearnt grid and then the row and cause let's go and try this one after this card so let me make up some space I'm gonna start by using ion grid so we're not agreed you define ion row and then we didn't iron row you have my own column I'll say one let's make two three I'm gonna save this and let's see what happens there you go so we got hold on one two and three let's go back to the documentation and maybe we can find something like you know you could do a color maybe alright you can do color now you can't do color so if I take a look at an agree a row that doesn't even have that color property maybe on column if there's any background appropriate that we probably could use nope that's not really it's like me so I'm just not gonna do that I'm just gonna use this so here we got this iron self-start you can define a size there I'm trying to find something on this one so let's open this and then pasted here it will justify our aligned items Center and within iron column I need to justify this you and then puffin Center the T weapons now doesn't do much so texts the center let's see if that does all right that does it so I'm going to use ion tech Center now this class is coming from theses utility section let me just get rid of this one now also you can see we got this one two three having a same space let's just save wanna give this like a 2x space so I can define a property size and I can say give it a six columns and I can see it's been stretched to like you know taking off this space and then I'm gonna say let's just say give it like a 10 and those other two will be stretched like really close so they have like a 1 color image now it's that 12 column grid that you can look at there's a property size to define a column size we got some CSS properties so this is really really good if you go to guide section and you like take a look at this responsive grid here they explain how it happens so you gotta define a size and also you can define just you know something like a break point society sliced break point so let's just say I want this one to have a sixth column if the size is something a medium so I'm going to say here sighs - MD and one say six otherwise ten let's save it now you can see it's taking ten now if I increase the size of days and let's just say maybe make it iPad once I do I pad you see the size changes now it has like a width of like you know six Cole Whitt now I'm gonna make this as responsive and now u s-- notice if I just make it smaller it will take a tenth and if I go a little bit you know wider they takes a sixth column so you can see you can define a grid size by you know defining SM small M deeper medium and LG for Lodge now these breakpoints are pretty good if you're on a mobile then SM or MD on a wider screen and if you want to just do a tablet version of it that you do LG for the large you can also read about breakpoints read about so let's go here we have this access don't get you know access screen for SM 576 pixels for MD 768 which is like an iPad kind of you know area LG is like 922 and then X is like 1200 pixels which is like I don't know maybe you're 90 20 PI something a laptop kind of thing then we have a default break once I look at days you get an auto layout column it's it's really explaining what it can do so I've shown you how to read documentation so we don't want to spend time on it I just want to show you this I on icons now now if I go to days and I am going to read in this column I'm going to use ionic icon and it will take properly named and I'm going to just say person and save that and we'll see a person icon appearing there so there you go and I can say sighs for that I would use a large one you see the icon coming you but if you go to the documentation you see this iron icon click on this it opens a bit another page with actually a separate web page I only cons calm okay now this thing has a list of icons freely available with ionic framework you can use the field shop or outlined one all you gotta do is just click on that and then see the name and they use that names a very copy and I'll just paste that there and just to see I will juice size as large let's say I will see further of lines and Erica over good icon so icons for ionic is coming from this website let's go back you know I will show you guys I turn now item is another important component that we need to talk about okay so I have a different getter because it's the next day that I'm recording so we're going to talk about eye on item noun so items or elements that can contain text icon avatar images inputs and any other native or custom element generally they are placed in a list with other items items can be swiped deleted reordered or edited we have a clickable items detailed error items we go item placements or we can do like a start and or none we can do a text alignment within items we have a input highlights now here is a list of you know a usage so here is a simple item we have item as a button item as the anchor and item as secondary color we got a detailed arrow we got the list of items we got item lines as you can see there's a lot of usage examples and I've never come across something that I had to do which is not available in this sample code so I would highly recommend if you want to understand how the items are used it with different component I would highly recommend go through this and you will see how the item works with on a label or iron input okay so wanting to keep in mind that iron item is to block level item I copy some of the usage here and a paste in our code so let's go to purge home and I'm going to paste that simple usage code save the file and you'll see your item so the first item is simple item it's a block level item you can see you got I on label inside it and that's how it's looking okay you can do something like slot we can do end if it's inside some other toolbox then it will go to the end we talked about slots later but this is one of the property that available in iron item we got the label we got this button type item so you can click on it it has a ripple effect there you got this button which takes you to sorry not the button but hyperlink rejection to the certain website so here's an example I don't want to waste time on just showing you what how it's gonna look like you can try them out try copy pasting code and see if that you know helps you in terms of designing your UI I have a separate series on any components in which I'll show you how to make the UI in a certain way by using by mixing matching some UI components from ionic library but this crash course is something that we just want to quickly finish and know how to use these UI components so here we got you know some other examples like for example media items if you want to put them but this one so you can do an item and you can add a label and then you have at unlit which has the image and just to show you let's copy paste the code and this is how it's gonna look like okay so again try them out and then you'll see what you can do so icons with item so it's very easy now let's go down we have some properties we've seen the button which makes the item act as a button it has a ripple kind of effect it becomes tab about okay we got the color properties which you can use primary secondary or if you have a custom team involved you can do that as well a detail so if the details true the detail arrow will appear and it defaults to false so you have to specify if you want to have like a detail so sometimes you want to have a topical item which you tap on and it goes to the next page and we're gonna make it look like an arrow which basically shows the user that you can tap on it okay so we got detailed icon disable download so there's a lot of properties here you can take a look at their description and see what the - we got some shadow parts of iron items as well if you want to access the native HTML button or angkor development which wraps the child admin you can use days and now we have some CSS properties okay we got slots which we seen and inside basically if you have a let's just go back I will show you quickly I'm going to clean up some of the code from here okay save the file and here we got this simple item so for example I'm going to add another item there okay I'm gonna make a copy of this and I wouldn't say item one and I can say item two and let's get rid of this true I can see we're gonna see two items at item one and I didn't - within an item okay now if I use the slot property there okay and I want to make sure that this item one goes to the end so I'll type and save and you will see this item went to the end and this automatically be you know aligned if you haven't specified a slot so if I try to start it will go to the start so basically it's an alignment horizontally that you can do with this slot so it works within an item alright so try to go through this and then you will know what to do some of the other sub item things like you know items divider or a block elements that can be used to separate items in a list so here's a usage for that as well if you inside the item you want to have like a I think divider that you can use this is it's already built for you and it's got some properties as well go through this you'll get there so the next UI component we want to take a look at is on model our model is one of those components which are going to be used a lot when you're developing ionic applications a lot of times you have a buttons where you click on there's another page comes up it has its own thing you do a thing and then you just close that so our model is one of the complicated one here as well and also it is very useful you look at the documentation first so it says a model is a download that appears on the top of the app content must be dismissed but app before interaction can resume so basically click on that the page comes up you do your interaction you close that to go back to your application we got this missing so the model can be dismissed after creation by calling a dismiss method okay we have on dismiss function that can be called to perform an action after the model is dismissed some customization available for CSS we'll take a look at later now let's go to the usage and we got angular usage that's make sure they look at angular uses not the jealous QR react so here we have a model controller it's the same thing as action sheet controller to create model and then he's a function that can be copied and pasted in the record to create a model now let's go and try this first so first of all I'm going to go here right click I'm going to use English cymatics in Python and I would like to create a component and I will say test model component okay so that's the component we're gonna go and add that to our app module so it's still running let me just hide this and here we are going to put that component actually not here we're gonna go to the whole module that's where we want that so I'm going to go and add that to a declaration so that would be test moral component and also we're gonna have to add that into entry component search bar type entry I'll leave it empty for now let's see what it does if we don't put that into entry component alright so let's go to our home page HTML file and I'm going to create a button here okay and I'll say click to show model and I'm going to say present morkul the function doesn't really exist so what we need to do is we need to go to the home and here first of all let's clean up a bit so I'm just going to zoom out in the code and I'm going to get rid of some of the code from here also I want to get rid of this action sheet and action controller and now we're going to zoom back into our code let's hide this bit now inside the constructor and when I use public and I'm gonna say model controller PyCharm is amazing shows me suggestions so I'm going to press ENTER it automatically imports that for me which is great and now I'm going to do some function here so let's just go back to the documentation and I'm going to copy this function and then paste that here okay here it says model page so what I would like to do is we want to have a test model component as you can see it automatically imports that I did you know it just does everything for me automatically the pattern is great I'm really liking the ID okay so now if I click on collector short model it brings up the model there you go but it doesn't have anything so we're gonna go to this test model coupon it and here you see there's just the text so I'm gonna use ion header and I'm gonna do I on outside title and then we add this iron content there and I'm gonna say here full screen - we haven't added that into our entry component so I'm gonna say test model component so we got this iron header if I just have a button here it says dismiss and we can function like dismiss whether now let's see what's going on there so we got this async function present model let's go verify this is the one once we click on that it should go and create the model with this and we have this my custom CSS class I'm just going to get rid of the minus custom CSS class and then I click on that and there we go we got the dismiss button there now I'm going to take a look at this bit I'm going to copy this and instead of just having that header I'm going to paste that there and for the title I'll say just a model now we should be able to see the same kind of you know a tool bar up there so that's good how do we dismiss we need to have a button to dismiss this right so we're going to create this dismiss we're gonna call this dismiss function I'm gonna rename this to dismiss model let's go here and I'm going to add public model controller and then we're gonna call a function this is a model and we simply need to call this thought model controller dot a dismiss function and that's it once we call this function okay quick and dismiss and delegate you see you can call the dismiss function to dismiss the model now there's a lot of other things that we could talk about for example passing data into the model so here we got the component props you need to know angular I'm saying it again because without angular you won't be able to follow this tutorial because I'm using angular as a framework if you go to your model creation here you can pass the data there as well now this component props is basically a data can be passing to the model and then you can handle that by using input decorator so we're gonna use this input and then what we expecting let's take a look so we're expecting a first name alright so I'm gonna use a first name let's paste that here and that would be type string not underscore but just a first name now once this model gets greedy I would like to go to engine ish lines and then we'll say console dot log first name they stop first name okay now I when I string it in the console that wants this model will generate it will have a Douglas if I go back and change this to my name I where's Marissa and now you will see when I generate this model you'll have a wait miss opinion on log so you can see you can pass the data into the component as well and handle that with input decorator which is coming from angular again need to know angular so here we got the sample as well so here you can you know add this to the component that is acting as a model component you got this dismiss a model that's what we already did we have some lazy loading options as well so you get a put that into declaration and we have some export as well which you can use to lazy load we got swipeable models so supple models works on iOS so modern ice mode have ability to present it in a card style and swipe to close so there's a lot of things that you could do how look at this documentation and then you will get an idea how to use this thing same events we've seen in action sheet methods that we can call on our instance that we've seen already so yeah it's pretty straight forward now let's go to component section and here routine action sheet we've seen iron buttons we have seen iron cards we've seen on grid now all of these are very simple to use the most important company one I've already shown you for example on menu how to use that other than you know what we've seen or pretty much a UI based components for example if you want to do something like list reordering so here we got ris reorder that you can actually reorder things so that's reorder and if you take a look at this you know usage code copy paste and you will be able to reorder so it will toggle on and I can see I can reorder there you go so if you want to create something like this you can do that with iron reorder now we got one thing to cover date and time picker which is like the most important one sometimes you know they didn't answer everybody in development so here we're gonna go to usage let's just copy this and I'm going to go to the home page and then I paste that there and now if I click on that time it will open up you know an action sheet I would call it and you can select a date and time now you need to be able to read the documentation so we have a display format so display formal properties specify how a ten-time ballot should be printed so you can just have a month and year you can have a mountaineer like this you got this English like a three-letter month and then the year also we have the zones that you can sit as well you got a pick up format and you got dead and turned data that you can get and here's a lot of examples so I don't really know I don't really want to spend time here showing its samples are pretty great and you have pretty much everything we already talked about how to use properties how to use a method on them there's gonna be some events for example this on a change event okay so I would like to call an event here so I'm going to first of all go to home page and I'm going to just create a new function so I'm going to say log pick date and I'm going to grab event okay and then in the event I'm just going to log the event actually we can just say value okay now we're gonna go to our HTML I'm gonna zoom in a bit and here I would like to call I on change okay I'm a cold log date so I'm going to pass in then a pretty local variable to say pick the date and I'm going to pass in quick they'd dot a value okay now it's gonna grab the pig date so let's just go and change the date so I'm going to select this date August 1 to 19 done and there you go once you have that you know date change and it automatically triggers this unchanged event and then it will actually call this method and pass in this pigtailed value which will give you a value that you selected so here to the 1908 zero one so if I change to 2016 done again this island chain trigger and you can see the data in your Lord so you can see that you can hold these events in your HTML code as well so we got two CSS properties there now a lot of the UI components usage are the same and we don't really need to spend time if you know angular you should be good to go if you know any bootstrap you should be good to go and read the documentation and know how to use this the next part we're gonna take a look at is a native API native API documentation page you can see on the left list of plugins available for example if you want to know information about device you can use this device plug-in it accesses information about the underlying device and platform it's a file plug-in which lets you write and read files from your device also there's a lot of plugins which are really really helpful for example is firebase plugin so if you're using back-end as the fire base for your applications you can use these plugins and that will make the job easier for you to talk to firebase which is really really good that it's here we got a geolocation plug-in if you want to talk to GPS of your device you have that API available to you as well there's a lot of plugins available also one like to point out capacitor capacitor is basically alternative to Cordova you can mix and match we've already talked about but I would highly recommend use capacitor plugins over ionic because this basically is the future also recommended by ionic community okay so this called the same kind of API is available for us to use for example this device which gives us you know information about your device and a platform you got an API for models so you can actually generate models and the difference between this and ionic models is like this is going to be your native model on the both platform for Android and for iOS it's gonna generate a native code but when you use the models from ionic that's just like a JavaScript running in the browser in a web view of a mobile so that's the difference between this model and ionic model now we're gonna start by looking at how do we use a plugin in ionic native wrapper okay so I will show you guys this device plug-in with let's find out how do we install this how do we use this in our code and how do we grab our device information and a platform information using this plug-in the installation section of a documentation you will have three options here Cordova capacitor Enterprise enterprise will only be visible if there is enterprise plug-in available to do the same thing capacitor will be available if this has a capacitor compatibility and I would say most of the plugins that you see here for example AdMob okay oops something went wrong the link is broken so all IPE yep and you see the capacitor version is there as well so it's basically the same Cordova plug-in but installing it in a different way and then occurred over so we are going to use capacitor because this is a recommended way of generating your native projects now so every plugin that you see here will have a capacitor installation of it so make sure that you click on capacitor and then use these three lines to install that plug-in so I'm going to first of all copy this go to the code and I'm going to open up a new terminal or maybe I stop the server and let me zoom in a bit let's clear and paste that line there I haven't actually copied it so I'm gonna go back and paste that line there press Enter or return on a Mac and you will install that Cordova plugin for us and once the installation is done then we need to install ionic and native device from wrapper which wraps this into you know ionic native thing let's install that as well now make sure if you are installing it for like later use make sure you use this save flag right now if I actually do end pin install and I will see I won't see this device plug in here in the list of dependencies because I haven't used the flag which is like you know same now this is support for Android Browser iOS Mac OS and windows ok that's alright so we're gonna take a look at the usage of it it's fairly simple you're gonna just copy this line and let's go and use this in our home page so I'll go to the home page let's get rid of some of the functions here and let's get rid of mortal controller let's paste that line I'm going to get rid of this and use this public and then inject that okay and I'm gonna use ng on in it so ng so let's just do implement first and then we are going to just write leash or context and implement all numbers click OK you have this function there now once this component gets initialized I would like to call this dot device dot and now I'm going to use this user ID and then I'm going to log that to the console let's save now once our project is running you're gonna do ionic serve and now we should see when the home page comes up also for this test model I'm gonna get rid of it we don't need that anymore we go to the home module and there's gonna be an error because that doesn't really use this anymore so I will just get rid of that from here and also I'm gonna get rid of from declarations let's save that let's get rid of the import there as well and now if i refresh the application I should be able to see the device usual ID so it says now okay now know provider for device that's all right now here the documentation doesn't tell you okay so what we need to do is we need to go to app component so app module and in the providers array we need to define device as now this is coming as capacitor core we don't want to do that so go back to homepage our copy this paste that here and then I will add that device okay now let's save it and now let's have a look there we go so user ID is null okay that's fine if I would like to log a platform so let's close some of the files there I wanna see what's available I want to see what the platform is running on it still says annul okay what other options that we have let's just try getting a model okay still not so what I'm going to do is I'm going to actually run this on emulator so the script or the command that we want to do is adding our native project first of all and then running that into an emulator so for that I'm gonna use ionic capacitor add iOS this is going to generate a project for me and then I can use another command which you can see if we go to ionic documentation I click on CL re you have this capacitor add command which we haven't gone through the CLI a tutorial yet but we will so I'm just showing you this little command which will generate this iOS project for me and then I'm going to run this from terminal okay the project has been generated he's in a command that is suggesting so NPS cap open iOS so what I'll do now is I'm going to say ionic cap run iOS - - live reload - - external it's going to build a project it's gonna start a name a letter for me and then it's going to live reload and connect to my you know this angular or ionic project so I would tell it make a chain it will automatically be changed there now instead of here I would like to go to homepage and first of all let's get rid of this button I'm going to use interpolation from angular so the box on the brace is all that this dot device dot you do ID but save that and now we're just waiting for Xcode to start and then I'm going to run this on an emulator so I'll use this iPhone 8 emulator it's just building right now okay the project is various I'm going to click on this play button and the first time when you compile the project it might take some time but it prevention they will start and we will see the UUID coming up okay build successful and I'm expecting the emulator to come up they go that's or iPhone eight emulator application starts and we should see a user ID because we using this interpolation there okay so there we go we have a user ID there I'm going to see the platform as well so I'm gonna save this and we should see iOS as a platform there you go so maybe we can do in I on item move this cut this and paste that here and then we can have I on item again and then I'm gonna just cut a spade paste it here let's just push the terminal down and let's save it and now we got iris and we also have this now the theme it's taking is a dark I'm actually going to change that from variables and here it's accessing light but I think we gotta have to change the map region because automatically taking that from the operating system so you can see that we could read stuff from our device plugin now if I just copy they speak and we can say what is the model so if I just save the file I should be able to see iPhone eight here so it says I from 10 something's wrong with the emulator but as you can see but still reading the values from it so this is how I use an AV plug-in we go to the documentation and also I'm gonna show you one more plug in which is this camera plug-in now this might not work files camera requires permission to be placed in a config then so it might not work in an emulator so we might don't want to use this but if you go to the documentation here this is very simple it's just very easy to actually use you got a lot of plugins that are available here guys I would highly recommend to go through just click on that and you will have a usage there and if you have any question related to any Pacific you can drop a comment below now the last thing we want to take a look at is some of the CLI commands so here's a capacity of commands once you have the project up and running you could actually sync it by using capacitor sinker Brad so it basically performs a bill it can browse the web assets and it updates your native platform so that's one of the important command that you need to remember and those are the commands as well have a look at them and you'll be able to get them now we're gonna move to capacitor plug-in the same thing I would like to do using capacitor and capacitor houses device plane as well an example here I'm going to copy this code we're gonna go back and here I'm gonna clean up a bit I'm going to paste that code that I copied and now here we got plugins and then we accessing cons device and it's set equal to these plugins okay so now what we can do here is we are going to create a function async function say get device info okay and we can just say any now I'm going to say this dot actually we can do return yeah we can actually do that return a weight device dot get info okay and now let's save this bit and we're gonna call this function I call this function I want to get rid of this return and I'm gonna say info equal to this and I'm going to console dot log and then I'm gonna log info and then we can return in for there okay let's save and once the ng on the component get initialize and need to call this dot you get info okay and let's see in the log we get the data okay now I'm actually going to you know just hold this function asynchronously so we'll do something like it's it's really a bad idea to call this function and then I'm gonna just do a sync here and I should be able to see the data there there you go it's calling like million times we just got a kick rid of this it's just gonna slow down the computer it's not a good idea to call that so as you can see it call like a million times so we don't want to do that so what I'm gonna do now is close this go back to localhost 8100 and it's actually caused a lot of issues so what I want to do now is I'm gonna say this start let's just say let's just say info and I'm gonna set the roll to any for now and then here I would say this dot in for equal to this okay now we might want to use interpolation for info let's see what happens they go it's again the the promise so I will have a flag there which I could probably use this as a JSON let's save it and there you go that's the data from our plugin so you can see iPhone platform is web and app version it doesn't show so if I take a look at an app as well so it's showing everything here as well so you can see how do we use the plugins funk capacitor as well so it's it's really really great that we have some project like this we got some permissions plugins as well so I would highly recommend go to the capacitor API and also for your community based plugins available in ionic native wrapper which are like mostly Cordova based plugins but they're really good it has a vast community and it's been there for a while so you're gonna find a lot more plugins there instead of you know just sticking to a capacitor so yeah that is it for this crash course for ionic now I would highly recommend check out my youtube channel I have done a lot of ionic based tutorials hey guys what kind of thought tools that I've ordered done if I go to my youtube channel I would like to go to my channel aways Marissa I will go to waste missile Channel and here if you see in a playlist you have this mobile app development playlist which basically is is a series that I've worked on it's like a full-fledged application from start to and it gives you a lot of you know angular based stuff as well like unit testing in using components and actually designing so I would have recommend use this one also I have some you know done this complete ionic 4 tutorial so if you are really missing out something in this tutorial which I haven't covered like any weight component go to this tutorial series and you will see that component being discussed in that video as well so yeah I would really recommend try ionic it's great platform to build mobile applications and also subscribe the channel like the video if you liked it and yeah talk to you guys in the next one chase

Channel: Awais Mirza

Views: 24,739

Keywords: ionic framework, Latest IONIC Tutorial, hybrid mobile application development, ionic4, ionic, ionic tutorial, ionic firebase course, ionic4 full course, ionic firebase, angular ionic, Side Menu Ionic, complete ionic 5 course, ionic 5, Full ionic 5 tutorial

Id: qiXcNhXJ_X8

Length: 143min 0sec (8580 seconds)

Published: Fri Jun 19 2020