Ionic 4 & Angular Tutorial For Beginners - Crash Course

welcome to this course i'm super excited to have you on board in this course we're going to dive into ionic with angular as you will learn ionic is an amazing framework that helps you build mobile apps with web technologies and indeed in this course we'll learn it from scratch you will learn all about aeonic it's many components it offers its building blocks it offers and we will build real mobile apps that we deploy to the apple app store and the google play store at the end of this course but even better than that ionic allows you to build cross-platform applications which means you have one code base and you get mobile apps out of it as well as a regular web app and that's also what we'll cover in this course now as i already mentioned this course is about ionic and angular angular being an amazing front-end framework that makes building such apps even easier therefore in this course you get both and you just need the angular basics you don't need to know anything about ionic and there even is an angular refresher in this course in case it's been some time since you last worked with angular i also strongly believe that you'll learn way more when you're building something practical and that means that in this course we'll build an entire course project we'll plan it and then build it step by step adding features like navigation user interaction fetching user inputs showing modals and alerts adding authentication sending http requests to the backend using the device camera adding google maps and so much more now this is what's in the course who am i my name is maximilian schwarzmuller and i'm a freelance web developer and five star rated instructor here on udemy i got many courses on web development including the biggest and best selling course on angular i also created an ionic course in the past discourse actually but i did re-record it entirely when ionic 4 was released because that marked a breaking and important change in the ionic history as you will also learn in this course so this course is fully up to date and it uses the latest technologies and the latest best practices to allow you to build cross-platform applications with web technologies with ionic and with angular and with that let's dive right in and let's learn what exactly ionic is and how it works so what is ionic in the past this would have been a bit easier to answer because ionic evolved quite a bit across the last years and i'll come back to a brief history and future outlook later in this module so assuming that you don't know anything about ionic which is fine this course is for you just as it is for people who know a little bit about ionic or have worked with older versions of ionic ionic in the end is all about having one code base which is the code base for a web app and therefore uses html javascript and css so what you would use to build normal user interfaces in the web and you use these tools and these techniques and these languages which you already know and take some magic to which i will come back in the next few seconds edit by ionic to generate web apps progressive web apps and i'll come back to what this is in a second too ios and android apps and if you want even electron desktops electron is a certain technology that allows you to wrap a web app into a desktop app so to say so you can build an app for different platforms with one and the same code base with minor adjustments as you will learn in this course but really minor adjustments not big ones and that of course is a big selling point you can use your existing knowledge and get different apps which allows you to distribute your app on different channels now regarding that progressive web app part a progressive web app in the end is a normal web app that looks and feels a bit like a native mobile app it isn't a native mobile app you don't distribute it through the app stores it's still a website which you can find via google and so on but it's optimized to be reliable which means it even works offline or parts of it work offline it should be fast and give the user instant feedback upon actions and you also want to have an engaging app which is able to tap into some native device features like using the location of the user or the camera and with ionic you can build such a progressive web app you can also build a normal web app which isn't particularly fast or which doesn't tap into native device features and you can also though get a real native app out of it so that you can really target the broadest range of channels possible now let's dive a bit deeper into the ionic platform then because it's nice that we know that with ionic we can build such cross-platform apps but what does this mean what really is ionic how does it do that what's this magic ingredient it adds the ionic platform as we should call it is all about ionic which in its core is a set of web components now web components on the other end are a technique a technology supported by modern browsers which allows you to basically build your own html elements that behind the scenes have more complex logic something like a tabs component let's say where the user can toggle between different tabs in the past you could build something like this on your own by writing your own html adding your own css and adding your own javascript logic ionic gives you such a functionality packaged up in a finished ready-to-use web component and it has lots of web components you can use that is the core of ionic this suit of nicely styled platform agnostic and automatically adjusting so that you automatically have to look off the platform you're running on web components which you can dump into your web project so these custom html elements could be built by you but with ionic you don't have to you get a finished suit of such web components now these web components therefore are what you can see on the screen but ionic and the ionic ecosystem is more than just that because ionic is not just a suit of components ionic is also the name of the company who developed or which developed these components and this company has more than just this component suit it also worked on a tool named capacitor now capacitor is essentially a tool that is capable of taking your existing web app and wrapping it into a so called web view into a native mobile app so in the end it gives you a native mobile app that runs your web app inside of it but in a way that is indistinguishable for the user to a normal native app because it is a normal native app just with well a web app included in it but it looks and feels like a regular mobile app which you build with native mobile controls as you will see in this course and that's amazing because this allows you to take your web app and convert it into a mobile app easily now if you're a little bit more experienced in this area you also might know cordova which is a similar tool doing something similar capacitor is basically a more modern version of that built from the ground up by the people at ionic who have a lot of experience with that who used cordova in the past but now have their own solution which we'll also use in this course which is super fast super easy to use and makes it really easy to build native mobile apps so this is the part that allows us to use our web app and run it on a native device as a native mobile app and not just as a website opened in the browser now last but not least the ioniq platform so the set of tools we use from the ionic echo system also has the ionic cli which stands for command line interface which can work with other clis like in this course the angular cli which you will use behind the scenes which helps us create ionic projects manage them use capacitor to convert our web app into a mobile app so basically which helps us with the entire build workflow that is the last important part from the ionic world we'll be using this makes developing simply easier faster and allows us to finally build and package our app up now this is the ionic platform these are the tools you will learn about in this course in detail and this is just a big picture here obviously and this is what ionic gives us to build amazing web apps which can work and run as web apps but then they look like native mobile apps already thanks to these nice ionic web components which by the way are also not just about the looks but also have a lot of rich functionality included in them like this tab functionality i mentioned earlier but then ionic doesn't stop there doesn't stop at that web user interface it then also gives you the tool to build that in an easy way and to then also convert it into mobile apps or even desktop apps if you want to this is the ionic platform in its core there are also a certain premium and cloud services offered by ionic for some of them you have to pay others are free i won't dive too much into them in this course but i want to mention nonetheless these services allow you to build your app in the cloud for example if you want to build an ios app on windows this would be possible with the services and they also have other services for easier development or previewing and you can find all of that on their official web page which i'll also show you in a second but this is ionic in its core now that we had this detailed first look at what ionic is and which kind of tools it gives us let's take a closer look at this ionic ecosystem and for that let's go back to our starting point which is that we want to build a web app with or without any framework so in this course with angular but you could even build it with vanilla javascript or with react or view ionic works with all these alternatives so you're building this web app and you want to keep it as a web app possibly a so-called progressive web app with these cooler features this fast and reliable interaction and you also want to have a native mobile app and then you have this suit of web components which look like this which look like normal html tags except for that they aren't you then have your tools to convert this app and you have your tools for the development so the ionic cli and so on this is essentially what we saw in the last lecture already but this is just another way of depicting it or of showing it on a slide now of course with that knowledge in mind we can create an ionic project and we'll do so in this section already now this project essentially is all about our app so about our code we write to create a nice web application a nice website in the end and that of course means we will write our own code and again that could be written in vanilla javascript or with any framework like in this course with angular so we add such a fronted framework and that is optional as i just mentioned you could use vanilla javascript and then we add the ionic framework so this set of ionic web components to get nice rich web elements added to zap automatically or with very little effort so that the app already looks nice and has a lot of nice capabilities which would be quite a lot of work to build on our own otherwise so with that added and with a lot of cool functionalities added therefore we can continue now as a side note because that's already interesting to know here the web components we're adding here the ionic web components are built with a tool called stencil you don't need to learn stencil to work with ionic not at all and we will not learn it in this course but if you want to learn how the ionic web components were built behind the scenes so if you want to know a little bit more about that or if you want to build your own web components which you can use in conjunction with your framework and with ionic then learning stencil could be well worth it and i do have a complete web component with and without stance of course so all in one course here on udemy so definitely check this out if you want to learn all about the technology the ionic team used to build their ionic web components but that's just a side note so these web components are built with stencil and that is all done for you you just add these web components and in the end you can then build different kind of apps based on your single code base based on your app and this is again done with capacitor or cordova as i mentioned in this course we'll use capacitor which is a tool developed by the ionic team so we'll stay entirely in that ionic world and what this tool in the end does is it acts as a bridge between our web code our web javascript code and then the native platform we're running on so that from our javascript code we can trigger certain functions which then in the end trigger native code on your device so real native code there to for example open the camera to get the user location to show an alert or anything like that this can then be done with real native code executed on your behalf without you needing to write it by tools like capacitor or cordova which you can't even use kind of together as i'll also show in this course but we'll primarily use capacitor here so this is what ionic is all about in this course we will learn all about ionic we will do that with angular as a frontend framework and we'll also learn about capacitor and we will then therefore build a progressive web app as well as our mobile apps will not cover stencil or anything like that now that we had a first look at what ionic is and no worries if that was a lot we'll learn about these different building blocks step by step throughout the course we'll learn about the web components and then we'll learn about capacitor and how it works together no worries but now that we learned about that what is angular and i want to be honest here you should know that knowing angular is a prerequisite to this course there is a complete refresher module after this first module this is entirely optional and it should really just be a refresher it will not teach you angular from the ground up it will only refresh your knowledge in case it's been some time since you last worked with angular knowing angular is a prerequisite and if you don't check out my complete angular guide to learn all about angular which you will also need in this course angular is of course a framework which makes the development of web apps javascript driven web apps easier and more fun and more allows us to write more powerful apps because we don't have to focus on the nitty-gritty details but we can use angular to take care about all the rendering of the ui and of creating a nice single page application and we can focus on our business logic and therefore tools or frameworks like angular help us write highly reactive javascript-driven web apps um it's absolutely optional we could do everything with vanilla javascript but then we really couldn't because we would have to reinvent the wheel all over the place we would probably introduce bugs and angler does the same we could do but in a best practice way it makes the way free for us to work and focus on our own business logic and we also use angular to build so-called single page applications which are apps that run on one and the same html page where this page or parts of this page are constantly re-rendered why a javascript in the end triggered and controlled through angular but which to the user looks like sometimes the entire page changes and that simply creates the illusion of having different pages we can switch between whilst all the transitions and is on are instant because it's javascript running in the browser we don't need to wait for a server response and that's why we build apps with javascript and where we power so much logic in our apps with javascript now in an ionic app we essentially would want to use a framework like angular because it helps us with complex problems like state or data management between different pages for example which can become quite difficult in bigger apps and it helps us with things like routing or navigation so switching between these different pages and passing data around between them and so on and we'll come back to this later in the course this is angular as i said if it's been some time since you last worked with it have a look at this refresher i have after this module if angular isn't your thing then this might not be 100 the right course for you but i want to highlight at this point that ionic also works with just javascript no framework at all or with other frameworks or libraries so you can use it with react or view as well if you want you should still in case you want to go that route and you don't want to refund the course which is nice of course you should go through the the quick start parts the first sections of this course to learn how ionic works and you will then still be able to use that knowledge with these other frameworks um even though some things will differ there but you will know which things differ by the end of these first sections because the ionic components you use and the way you use them will be the same and speaking of that it's time to get our hands dirty and start using some ionic components so let's dive in and let's build our very first simple ionic app or get something onto the screen for this you can visit ionicframework.com and there under developers installation you find installation instructions now first important thing you don't need an ionic account you can instead simply install that ionic cli here now for that to be installable and to run you also need another tool which is nodejs you can get nodejs from nodejs.org node.js is a javascript runtime that you for example and mainly used to build server-side applications with javascript that is not what we'll do in this course we'll still need node.js for two reasons reason number one is it's package manager npm for node package manager which is used to manage dependencies like other third-party libraries in node apps but which also is the de facto standard package manager for web projects in general so also for front-end web applications as we're building it here in the course in the end and therefore we will use npm to manage our dependencies and ionic is just such a dependency you could say now in addition to npm we also need node.js itself because the ionic build workflow and the tools the ionic cli behind the scenes run based on node.js they use node.js features to execute correctly we don't need to write the code for that but we need to have nodejs installed for these tools to work so from nodejs.org download the latest version in my case 11.8 and only if that should fail use the lts version here so simply download it walk through the installer it's the same on windows and mac os it's a normal installer you go through it and thereafter you'll have nodejs and npm installed automatically then you can execute this command and you execute this in your normal terminal or command prompt now in windows feel free to run this command prompt as administrator by right clicking on the executable run as administrator on mac os and linux you very likely need to add sudo in front of this command to get the right permissions to execute it well with that you're probably prompted to enter your password and this will now install the ionic cli and tooling you could say globally on your mac or pc now why globally because now we can use that ionic cli anywhere in any path here in our terminal to create new ionic projects to run them to build an ionic app and so on so now with that installed we can use it to build a new app to create a new app for this in your terminal or command prompt navigate into the folder where you want to create your new project folder for this ionic project once you navigate it there run ionic start this basically generates a new project it will now ask you a couple of questions like what should be the name of the project and i'll name it ionic angular course but you can of course choose any name you want next you can choose from a couple of templates now the list here could change over time you essentially have the choice between a plank template which is totally empty project with just the starting page the side menu template where you have a side menu you can slide in from the left and a tabs menu where you have some tabs at the bottom now we'll learn about all these different navigation options throughout the course and you will learn how to not just use them from a finished template but how to build them on your own and therefore i will just start with blank here which is the most boring but also the most simple template to start with and as i said we'll learn about the rest later now this will generate a new project and install all the dependencies like angular or ionic this project requires let's wait for this to finish and i'll be back once it is now once this finished i'm asked if i want to use ionic app flow and connect my app and you can simply answer no here this is one of these cloud services which would be usable for free even you can create a free account and use some services but i don't need any of them right now so i'll just type in n and hit enter here now next you can navigate you see the commands here actually you can navigate into this newly created ionic angular course or whatever you named it folder and in there simply run ionic serve now ionix earth will behind the scenes as you can see here actually use the angular cli which is installed for you in this project to spin up a development server which in the end runs your application builds your angular application and that's really cool ionic uses the angular cli behind the scenes so all the cool features offered by the angular cli are included in an ionic project as well and you don't need to wait for the ionic cli to update to include something you might want to use from the angular cli and if that's something you're totally not interested in well then it doesn't hurt you that it uses the angle or cli so here i then got my first ionic app and this doesn't look too fancy yet but it already doesn't look bad either this especially looks good if you open your chrome developer tools or whichever browser you're using but in chrome any developer tools you can click this toggle device thing here and you can then preview the app as it would look on different mobile devices just reload after you selected a new one and this doesn't look too shabby looks already quite a bit like a mobile app even though there isn't too much meat in it but let's change that now to change that we need an editor we need an ide where we can write our code in this course i will use visual studio code which is a free ide built for web development it's fast it's awesome it constantly gets new features it's really great you can get it from code.visualstudio.com and there you can download it for your platform it's a simple installer you download it walk through the installer and once you have it installed you can open the project the folder you generated here so in my case ionic angular dash course with visual studio code here i did open that ionic dash angular dash course folder now inside of visual studio code it should look like this for you as well if it doesn't you can hit command shift p or control shift p on windows and if you enter theme here you should be able to pick your color theme here by pressing enter and i'm using the dark plus theme so in case you want to have that same look you can use the dark plus theme here i'm also using some extensions so if you go to view extensions here i recommend that you use both the angular essentials you can simply search for that here and then install these angular essentials package this angular essentials package here i already got it installed simply install it on your own this helps you with general angular development and what i also do in this or what i also use in this course i also use the material icon theme and this is totally optional it's this one here it just changes the file icons you see inside of visual studio code and i like that look here so i installed that theme as well that doesn't help you with development it just gives you prettier icons if you want to have these same icons you can see here you can install this theme now once you're done picking your extensions you can go back to explorer here in the view menu or use this shortcut as i just did so this gives you the look and feel you see here in this course and what you find in there in its core is a normal angular app so if you work with angular before which you should for this course then this does look quite familiar here you got a source folder with the app folder with the app module app component and here in the app component html file we see the first interesting thing these are not normal html elements and they're also not normal angular components in the end this year are these web components added by ionic now these are some web components we can see even more here in your home page html file got an ion header toolbar title iron content and then also a normal html element so it is quite normal to mix and match them but ionic has a rich suit of built-in elements which in case you want to get a sneak peek already you can find in the official docs under developers ui components on ionicframework.com and there you see a list of all the web components it ships with and that's quite a lot we can do cool things like here we could add a iron button which is one of the components it ships with and in this course you will learn about a lot so you don't need to memorize this right now or get shocked regarding how you should ever learn this you will learn it throughout the course and there i could say change text and let's say i want to change this text up there so let's grab this text here maybe move it into a paragraph and on that button here we can now add a click listener and execute on change text so we write normal angular code here that is what i want to show you this is a normal angular code a normal angular click listener just the element is not a normal angular or html element it is an ionic web component and then how did i added that we added this click listener and i'm targeting on change text i can add a once text method here to my homepage component class which is a normal angular component as you can tell it has the component decorator it has a template url and a selector so all things you know from angular and in there i could have a text property with default starting text let's say and when we trigger this function here this method i set this text e equal to changed and now all we have to do again normal angular logic all we have to do is we go to home page html and there we can now output this with string interpolation also a normal angular feature and we can target text here and text is simply the property name i have in here now with that if i now save this thanks to ionic serve still running and you should keep this up and running it will automatically watch your code for changes and reload your app in the browser so rebuild the app and then reload the app in the browser whenever such a change happens and therefore now if you go to the tab where your app runs you see the change template you see this button which looks like this without me adding any css which is another part of these built-in web components they have a nice styling included and if i press this button it changes now by the way if i would switch to let's say a pixel 2 so to an android device and i reload you can also see that the button now looks differently and if i tap it we get this ripple effect here so that is a lot of the stuff ionic does for you it automatically adjusts its components to the platform they're running on it gives you nice styling and you can use them like normal web elements like normal html elements just with a lot of functionality already included now that is essentially what you will be able to do with ionic we haven't even seen the part yet where we take this web app and run it on a real native device we'll do this later in the course but this is the end how we will work with ionic throughout the course we'll use the many elements it offers us write normal angular logic and we can build nice beautiful automatically adjusting web apps that we can deploy as web apps and run as normal websites but which we can then later also deploy as real native apps which look and feel like native apps because well they are native apps then by the end of the course and i hope this wets your appetite here obviously we'll learn all about the different components here which ones exist how we use them how we configure them and how we combine them with angular we'll learn all about this throughout the course now we had our first little ionic angular application nothing too fancy in there but i hope you saw how we will generally work with ionic that we in the end have a setup where i will explain in more detail how things are working together there where we can use these ionic web components to build nice user interfaces now ionic hasn't always been about web components though historically with ionic 1 ionic was all about creating mobile apps with angular 1. an ionic one was released in 2013. in the end what ionic 1 did was it didn't create web components that was possible back then you couldn't create your own html elements browsers didn't support that but it used angular 1 directives custom directives to essentially also give you custom components but custom angular components in the end which run only inside of angular apps now ionic 2 continued this in 2016 by giving you the same for angular 2 which was a brand new version of angular which is totally different to angular 1. the two have basically nothing in common indeed so ionic 2 gave you again angular components not web components angular components and again therefore you could only use ionic 2 in angular 2 applications now there also was an ionic 3 which basically added some new features enhanced ionic a little bit but it was still focused on angular at that time angular 4 was out but still angular 4 despite the name as you should know is just the same as angular 2 in its core as is angular 7 8 and so on all these new versions are simply named like this they're all based on angular 2. so we still could only build angular ionic apps there and the ionic team decided that this would not be optimal for the future because not all people are using angular you of course probably are otherwise you'd not be taking this course but you could be using react or you could be using view or no framework at all and maybe you want to use some ionic components maybe not even all of them but some of them or you do want to use all of them because you do want to build a native mobile app with ionic well then you were limited to angular with ionic 4 you aren't anymore ionic 4 and all the future versions of ionic are based on web components and this is a browser specification that allows you to add your own html elements that run totally independent from any web framework you might be using so you're independent from angular and so on because in the end all you need here is javascript these web components use javascript under the hood and every browser supports javascript and therefore web components in ionic 4 can be used with any framework any web framework or no framework at all if you want to and that is pretty cool now all the word on the future of ionic in the past we had ionic 2 and 3 and 1. now we have ionic 4 and we'll get a new version every 6 months but just as with angular 5 6 7 8 and so on these new versions don't change everything there are small incremental enhancements where the majority will stay the same your knowledge you need will stay the same only some enhancements are made minor features are introduced and all these changes will happen in a backward compatible way so that you have loads of time of updating your app if needed and often you don't even need to update anything so this is not like oh god i gotta learn something new in six months you don't this is the ionic history and a brief look into its future and that is why ionic four and future versions of that is and will be the best versions of ionic with ever had because we got so much flexibility with these versions in the last video i had a look at the history of ionic if you have used ionic 2 or 3 this video is for you if you haven't you can simply skip it i want to dive into the important differences between ionic 3 and ionic 4 and what changed now first of all if you need to update an existing project to ionic for there is a migration guide on the official page on the official webpage of ionic on ionicframework.com you can go to guide here in the docs and you will find a migration guide here and that gives you a detailed overview of what changed from ionic 3 to ionic 4 and how you need to adjust your project to well updated so that is the detailed guide i want to give you the rough overview of what changed so an ionic-free project used the ionic cli to generate such a project we then used cordova to also get a mobile app out of that and ionic 2 and 3 actually were mostly focused on getting these mobile apps with ionic free you could also build progressive web apps that was possible but the focus really was on this mobile app with web technologies thing with ionic 4 that's changing we still have the ionic cli but we can actually also include ionic 4 through a cdn or through npm so we don't even need a cli or any complex build workflow to use ionic for which makes sense because it doesn't rely on a framework and actually in the first real section of this course after the angular refresher i will show you how to include ionic without any cli before we then use it again because we're also building an angular app which needs one so that's the first subtle but important difference we can just use the ionic cli we then in the end have a normal web project and an ionic project in ionic 3 and 2 also was a web project but it was highly geared towards getting out such a mobile app such an ionic driven app now here we have a normal web app project that also can spit out a real mobile app but doesn't have to because under the hood like the ionic cli for angular we use just the angular cli and similar things are offered for react and view so we don't really have anything too different to a normal web app built with angular or react it's just a web app plus so to say with some extra features and therefore what we get out could be a normal web app but we can also use cordova or capacitor both supported now capacitor is this new tool offered by the ionic team to get a mobile app and in this course i will use capacitor so in the end we got more flexibility that's the general theme of ionic four more flexibility and yet more stability and speed as well this is the big picture again for the detailed upgrade on what technically changed have a look at the official docks i showed you now we're nearing the end of this module there's just one important thing that is important to know about mobile apps built with ionic if you're building such a mobile app as i mentioned in the end what we get is our code our ionic app with tools like capacitor or cordova is made available as a mobile app for these native platforms so for android and ios and now we have two common ways of making that happen we could compile our code to native code so we could compile the code to java for android or to objective-c or swift for ios and compiling here especially talks about the templates so a button an iron button we have in our template could be converted into a real native button or the alternative we could wrap our web app into a web view on native mobile apps you can launch a web view in the application to host a web page inside of that app you might know that from some apps like twitter if a person links some webpage there and you tap it you don't open your actual browser app and open the page there but inside of twitter a built-in browser opens up this is not a browser developed by the twitter guys it's a so-called web view it's end a special widget you can use in native app development that is a fully fledged browser that doesn't look like one because you don't have a url bar at the top and so on it just is a full screen browser and that is what ionic uses with tools like capacitor or cordova you need get a mobile app shell that has such a web view in it and also then has some capabilities of launching a simple web server running mobilely on the device that hosts your ionic web app inside of that web view and then cordova and capacitor that's the cool thing also give you a bridge so to say through which you can tap into real native device features from inside your web app and that's the difference to a website running in a normal browser there this is not possible in a capacitor app that is so ionic takes this approach of wrapping your app into a webview no matter if you're using capacitor or cordova now that webview as i mentioned allows you to run your app a normal web app inside of a native app that renders this full screen browser now you could say that this has to be slower than a compiled app where you work with the real native widgets and technically that would be true such an app will be a little bit smaller because there is this extra wrapper and it is just a web page but it is super important to stress here that modern devices are so fast and an ionic app typically uses so little performance that you will absolutely not see any difference and then you just have the advantage of being able to build a cross-platform app with almost no effort at all that looks and feels like a native app that also is technically a native app and where you can tap into all the native device features like the camera you might need just that if you look under the hood it's not really compiled down to a native mobile app but instead it's wrapped into a native mobile app but again the performance difference will in 99 of all cases not matter and i do mean it like this not matter for you and you just reap the benefits we're almost done getting started in the next module i'll give you an angular refresher since we'll use angular in this course now knowing angular isn't prerequisite to this course but maybe it's been some time since you last worked with it maybe you only barely touched on it then this module will help you get back into angular and its core concepts please note that this is of course a totally optional module because well it is a prerequisite if you already know angular you can simply fast forward through this module or entirely skip it now once we're done with that refresher we'll finally dive into ionic and they're into its basics and most importantly in its component basics because ionic mostly is a component framework or library and therefore components are its core and in this module we'll dive into how to use them how to configure them and all of that even without angular no worries we'll add angular back into the app later but here you'll learn all the basics about ionic without even needing angular which shows a great strength of ionic it works with or without a framework and in this course you'll essentially learn both now once we're done with the component basics we'll connect ionic to angular and you will learn why you might want to do that and where the strengths of this combination lie and how to use both together how to inject certain ionic controllers and elements into angular components and how angular components and ionic components work together really exciting stuff once we're done with that it's time to leave the component world a little bit and focus on another core strength of ionic what it historically always did it always allowed you to build native mobile apps with web technologies so with a framework like angular and therefore in this next module we'll build native apps with a tool called capacitor which is also managed and developed by the ioniq team which we can use to take our ionic and angular web app and convert it into a real native mobile app and you'll learn how that works and how to run your app on mobile devices in this section therefore thereafter i'll teach you how to debug your ionic apps because things not always go as planned and therefore this is a crucial skill to have before we then dive into navigation and routing in ionic angular apps because switching between different pages is a task you do all the time in web apps and mobile apps you constantly navigate back and forth and this module you will learn how the angular router and ionic work together when it comes to switching between pages thereafter we'll dive deeper into ionic components and i'll give you a very thorough overview of all the ionic components and how to think about them and how to configure them so this will then really allow you to build any kind of app you want with ionix help before we then dive into styling and theming because obviously you don't just want to use components you want to make your app look good and here you learn how to do that with the help of ionic and how to properly assign your own style your own corporate identity to an ionic and angular app or basically to any ionic app you could say well what would an app be without fetching user input right and that is indeed what we'll dive into thereafter you will learn how to work with forms with angular forms in ionic apps and how to use ionic components input components in these forms so how that works together now whenever you gathered some data or you have some data in your application state management becomes an issue and therefore i have a whole module dedicated on how you manage state in an ionic angular application before we then also dive into sending http requests so that you're not limited to just managing data locally on your device or in your app but that you can also store it on servers somewhere in the internet now when you think about typical native apps and that is still one of the core focuses of ionic building native apps so if you think of such native apps what often comes to mind is using maps or the camera in there well i will cover both in this course and i will start by adding google maps in a specific section where i will show you how to add that how to unlock the api and how to use google maps from scratch in an ionic app before we then dive into native device features in general like using the camera or fetching the current user location now that is all nice but what would a real app be without some user authentication and therefore i got a whole module dedicated to showing you how to add authentication to your application once we did all that we'll have quite a nice zap and that is another important thing throughout this course we build a project a realistic project and i will demo most of these things on that project there are some side projects or smaller demos as well but i believe you learn the most if you work on a concrete example on a concrete project and therefore this is what we'll do in this course as well and once we finish that project which we'll have after the authentication section it is of course time to publish the app and therefore in the publishing section i will teach you how you can get your application into the google play store into the apple app store or also publish it as a web app because that is something you can build with ionic and angular 2. you can ship a regular web app or even a progressive web app which i will show to you as well and that's it we're then done and i will conclude the course give you some next steps but by that point by that time you will have learned all you need to build amazing ionic apps and build up on the foundation you get in this course with the official docs with other resources and of course by simply building a ton of stuff and that will enable you to build any kind of app you want with ionic and angular so let's dive in we all want to dive into the course now and we will but how do you get the most out of the course because that is really important to me i want that you get the most for your money possible now this is a video on the month course so obviously you should watch the videos go through them have a look at them and pause them if you need to take some notes or if you're coding along also take advantage of these udemy playback controls in the video player speed me up if i'm going too slow slow me down if i'm going too fast and jump back to videos you already watched to go through a concept again which wasn't very clear to you that is a normal process of learning and it is the advantage of a video on demand course you can go through it at your speed so take advantage of that now as i mentioned you should also code along you learn the most by not just watching me talk but by really writing your own code and for that pause the video also try something on your own before watching my solution do the assignments you find in this course and take advantage of all the different tools you have here now you will definitely also run into errors and you will learn in this course how to debug errors and as always i recommend that you should try to solve errors on your own because you'll learn the most if you fix your own errors google is your friend put your error message into google and often you will find a solution there now also dive into the official docs these dogs are awesome and you find all the built-in components there a lot of useful guides and a lot of useful resources that teach you how to work with ionic and might help you understand why something doesn't work the way you would think it works because it's not how the ionic team intended it to be used for example last but not least this course as all udemy courses has a q and a section where you can ask now only ask if you have exhausted the other resources also if you compared your code to mine attached to multiple lectures in this course and always to the last lecture of every module you find snapshots of the code for this module take that code and compare it to yours that also allows you to find and fix a lot of issues and only after you went through all these steps or when a certain concept is really unclear ask in the q a section but don't just ask there also answer help your fellow students because just as with coding along if you're forced to think about a problem and solve it on your own you get way more out of this than if you just passively sit there and ask and wait for help sometimes this is necessary but often you can make the difference by helping our students not just personally but also for you because you will learn even more and if you take all these things into account you should be getting a lot out of this course now that we are all on the same page regarding angular again let's finally dive into ionic and here with ionic since you learned that ionic actually stands for a couple of things also the company which is developing capacitor but here with ionic i really mean that suit of web components which is the heart of ionic and which is what you use in every ionic app which turns your app into something you could call an ionic app after all so in this module we'll have a look at these ionic components i'll give you a furrow overview of how to use them how to configure them how to compose beautiful user interfaces with them we'll dive into a lot of component demos for that and build a tiny sample application web application here not a mobile app yet we'll do this later but a dummy web application where we use a couple of ionic components and since we have so many ionic components i want to help you memorize them or maybe i can even show you a better way of learning about them and understanding when to use which component by the end of this module this will be much clearer before we dive into the components which i mentioned would be the heart of your ionic application let me go through the core building blocks of a typical ionic app though and with that i really mean an app that could run both on the web or on a native device wrapped into a native mobile app distributed for the app stores and here again these ui components these ionic components are one of the most important or actually the most important building block you need in any ionic app later in this course though we'll also learn about things like theming and styling which basically is all about adjusting the look of these components because whilst they look beautiful out of the box in your specific application you will have your own style your own corporate identity you wanna show and you wanna use an ionic doesn't stop you from doing so just because these components look good out of the box does not mean that you can't style them and we'll touch on this later in the course in a separate theming and styling module because it's so important now when we're building anything but a very trivial ionic app we'll also need to dive into navigation and that basically means that we want to switch between different pages of our app now a page here doesn't technically mean a new document fetched from a server instead you typically build a so-called single page application where frameworks like angular or view or libraries like react together with react router drive the change of pages and the rendering of different parts of your app onto the screen and in mobile apps as well there we also know that concept of tapping something seeing a new page and then tapping the back button to go back so this navigation process both in the web and in a native app that is also something we'll dive deeply into in this course now when we're building a bigger application there will also be a point of time where we need to take care about state management and actually state management plays an important role even in tiny apps but there it's very simple but the more complex your app gets the harder state management becomes and state management just in case you're not sure what this means really refers to the management of data and of information in your running app something like is the user currently sending a request and should i show a spinner that would be state or something like a list of loaded products that would be another form of state and this is also something where not ionic directly but frameworks like angular can help us and therefore we'll also dive into this later in the course now when we leave the web app world and we plan on publishing our ionic app as a real native app through the app stores then we'll have it wrapped in this web view in this real native app shell and we'll have this bridge to tap into native device features like a camera and that is another important building block of ionic apps now admittedly not so much of web apps though you can tap into some native device features there as well as you will also learn in this course but mostly in native apps where you can actually access the entire bandwidth of native device features something like face id uh touch id or the location of the user ends on all of that is possible and is made possible not by the ionic component suit but by capacitor which is also developed by the ionic team or alternatively cordova which is not developed by them but which is supported by ionic and last but not least the cli and the whole support you'll also get for the build workflow and for the publishing workflow of your app that also is part of the ionic world and that is also what we'll have a look at later in this course but for now in this module we'll dive into these ui components because as i mentioned no matter which app you're building and no matter how it looks or how complex it is and if it's just a web app or both a web app and a mobile app you will use these components so let's now dive into them now how do we use these components in a project where we imported this ionic component library and there are actually different ways of importing it as you will also learn in this course so in a project where we have this library imported we have access to this core of ionic to these components and we use them just like regular html elements and now that is really important to understand if you never worked with web components before the term might be or will be brand new to you and you might not know how to work with them well the thing is you just add them with their tags into your html code in the places where you want to use them just like regular html elements and here is an example this would be the iron button basically a button provided by ionic which wraps a native normal html button and then adds some extra styling and extra functionality to it and that's always important these web components are not just about pre-styled elements they do add javascript logic to them as well or at least they can and they often do and then this button here can be configured it can receive attributes just as you can set attributes on normal html elements but of course the attributes you can set here and the properties you could set on this button programmatically as well depend on the exact web component you're using because all the things you can configure here like the fill mode which defines which style of button this is and the color these are of course things you can configure because the ionic team made them configurable and the official docs are the place to go to learn which attributes and properties you can set on these web components and i'll guide you through these stocks later in this module so we use it like a normal html element it supports attributes and properties and these elements can also emit events and that is also quite interesting um you can emit your own events when you're building your own web components and therefore a lot of ionic components actually also emit custom events to which you can listen something like a special eye and change event for a select drop down for example and we'll see some of these events throughout the course now under the hood such a button as i mentioned is in the end a combination of the three core drivers of front-end web development it contains some html code under the hood and here we have the normal regular by default supported html elements and in the end all web components are made up of such vanilla html elements now actually a web component can be made up of other web components as well but if you dig down through all web components the one at the bottom which doesn't include other web components will only include normal html elements so that's important to understand such a web component is basically like a wrapped up piece of pre-structured html code now we don't just have html code we also have some css styling and here you actually see something special for the value for the color this war thing this is a css variable and this makes styling this web component from outside and applying a general theme very easy and we'll dive deeply into this in the styling and theming module of the course but as i mentioned a web component is not just a combination of html and css we also have a javascript portion in there which adds certain functionalities to that component which exposes properties that can be set which controls things like that we can set the color or the fill mode of that button so all of that is controlled with javascript and this is all packaged up together and basically wrapped into a javascript object you could say which you can add to the html code to the dom with this iron button selector now under the hood this also uses a technique called the shadow dom and css variables which help with encapsulating the styles of this component so that the styling applied to the elements in this component doesn't spill over to your app or to other components and the ionic web components actually also automatically load any polyfills that might be required to make them run on older browsers modern browsers support all the web component features by default older browsers don't and therefore ionic actually makes sure that these components work on older browsers as well by automatically polyfilling everything that is required now that is as deep as i want to dive into web components here because you don't need to be able to build web components to use them if you want to build them and if you want to understand everything here you can take my web component with stencil cores stansley as i mentioned in the first course module is a tool developed by the ioniq company by the ionic team that they used internally to build all these web components it's the end a tool that just makes the creation of web components easier it still spits out normal vanilla web components in the end and you can use that tool too and in this course i do cover it now maybe also interesting to you ionic is of course open source and if you visit its repository on github here under ionic team ionic you can always dive into this core folder and inspect the source code of the component you're interested in for example if you select a button here this is this iron button component there you will always find a tsx file because stencyl uses typescript and so on and in this tsx file you see how in stencil this component was created and this is not the code that gets imported into your app when you include that component this is the raw code which is actually compiled to a native component by stencil you see the raw version here but if you are learning stencil and you want to understand what happens under the hood you can always dive into the source code of this component and for example also see which properties you can set there things like the disabled property the button type the color and of course you can also see this in a more convenient way in the official docs but i find it quite interesting to sometimes dive into this official source code to understand how this actually works under the hood and how it is in this case this button is created under the hood so enough of the theory let's go back to our course project and there we created a simple project in a module one where i used uh angular with ionic to create this project what i'll do now is i will actually delete all the content here will later recreate such a project and i will start without angular i'll just add an index html file and here in vs code which is the editor i'm using i can create a new html5 skeleton by typing html and then simply hitting control space and then selecting html5 and we get this skeleton here now as a first simple dummy app here i want to build a budget planner basically a list that allows us to add expenses and calculate our total expenses so a very simple app which will still allow us to already use quite a bit of these ionic components now why am i using this without angular because whilst we will use angular for the rest of the course one of the biggest strengths of these ionic web components is that they work without any framework as well and i want you to understand this and i want to focus solely on ionic here so that you don't even have a chance of thinking that this could be angular's thing or that angular could be doing something here because we're not using angular in this simple app but no worries for the rest of the course we will use it so here i want to use just ionic and we can do that for this you should visit ionicframework.com and there developers ui components click on guide here and then simply choose packages and cdn now here you learn how you can add ionic to an angular app but you'll also find this cdn link here which you can add into any html file to include the ionic package to it and with the ionic package i mean this package of pre-built ionic web components you should add it here at the end of your head section and you can leave it just like this and actually what's not mentioned here at least not when i'm recording this you don't just need the javascript package you also want some default styles for this you can simply duplicate this import but change it to a link which you which has a rel attribute of style sheet and where you then set the ref attribute and you should point at the same link but then replace this here with css and instead of ionic.js you need to have ionic.bundle.css now we have both the styles and the javascript code and we're now ready to go and ready to start using ionics components now which ionic components can we add there are over a hundred of pre-built ionic components and you find them all in the official ionic docks now definitely feel free to browse through these docks and play around with them you can either do this here on the right where you also have some nice icons showing what this ionic does or what it's used for or just go through these grouped components here on the left now it's impossible to learn them all by heart you will learn them automatically by using but use these docs when you're building an app really do that this is your go-to reference it's always up to date it's directly generated from the source code actually and therefore this is the place to go for example if you inspect that button here that iron button here you even see an example a small example not every component has this as of now but some components do show you an example for ios and material design which is the android style and you have a description here on the left and you do have that for all components there you learn what this component does how you use it some general or important ways of configuring it like for example here setting the fill mode to clear outline or solid to define how the button looks like you have some usage examples here so simply some code examples with some different configurations please be aware that you have both javascript and angular versions which for this code of course don't differ though and then you have a list of all the properties and this is also generated directly from the source code and there you see which properties you can set and you can set all these properties also as attributes on the element therefore and which values you can pass in for every attribute so that should be very helpful in using this you see custom events that are emitted by this component so non-default html events that are emitted you have access to the default ones like click and so on as well that is the case for all web components and that will become important later when we dive into styling you see which css properties you can override for this component to control its look so there is a lot of stuff in there definitely use these stocks now let's use these stocks and let's start creating our little budget planner in that budget planner here i want to build a mobile like looking application and i basically want to have a header some toolbar at the top which displays the title of the app something like budget planner and then i want to have the main content below that toolbar where i essentially want to have a input field where i can enter um some titles some name some description of an expense and then also the value the amount of the expense have a button which i can press and then a list below of that where i basically output all my expenses and at the very bottom of that maybe a little some where i see the total some of the expenses now for this if we have a look at the official docs um this iron app and iron content here is important iron app should always wrap your entire ionic app and this basically just ensures that some general stylings and behaviors are set so we can already do that we can add iron app in here and we only use this once per html file you could say or later if you use angular which all runs on one at the same single page one html file you only use it as a global wrapper in your root component you never use this anywhere else in there we can have our iron content and this is a wrapper to our main application content now why would we add this because for example this controls the scrolling and make sure that our content generally just works it is displayed correctly so let's add iron content but i also wanted to have a header so if you go back to the official docs and you scroll to the very bottom here on the left you should find that toolbar area and in the end it is such a tool bar which i want to add now as you can learn here if a toolbar is placed in the iron header it will appear fixed at the top of the content and that is exactly what i want so inside my iron app above of the iron content i'll add an iron header and in the iron header i'll add my iron toolbar now in that toolbar i want to have a title and indeed here we see that i in title and that is a component that sets the title of a toolbar and we see a usage example here and i'm basically just rebuilding this example now so inside of iron toolbar we can add i in title and name this budget planner if i now save this let me double click that index.html file to just open it in the browser and we should see something like this we have this nice header at the top with budget planner in here and if we open the dev tools and we go to that mobile preview here by clicking this icon in the chrome dev tools we see that this also looks good on mobile devices if we simulate them now also interesting if we inspect an element here we see that here for example we have the iron toolbar this is really rendered into the dom web components are a browser feature they're not emulated like uh like angular which in the end just gives us a syntax that spits out normal html code this is normal html code now because the browser natively supports it but here we also see what's inside of this toolbar for example that under the hood a div gets rendered and another div and so on so you can dive into this here as well that shadow root here simply is related to that shadow dom concept i touched on earlier again if you want to learn all about that don't hesitate to dive into my full web component and stencil course but this is a good start now we can of course not just add these elements we can configure them as well and therefore let's go back to the toolbar and i'm just showing you this because i want you to get into the habit of using these docs because it's so important i of course know what we could configure there but i want you to understand it as well so let's go to the docs and there to the toolbar and there we learn how we could add buttons something we'll also do later in the course to for example have a button that allows us to add a new item and we see some general usage examples also with a back button which we'll later need not right now and if we scroll further down we see the properties we can set and i'm interested in that color property which we can set to primary secondary and so on to these base colors which we can also overwrite and set our own colors of course and that is also something we'll do later so let's go to the toolbar and add a color of primary maybe and if we do that we save that and we go back to our application and we reload we now simply have this blue background but please also note that the title color also adjusted it's now white and the title of course is a separate component so these components even work together here which is of course pretty cool so that is our header now what about the content inside of that content i want to have my input fields and a button to submit whatever the user entered so to say now again you can dive into the official docs to find out that there also is an iron input and you learn how to use that how to configure it and how you can combine it with a label for example inside of an iron item as it turns out to have a label next to it that behaves in a certain way for example it floats up when you click into the input so we can also copy that code snippet to add a couple of components at the same time and drop it in here and turn the link up there in a self-closing tag just so that i get auto completion back and i can reorganize the code automatically with a shortcut so that's all i did here change the link to self-close itself so back to what we added we added the iron item here with a label of position floating and the text on the label here should actually say um expense reason let's say you can of course enter any text you want and below that i'll have an iron input where i'll set the type attribute to text of course you find that in the official docs that you um can do that and if i now save that and i reload the app we see our input here where i can enter an expense reason now that is sweet let's also add another input below it where i will say expense amount and here this will be of type number because users should only be able to enter numbers here now if we save that and we reload we see that second input below the first one so that is nice but what if we actually would want to wrap this in let's say a little box instead of having it go across the full width of the screen which looks especially strange on bigger screens well that is no problem we can put it into a so-called card and you might notice card look from other pages it's pretty popular these days as always you'll learn how to use it here in the official docs we can just add our iron card element here and then take whatever should be in there and not add it directly in it like this but add a iron card content again something you learn with the help of the official docs or in this course now and in that iron card content i have my iron items now inside of the iron card but outside of the iron card content i'll also add another element supported by ionic which is the ion card header and this allows us to set a nice title in there by adding an iron card title inside of that iron card header and i'll just add a title of new expense here now with that iron card added qd app here if we now reload we have this nice card look with our input sitting in that box here which is quite neat in my opinion it still spans across the full width on bigger screens though so what can we do about that now to find a solution for the problem of our components sometimes not having the right width on different screen sizes it's important to understand that ionic in its core has three different types of components and now these are categories i came up with it's not an official turn but i think it helps if you think about these components in these terms we have components that help us with the output of data we have components that help us with layouting the page and organizing and ordering components and we have components that help us with getting user input output components would be things like iron image iron batch iron label iron title iron toolbar iron alert so basically components that mostly display things now obviously in that list there are some things like iron alert where the user can also press a button and interact with it so of course this component kind of does both but generally these components are mostly focused on getting something onto the screen which we want to display to the user layout components are not directly themselves visible but their effect is visible because they basically allow us to structure content things like iron grid which we haven't used yet but which we'll use in a second iron list iron tabs so basically components that sometimes all they have they're visible parts like iron card but which also are important for grouping things together ordering uh elements in a certain way and last but not least input components like iron button iron input iron text area so all these components that mostly are there for the user to interact with to type something to click something to tap a button these are three important categories and we had a look at elements from all these categories now since we have a component that is too wide we want to shrink that size of the card we will probably need some more help from the layout box now i already did put iron card in there you could also put it into the output box and it kind of does both it outputs something with some default styling but it also groups the things together but what will definitely help us here is the iron grid as always you can have a look at the official docs to learn more about the iron grid and actually there you are linked to a complete article about the grid layout where you can learn all the details about it but there is no need to do that right now i'll dive deeply into the grid in a separate section later in the course because it's such a complex not difficult but feature-rich component and a component that can be very useful when you're planning to build an app that should run on both mobile devices and on desktop machines as well we can use the grid here to shrink the size of this card on bigger screen sizes for that let's go back to the source code and in iron content around the content where i want to control the size you can add the iron grid component however you don't just stick your content that should resize in there because how would ioniq know how to resize it instead a grid consists of rows so called i and row elements here and each row has one or multiple iron columns so rows and columns make up a grid and now for a column you can define the size of this column which of course helps you define the size of the content because it's the iron column that holds the content you want to render so this iron card i'll cut it and move it into this iron column here and now on this item column we can use default properties and attributes we can set on this element which you find in the official docs for example we can set a size attribute we can set this to let's say 6. now by default a column is able to have a size of 1 to 12. you could overwrite this but the default is 1 to 12 which means it either takes 1 12 of the entire width or the total width and 6 therefore takes half the available width if i now save this and i go back to my app and reload we see that shrank it's now smaller it's only half as wide as the screen but of course on a smaller device this looks super ugly now so how can we get the best of both worlds have a full width look on the smaller device and take half the width on a bigger screen well for that we can actually use specialized forms of these attributes instead of setting size equals 6 we can set size md equal to 6. now supported is xs that stands for extra small sm for small md for medium and lg for large and this allows you to set the size for different screen sizes now the break points for these sizes can be found in the official docs and you can also overwrite them and md should be looking quite good here so if we now save this and i reload this on the mobile view you see we have the full width design back on bigger screens though it only takes half the width now of course it would be nice to have this centered and turns out you can do this pretty easy as well you can add our offset property and set this to free because we have 12 columns available this has a width of six so we want to have three columns of on the left and three columns on the right and this offsets it by three columns to the left and of course i don't want to offset it on all screen sizes but only on medium screen sizes and higher that's important when you add size medium or offset medium or any other breakpoint like size sm offset sm then this counts for this screen size so for medium sized screens and bigger screens so it's always like a minimum condition you could say so now with this configuration size md equals six and offset md equal three if we reload this it's now nicely centered on bigger screens and on smaller screens we still have the full available width and that is exactly the look i want here now again the grid has a lot of configuration possibilities and therefore we'll have an entire module where we spend a lot of time on the grid and i will not dive super deep into it right now i just want you at this point to understand that we have different categories of components and that you will have different tools for whether you want to output some content listen to input or you want to change the structure or size or order of your elements on the screen and the grid as well as a couple of other layout components can be really helpful with that so the application is taking shape and it's looking really nice in my opinion even though we haven't written a single line of css yet because of these beautiful default styles ionic gives us and i hope you already get a feeling for how easy it is to compose a rich user interface with nice looking and as you will see quite powerful and feature-rich components with little effort i'm explaining a lot here but code wise we haven't written that much code and we only worked in html so we got our card with the two items here now i also want to have a button to submit my inputs here we use the button before we can add a iron button element here and on that button i want to have a text of add expense but i'll actually add two buttons so i'll duplicate this because i also want to have a clear button here now if we save it just like this without any further configuration then if we reload the app we'll get two buttons that look like this not ugly but maybe you also want to tweak this and have a different look for example i want my clear button here to have a red color and this outlined look where it doesn't have a background color but only a border and a text color and i also want to have an icon in there an icon that kind of signals that this cancels the input and clears the fields and on the expense button i want to have a icon too a plus icon and yeah i want to leave the style as it is otherwise now for this let's start with the clear button we can set the fill mode to outline alternative values can of course be found in the official docs as for all components there if you explore the iron button you said that the fill mode can be set to clear to have neither a background nor a border to outline to have just a border or to solid to have a background color so here i'm going with outline and regarding the color we get these nine default colors primary tertiary and so on i can set this to danger here which is one of the default colors which will apply my default danger color which turns out by default to be red and of course you could change that but for now let's go with the default and if we therefore reload this we have this look now and please note that on an android device up here you need to reload if you switch to it for the first time we actually also get this nice ripple effect super now what about the icons now there is a built-in iron icon component here you go now actually this will redirect you to a brand new page because you could add this to any app as a separate package but the ionic package we're importing from the cdn actually has it included already so no need for an extra import it's in here and we simply throw our icon into our button if you want to use it there or wherever you want to use it in your app so i can add my iron icon in here just like this right in front of the clear word now such a icon takes a name attribute and the name in turn can be found from this ironicans.com page now if you search for clear here that doesn't look good but what about cancel or delete well what about this cross now if we click on that cross here you see the full markup down there and you see that name here is actually close so let's go back and let's enter close here as our icon name now with that i and i can add it and the file saved once you reload the page you will see your icon here and this doesn't look too bad but you can even improve the look a little bit by clearly telling the icon where it should go into the button and you can do this with a concept called slots now slots are a default web component concept which basically allows web components to reserve certain places in their built-in markup where certain content should be rendered or can be targeted to be rendered and as always if there are slots you can learn about them in the official docs so here in the uh button docs here you find examples for buttons with icons and different slots they target so with that information here on our icon you can add a slot of start for example and if you do that if you add that slot start you see the button is now the icon is now a little bit further on the left we have more spacing between the icon and the text it looks a bit cleaner now feel free to add a icon to add expense on your own now find a fitting icon here on the ionicons page it should be an icon that kind of signals that we can add something and then try adding it to that button we'll of course all do it together but here's your chance to pause the video and try it on your own were you successful let's first of all find a fitting icon shall we so here on ionicons if i search for add what about this plus button of course if you used a different one that's fine too now here we find the the code for that and we can just copy that from down there and then go back to our source code and next to add expense i will add my icon with the add button or with the add look now just as for the close button i'll assign it to my start slot to adjust the spacing and generally make sure that the button looks good so with this added if we now reload here is the plus button so these are the buttons added what about some spacing around the buttons and maybe we want to have them aligned to the right actually how could this be achieved to control general things like a margin around elements or paddings inside of elements or positioning inside of a container of a box you can use a utility feature provided by ionic or some utility features to be precise a couple of utility css classes or attributes you can add to elements to have some default css kick in you find that in the official guide there under layout by clicking on css utilities now here you find a bunch of examples and these are all attributes you just add onto an element to automatically apply some css styling to it that's a feature made available by ionic out of the box this allows us to for example add a simple diff yes we can use normal html elements in there too you're not restricted to using ionic elements only so i add a normal div here around my buttons and what we can do there is we can add a margin to add a margin in all directions or just margin vertical and you can find all of that in this utilities documentation here so margin vertical to add a margin to top and bottom and then to position the buttons on the right you can add text right here for example with that simple trick still no line of css written from our site we can add such a default look and this looks quite nice in my opinion now please note that this also has the advantage of always adding the same default margin so this means that you don't have to worry about assigning a margin that is too slim and therefore doesn't fit into the general look of the rest of the page or anything like this you can of course overwrite the default margin ionic assumes and sets but thereafter whenever you throw margin vertical or margin or anything like this onto an element you will use this default look this default margin and that helps you keep a general look uh standardized look in your application now this is all taking shape it's now time to add some logic and with logic i mean write some code that does something when either of these buttons is clicked now of course later we'll do this with the help of angular in this course but as i mentioned multiple times you don't need to do that with angular this here will work with vanilla javascript as well because we're just throwing a couple of web components into our app we can interact with them just as we can do with normal html elements and that by the way of course is also the reason why you can use ionic 4 and later versions with angular with vue with react with whichever framework you want now let's add a app.js file here and you can name the file however you want of course and let's import that file at the end of our html file right before the closing body tag here with a script import script source app.js so that this will now execute when this file is parsed and in here i want to get access to my inputs to read the values in them i want to get access to my buttons to add click listeners to them and of course i also want to output some data we entered below this card so here we're actually outside of this column and row so first of all to get access to the inputs in the button i will add ids to them you could add css classes or use the tag selectors though since we have multiple ion inputs using the tag selector to get access to them which work but would be a bit more tricky so here i'll just give this a reason or input reason id this here will get an id of input amount and for the buttons here this first button will get an id of button cancel and the second button down there this one will get an id of button confirm now obviously you can use any id names you want this is not an ionic feature these are regular html ids with these ids assigned let's go into app.js and store references to these elements in some constants like the reason input here we can get access to it by using document query selector and then hashtag to use the id selector input reason and of course this here this text here this name here should match the id name you assigned here input reason next we'll get access to input amount and for that let me just duplicate this line here name this amount input and get access to input amount so these are the two inputs of course i also want to get access to my buttons so i'll have my cancel button which i get access to with document query selector and then hashtag button cancel was the id i assigned and last but not least the confirm button with document query selector hashtag button confirm so now access to all these uh elements is or not access references to all these elements are stored in this vanilla javascript code i'm writing here i can now of course add my listeners to the confirm button for example we can add an event listener to the click event and then this function here will get executed once we click on the button and for now we can just console.log it works to check well whether it works so let me open the javascript console here on the right reload and click add expense and you should see it works now if you wired this all up correctly now that is perfect as a next step let's make sure we actually read the values we store in here and that we then well are able to validate them and output them below our card here so with our first logic added here let's now make sure that when we click this confirm button we do store the title or the description of the expense the reason and also the amount so for this i'll add a constant entered reason here where i access the reason input and since this is an input element it will have a value property we can read to get the value the user entered i'll also store the entered amount by accessing the amount input and well then having a look at the value there now we could continue with these values but i want to make sure that the user did enter valid values and for that we can add our own simple validation logic by adding a if check here and if the entered reason here when we trim that which will remove excess white space at the beginning at the end if the length is then smaller or equal to zero then the user didn't enter anything also if the entered amount is smaller or equal to zero so not its length but the real value then the user entered a negative or a zero expense amount which is not a valid amount or last but not least if for the entered amount when we trim it if then its length is smaller or equal to zero then the field is simply left empty so now i have this check and for now i'll just return here to basically stop the execution of this function and not continue any further if the values are invalid now if the values are valid then i want to continue and for now i can then console.log entered reason and entered amount here so let's go back reload this page and enter a reason here food for let's say 12.99 and add this expense and we see food 12.99 here on the right of course seeing it here in the console is nice but not all we want now before we continue though let me check the validation if i don't enter an expense uh reason then you see nothing gets printed on the right so this works and if i enter let's say a value of zero and a valid reason here then this also doesn't get printed with the expense amount of one it does so our validation works now let's make sure we actually create ionic elements dynamically in javascript code to then attach them below our card and render them with our entered reason and amount so i want to render a list of all these expenses below my card here now please keep in mind we are in the iron grid with rows and columns and i added this to control the width of my elements in the grid the list which i want to render also should have its width controlled it should not take the full page width on big screens so i will add a new ion row beneath the first one with a new ion column inside of it and in that iron column here i want to render a so-called iron list now i'll give this list an id of expenses list because i want to access this list programmatically and render items into it now iron list here is an element provided by ionic that helps us structure well list data so basically structure elements beneath each other and displaying it as a well nice list you can actually also add other features like sliding list items and these are all things we'll dive into the course later for now let's just go with the list like this and add it just like that and let's add some logic to add an iron item dynamically to that list so in app.js i want to get access to this list of expenses so my expenses list here is fetched or a reference to it is fetched with query selector hashtag expenses list so the id i added to the expenses list now we can use this reference to add new items to it and i want to add new items here where i currently console log the entered reason and amount i'll create a new item with document create element which is a default dom api has nothing to do with ionic that allows us to create new html elements and now the nice thing is these web components these custom html elements can be created just like regular html elements so here we can enter iron item which is the selector or the tag provided by ionic for this well item element and we used the ion item before already when we didn't create it programmatically we used it here to wrap our label and input iron item turns out to be an element which can be used in different situations and i'll dive a bit deeper into that in a later module where we have a closer look at components and do some deep dives on some important components iron item is one of them so ion item actually can be used in different situations it can be used to group label and input together but it can also be used inside of our iron list to wrap all the content of a single list item that basically should be rendered in a nice way so here i'm creating a new ion item and on this new item here i want to set a text content which is equal to my entered reason then a colon and then a dollar sign whoops entered reason plus then a colon then a dollar sign and then the entered value so i'm just constructing some text here where i have the reason then a colon then a dollar sign and after that the value which i simply assumed to be in dollars so now i'm setting this as a text to my new item and we can now reach out to the expenses list which we got access to here and call append child and we'll not do this again later in the course then we will use angular for all these dom manipulations i'm just doing it here with vanilla javascript to give you an introduction of feeling for just the ionic elements and nothing else so here i append a child and that child is the new item we created what should now happen is that we see that up here below our input here once we reload and we enter valid data again and here it is you see food 1299 show up below that and you can hit this multiple times you can generate more of these items now this is how you can interact with ionic components in your code and whilst we will not write this code again later angular will basically do this for us behind the scenes later so it's super important to understand that angular interacts with these web components with the ionic components just as it does with normal html elements it can render them to the dom and so on it's not angular compiling these web components to some normal html and javascript code instead this is normal html and javascript code that can be used directly with the dom apis so with the items generated dynamically let's make sure that when we do add an expense we also clear the input and let's make the clear button work for this i will add a brand new function up there um where i create a new constant which i'll name clear and this will be a function so i store a function in this clear constant to be precise where i reach out to my reason input and set the value equal to an empty string and the same for the amount input and that basically clears them right this removes any input the user entered this clear function should now be called here after we appended our item so we can just call clear here and this refers to this clear function now i also want to do that when i click the cancel button so i will therefore add my cancel button event listener down there for a click event and when this button gets pressed well i can just point at clear like this without parentheses because i don't want to execute it immediately instead i'll just pass a reference to this function to the event listener so that this will be executed dynamically when this click occurs it will execute this function for me then so with that if we reload and i enter food 1299 and i clear this is removed then you also see that the items the labels float back in if i add an expense this is also cleared but of course the expense is also added now last but not least let's make sure we show some sum some total expense at the bottom and for this back in the html code we can add a new ion row here with a new ion column and show our sum there for example by simply adding a paragraph where we write total expenses and then here i have a span which i'll use as a hook to render my total expenses in so i'll give this an idea of total expenses so that i can easily get access to that from within my javascript code and with that id added on that span we can get access to the total expenses output element or whatever you want to call it here with query selector total expenses like that so this total expenses output should now be updated with every item we add and therefore i will add a new variable up there with let total expenses which starts at zero because initially we have no expenses with every item we add here i can set total expenses equal to the old value with the plus equal sign shortcut to the old value plus the amount the entered amount and i will add a plus in front of that to convert this string which is by default any value you fetch from my input element is a string to a number and then this gets added to the total expenses we had before this updates the total expenses after updating them i can set my total expenses output text content equal to total expenses here so that this is not only stored in memory in javascript but also written to the dom so with that if we reload and i add food again with 12.99 and i also was in the cinema for 8.99 then we see our total expenses here at the bottom now the styling can be improved though especially on bigger screens now we can fix the styling by simply using the techniques we already learned about by using the grid and some of these css utility classes so let's start with the grid i can essentially just copy my grid setup i used up there so size md6 offset md3 we can copy that and add it to our other columns as well so in this second row where i have the expense list i will add it here and i will also add it to the column here where i output my total expenses with this simple change we make sure that these columns in separate rows but still columns in these rows have the same size as the column in the first row and therefore now if we add food here this looks way better in my opinion now also when i have some padding here on this output down there for that we can go to that paragraph down there and let's try adding margin here the css utility attribute if you do that and you reload you will see that now this has the same default margin as the other elements and therefore it nicely aligns here on the left so this again uses the power of these css utility attributes to quickly add some default core styles like margins or paddings to different elements with that i'd say we have quite a nice application here so we have this nice demo app in a forum that we'll never use again because for the rest of the course we'll use angular but still you learn a lot about some of the core ionic components and most importantly where to find more information about the components and how to generally use them and have a look at this app it really looks nice it really looks beautiful in my opinion and that with very little work from our side and this is the power ionic gives you and it even gives you the power to of course adjust all these styles if you need to we'll do that later in the course as well styling and theming is an important topic before we do that let's dive into a component which works a bit differently than the other components and which will then also nicely explain why using angular instead of vanilla javascript can be more convenient let's say when we enter some invalid data for example we leave the fields empty and i click add expense we want to show a little alert which warns the user that the entered value is invalid now of course we could throw an alert here invalid values this uses the built-in alert functionality every browser knows if we do that if i reload then i get this default alert here at the top but we can certainly do way better how about a native looking like alert here in the middle of the app ionic has us covered it does offer components that help us with that but if we have a look at the official component stocks we do find an alert and we find oh an i alert controller and an iron alert now thankfully you find some instructions on how to use the alert here also with vanilla javascript instead of just angular but as you will learn with angular it's way more convenient but let's focus on the vanilla javascript style for now to throw such an alert first of all in our ion app somewhere maybe here at the bottom you have to add the iron alert controller now if you add this element you'll not see any change on your screen if you reload you don't see that controller here it's an invisible element because it doesn't add any visual output it adds some functionality we can tap into we can use now to use it though we need to get access to the ion alert controller so in my javascript code here i'll add a new constant alert controller or alert ctrl and i will simply use document query selector to select that ion alert controller because even though we can't see anything on the screen it of course still is a normal web component just one that doesn't really render anything it just adds some javascript functionality behind the scenes with access to this component we can tap into this javascript functionality so with the alert controller here where i do my validation i can actually call create now this is a method provided by this alert controller component and you can learn about this method in the official docs of course it's not a default html method create takes a javascript object because with this method we create a new alert and with this object we can configure this alert and a one configuration we can set up is the message that gets displayed like please enter a valid reason and amount besides a message we can also add a header and all these fields you can set can of course be found in the official docs though later when we work with angular this will also become easier because we then have typescript support and we get some help from our ide so for now i'll just enter this invalid inputs header by knowing that this header field exists and you just have to trust me for now we can also add a buttons array which allows us to label the buttons which are displayed and control how many buttons are displayed in general and i will add one button which prints okay you can always configure these buttons in more detail and control what they do when they are tapped but for now i'll just enter this button which will then as a default always close the alert now create creates a new alert but if you save that and click the button again after reloading you won't see anything because it creates that and it does so asynchronously and it does not display it automatically instead to display the created alert you have to add then because create actually returns a promise which will fulfill when the creation of this element is done so here as an argument in the function you pass to the then block you'll get an alert element this is the element that was created and it will be that iron alert component here if you would add this directly to the dom like this it would not work as intended instead this is always created for you by the alert controller but on this alert element you can then call present to present it on the screen so now with this code added if we go back to the application reload and i tap this button we see this alert here now please also note that here it looks like a typical material design android alert if i go to an iphone and i reload that's always important you need to reload after switching devices if i click add expense not only do the buttons look different the alert style also looks as it should look on ios so this is how we can use these special components all the components which end with controller in the docs like the action sheet controller or as you just saw the alert controller but using these controller-like components will get even easier once we add angular then we don't have to place them in the dom even though we can't see them and access them like this instead we'll be able to inject them but more on that later i now want you to practice using these components i want you to build this simple application here where you can simply add a couple of courses you enrolled in like angular the complete guide and then assign your rating and show this output below the input field so it's pretty similar to what we had before some differences for example this text here is fat and you can achieve this with default html elements or css styling there are multiple ways of doing that and of course the look is a bit different here i also didn't bother to wrap this into a grid feel free to do so to restrict the width but i just want you to play around with the components and don't write the perfect app here instead i want to make sure that you know how to generally create such an app with a header and then the main content how to add these inputs with the floating labels how to add a button and then add some javascript code that does something with the inputs you should add validation so that if you enter an invalid value you actually throw an alert and then you will have used a lot of the things you'll learn throughout this module and hopefully have a better feeling for how you work with these ionic components now to solve this assignment you need absolutely no component we haven't covered thus far but still definitely dive into the official docs in case you're stuck or you're just not sure anymore how this button was configured to look like this or how this alert was shown good luck with that definitely check my solution to compare yours to it both to my video solution and the attached solution code so i'm in a new project so to say a new index.html file which just has a basic skeleton but no ionic elements in it the ionic imports here are added though for the css code and for the javascript code and my javascript file where i will add my own logic also is empty so let's start working on that ionic app and therefore as a main wrapper you should have this ion app element this ensures that everything is wired up correctly and works correctly behind the scenes so definitely add that then i wanted to have a header with a nice toolbar and a title and below that my content now you learned that a header can be added with iron header and in there we can add an iron toolbar in which we in turn can add an iron title which i'll simply set to my courses also up there though this tile up there of course has nothing to do with ionic so now i added this header and the toolbar with my own title below the header i'll add the iron content which will be the area where the main page content gets rendered now in that main content we need two inputs and then a place to output what the user entered and this of course is very similar to what we did before now as i mentioned feel free to use the grid here the ionic grid to control the width of the cells and make it look awesome on all devices i will save some time here and don't use the grid and just add my iron items instead because if you remember or check the docs iron items should be used to wrap labels and inputs that work together and that's exactly what i want to have here i want to add an iron label where i want the user to enter a course name and believe that an iron input of type text where the user can do just that enter the course name now that label will get a position of floating so that it floats nicely up when we click into the input or tab into it and that input will already get an id of input course name whatever you like so that we can later select this from inside our code now i'll duplicate design item here because i also need an item for the rating 1 to five are accepted values and here this should be of type number because the user should enter a number and i'll name this input course rating if we save that you should see something like this course name and a rating which floats up now actually i want to have a blue toolbar and that can be achieved by setting the color attribute on the iron toolbar to primary and this will automatically color it blue and watch the title color the title white that is another thing this does automatically okay so now we got the two inputs we got our toolbar here how about the button to submit this all beneath the iron items i'll add my iron button and on that button i'll set add as a text and you can of course also add an icon if you want to i don't require that from you here but you can add an icon if you want you learned how that works with using slots and so on but what i definitely want to do is i want to fix the positioning right now this button doesn't look super nice here now we can easily fix this by giving it a margin which will add a margin around the button if you do so this looks much nicer so we got two inputs in the button we now need a place to output whatever the user entered and for that just as before i'll add a i in list here and give this an id of course list or whatever you want by the way i'll also give my button an id of button add now we can start writing some code in the app.js file which i do already import here so first of all we need to get access to all these inputs and buttons or the one button we have so to get access um i will use these ids again to get my course name rating and so on and store references to these elements and constants like here the course name input i get access with document queries selector hashtag input course name we can duplicate this and get access to hashtag input course rating with the course rating input now the inputs are nice obviously we also need access to the button so let me duplicate this and add my add button constant which refers to button dash add so to the button with the id button dash add this one here and the course list is where all the entered course data should be output so let's get access to that element as well course list with document query selector hashtag course list so now with that we can add a listener to the add button an event listener to the click event which will execute well when the button is clicked and a click also counts if the user taps this on a mobile device by the way so here when we click this i want to get my entered course name by reading course name input dot value like this and also i get the entered course rating by reading course rating input.value and now the first step is to validate this to make sure that the user did enter anything at all and for the rating a rating between 1 and 5. so i'll add a if check and check if entered course name if we trim it has a length that is smaller or equal to zero which would be the case if it's empty or if entered core's rating if we trim it has a length that is smaller or equal to zero or if entered course rating is actually smaller than 1 or if entered course rating is actually greater than 5 because these values would be not allowed it has to be between 1 and 5. if any of that is the case i will return otherwise you can proceed and now the goal is to just as we did it before in this module create a new item and append it to this course list so here new item is created with document create element and there i create an iron item like this and on that new item i will now actually set the inner html content that is something new and i will set this here with backticks to use a string literal to make it a bit easier to construct the string you could also concatenate multiple strings but here i'll use the string literal to use a strong element and then we can inject the dynamic value here and this is a normal next-gen javascript syntax nothing specific to angular or ionic or anything like that here i can now simply input a variable name or an expression and the value of that expression will be rendered into this string which is generated in the end and here i will enter my um my entered course name and after that let me also add a colon here as text after that i'll add my rating and that will also be injected the entered rating and that and then i add slash five to kind of output well the rating of five possible stars so this is now simply a string being constructed with backticks because this allows us to use this dynamic injection syntax the alternative would have been to use single quotes and basically concat this string with dynamic and hard coded values and with that set to inner html so that we can use the strong element in there we can now append this new item to the list so to the course list we can call append child and then append the new item here if you do that and you reload let's try angular decomplete guide and enter six doesn't do anything is rejected one does work because one is allowed zero would not be allowed so this gives us that output um now that i look at this maybe it would be nice to have some white space here to get that um we have to use this special code here which will render a white space in html ampersand nbsp semicolon if you do that and save and enter something now we have a white space between the name and the rating okay cool so this is almost all i wanted to achieve here what's missing is a little alert that warns me when i do enter some invalid data here and of course i also want to clear the inputs once i added a value or a new item so let's start with clearing the inputs that is pretty simple all we have to do is we have to access the course name input and set its value equal to an empty string and then do the same for the course rating input this ensures that we clear both when we do enter a value so therefore now if i reload here and i have react the complete guide which of course is awesome then this looks good now of course regarding the validation and the alert you learned that this works by adding such a controller in our ionic app so i will add my ion alert controller here and we can now get access to that from inside our app.js code alert controller by using document query selector and then select iron alert controller with the tag selector here and now this alert controller can be used to construct an alert by calling create and pass a javascript object where you configure the alert and if you remember you could set a header here invalid input for example add a message please enter a valid course name and rating and if you want this is optional it will show a default button otherwise you can also set your own buttons like okay so this is now the configuration we can use to create a new alert but as you learned this alert is not instantly created and shown instead this returns a promise which eventually will resolve to the created alert element and therefore in this function we pass to the then block we get access to the alert element and then we can call alert element present and this will then actually show the alert so with this final change now if you now reload and you try to add something invalid you get this alert and if you do enter valid input like this one [Music] it of course just works so this is the finished assignment here and technically this uh was of course not super fancy we haven't built the most amazing app you ever saw but we had a detailed look at the core elements the core building blocks of any ionic app you will be building and therefore i hope this general way of thinking about these components is now really clear and hammered into your mind because it's so important and we will use it for the rest of the course of course so in this module we learned a lot about the core ionic components you learned that the official docs are the place to go to learn all about them all possible configurations because it's impossible to just memorize them you will learn them by heart over time as you use them but it is totally normal that you initially look into here and learn how you can use certain components how you can combine them and i still look into this documentation as well because there are some components which you use all the time which you quickly know how to use and which you don't need to look up but there also are components you don't use that often and then the docs are your friend plus new features might be added and you can always see them here so with that we were able to build something like this something like this application and we achieved this with just these ionic components without our own styling and the behavior is then the only thing we control with our javascript code so the behavior of the app and that is exactly where angular can help us and why we will use angular because if we will implement everything on our own this will be quite hard with vanilla javascript it doesn't have to be angular but you will definitely need some framework or library at some point of time so that you don't have to reinvent the wheel all the time for example when it comes to adding elements to the dom you don't want to do that you want to focus on your business logic and not on these nitty-gritty details which you can still easily mess up so therefore we use angular to be very precise there are three main reasons why we would use angular or any other framework because doing everything on our own will be hard especially hard will be if we have more complex logic as i mentioned we don't want to reinvent the wheel of the low level implementations we don't want to access the dom on our own we just want to control how will our dom need to change which data will need to be output like a list of products we don't want to take care about the actual outputting logic we want to control the logic behind that so adding a product validating input products fetching them from a server that is what we want to do we also don't want to do all the state management on our own because state management in bigger apps can be really hard passing the data around correctly and updating different parts in the application when some data changed somewhere else this can quickly become a nightmare and angular makes this super easy with its services so to prevent our user interface from behaving unpredictably and our application having tons of bugs we definitely want to use a state management system as the one offered by angular it's services and dependency injection and this by the way all the kind of touches on the alert controller and so on you remember this element we had to place in our html code and then get access to to create an alert with angular and ionic we'll be able to just inject this alert controller thanks to a little wrapper package ionic gives us around uh well the core components it then makes using these controller components way easier so that again we don't have to focus on adding it and selecting it with the query selector but that we can just inject it and start using it and last but not least what if our application needs multiple pages right now we always had one page in our dummy app right we didn't navigate around we didn't press a back button and go somewhere else in bigger apps you of course have that you have tabs you have a site drawer you have different pages different parts of the app like a list of products your cart and the user profile this routing could be done with just ionic it actually has its own router component but the angular router is way more powerful than that it gives us a lot of advanced functionalities and smart routing so routing correctly where we also can work with things like query params in the url and so on is actually quite difficult so we definitely want to use a finished and tested and battle proven routing solution like the angular router to have efficient fast and powerful feature-rich routing we can add in our app to switch pages and navigate around that is why we use angular because it helps us with the complex logic because we can focus on writing the logic and angular does the rest of updating the dom it gives us clear rules of how we structure our app with components directives services and so on so that we have a clear plan of building a bigger app it helps us with services bindings and with routing to transport state around and speaking of routing there it helps us with passing data and with lazy loading etc so this is why we will use angular from the next section on and i will show you in detail how to set up an angular and ionic project we already did it in section one of the course but now i will also walk you through the created project and explain how angular and ionic work together and how ionic actually leverages the angular cli under the hood we had a look at the basics about ionic and their about its component suit obviously we'll explore all the exciting parts of ionic including styling theming running it on a native mobile device and creating a real native mobile app but before we do all of that it's time to add angular to our ionic app or to create an ionic angular app to be precise as you learned in the last module ionic works with any framework or non at all if you don't want to use a framework but this course is of course about ionic and angular now i did briefly touch on why we would want to use a framework like angular instead of just ionic with vanilla javascript and therefore in this module i'll briefly dive into this again but i'll not bore you we talked about that so this will be a quick part and thereafter we'll set up an angular plus ionic project and i'll explain how that works internally and what it does and how it differs to a normal angular project and we'll then dive into how we use ionic components how we do use them combined with angular components how these components interact we'll also dive into how we can use the angular router to switch between pages and what ionic's role in that is and we'll also have a look at ionic controllers so these controller components like the alert controller we saw in the last course module and how using them becomes much simpler when using ionic angular so why would we use angular i did briefly touch on this in the last course section already and i'll just repeat it here in case you skipped that otherwise you can skip this lecture here so we use angular because when we build more complex apps where we have more and more complex logic in our javascript code we don't want to focus on nitty gritty details like updating the dom correctly managing our application state correctly these things are hard and they are annoying and we don't want to care about them we want to focus on the core logic that drives our app so all these things which will be hard like handling the complex logic where we would have to reinvent the wheel over and over again where we might introduce bugs or state management where we could get an unpredictably behaving user interface if we mess it up because we don't update one part of the app correctly when something changes in another part or things like routing where we might have some form of switching between pages but it doesn't handle advanced use cases like protecting certain routes from unauthenticated access or anything like that these are things which are relatively hard to implement on our own and hence we use frameworks like angular and of course you could use react or view here but this is an ionic angular course where angular helps us with solving these problems it gives us clearly defined rules on how we build our apps with components and directives and it takes care about the actual dom rendering so that we can just focus on the logic that changes our state our data that triggers a dom update in the end it gives us services and other means of transporting data from a to b from component to component and it also helps us with routing where we can conveniently pass data around too where we got lazy loading where we can add authentication guards and all this fun stuff this is why we would use angular instead of just ionic for very very simple apps you'll not need it and you will also always find solutions around angular if you don't want to use it other libraries or frameworks for example but this is an ionic angular course angular is an amazing framework it can be used to build extremely powerful and fast and reactive web applications and therefore it's the perfect fit here for ionic where we want to also build a fast reactive web and then also native mobile application with that out of the way we can now create a new ionic angular project and for this you should open your terminal or command prompt and navigate into the path where you want to create your project folder now we will use the ionic cli which is a tool provided by the ionic team for creating this project because that is the easiest way of setting up an ionic angular project you can find now for that to be usable in case you skipped module 1 of this course you first of all need to install node.js from nodejs.org there fetch the latest version and only if you're facing issues with that choose the lts version here so if choose the latest version download it and go through the installer it's available for mac and windows and you get a convenient installer for which you simply have to go and we do install node.js for two reasons reason number one is that it also gives us nodes package manager npm which is the de facto standard package manager for managing javascript dependencies not only in node.js projects but actually in any project that uses javascript no matter if it's a front-end or backend project and therefore our angular ionic project also will use npm to manage its dependencies and with dependencies i mean things like the angular framework the ionic framework and dependencies of these frameworks so that's the first reason npm the second reason is node.js itself even though we'll not write any node.js code in this course we need node.js because behind the scenes the angular cli and the ionic cli which we'll both use use node.js to build our project to spin up a development server where we can preview our app and so on so download and install node.js and thereafter make sure you also have the ionic cli installed now in case you need detailed instructions you can find that on ionicframework.com under developers installation and then install with cli it's this command with npm installed which you have to execute so let's copy that into our terminal here and on mac and linux you might need to add a pseudo in front of this on windows make sure you're running the command prompt as administrator by right-clicking on its executable and then choosing run as administrator and this will now install the ionic cli globally on your machine now we do need that ionic cli for things like creating new projects but also then to run our projects to build our app especially then also to build a mobile app that is something where the ionic cli will be important and this is generally our global ionic project management tool you could say now with it installed and navigated into that folder here where you want to create your project run ionic start and you saw this command in the first module of the course already this allows you to create a new project now first of all here as it tells you you should choose a project name and i will simply go with ionic angular course you can of course choose any name you want then you should pick a template and i will go with the blank template if you would use another template you would start with certain features already added in the dummy app you get out of the box but we will add these features step by step together in this course so that you learn all about them hence let's go with the blank template and this will now create a new project and install all the required dependencies of the project which will take a while and i'll be back once it's done once the installation finished you're asked whether you want to install the free app flow sdk and you don't need that um it's an extra tool offered by ionic you can find more information about it in the official ionic docs of course um there you can find out what app flow is in the end it's a service that requires you to sign up you can sign up for free and then you can also test your app a bit easier on native devices and you can even build it in the cloud which also allows you as a windows user to for example build ios apps that then however will be a paid feature and therefore i'll not show it in this course so i'll choose no here we don't need that and thereafter i created this project we could now run it with the instructions you see here but i'll actually not do that and instead open that in my editor of choice which is still visual studio code here is the created project opened in visual studio code now one quick note about visual studio code under view extensions here you can actually make sure that you install the angular essentials simply search for angular essentials up here to make your life as an angular developer a bit easier in case you don't have these extensions yet and i also used and will still use the material icon theme which you can also install from there this is optional it just changes the file icons in the project but still this is the exact same look i have so if you want to have that same look make sure to install this extension thereafter you can go back to view explorer so this is the project and it basically and that is important is a normal angular project now let me walk you through it and explain where it differs from a normal angular project and how it is connected to ionic in this project here as i mentioned generally we have a normal angular project if you explore the source folder you will find a main ts file and in the end here as you can tell we bootstrap a normal angular app you find absolutely nothing about ionic in here this is all code you find in any normal angular web application the index.html file also looks pretty normal we see the tile leader says something about ionic but other than that it's a normal html file and we do have our app root component in there now i do expect you to know how an angular application starts that this app root selector is in the end picked up by our app module which is the module we bootstrap we start our app with and the app module in turn which can be found in the app folder this defines that our bootstrapping our root component is the app component which happens to have this exact same selector app root here and therefore the content of the template of this component will be rendered in the place of this selector in the index.html file and this then therefore is mounting our root angular component to the real dom and any other component we include in our template of that root component or in then other components templates will therefore be mounted onto the dom as well and will be part of our angular application if that is something you never heard about definitely learn angular first i do expect this basic knowledge from now on so this all looks quite familiar now one thing that is new is the theme folder and here we're also using sas or scss by default though you could do that in a normal angular app as well the theme folder will be important though because here we see some strange syntax which is actually a css feature heavily used by ionic css custom properties also known as css variables and in the end this is not some hacky new feature offered by onik this is a standard css feature about which you also can learn in my complete css guide here on udemy and it allows you to define your own variables which can hold any kinds of values like colors but you can also store units you can store sizes margins you can store whatever you want in there and you can then reuse these variables and assign them in your app to other properties so somewhere else in the app we could set a background color of a div to this variable and it would take whichever color is stored in this variable ionic uses this concept heavily since this makes it easy for us to adjust the global look of our application that however is something i'll come back to in a styling and theming module i just wanted to mention it here more interesting is of course how this app now interacts with ionic how is it connected exactly if we have a look at the angular json file there we'll see that if we scroll down a bit this here is actually the build setup for our default build we would execute when building our angular app and there we do import some assets and the first interesting thing here is that we see that the ionicons so these ionic icons are included as assets that of course is not the case in a standard angular project instead ionic created an angular project for us where the configuration is already adjusted to include these icons so that we can use them in our angular app here now that is the first interesting part we also have that ionic config json file here which is very simple but in the end this will allow you to for example set the app the identifier of your ionic app in the package.json file we of course also see that we have all these angular imports but then we also have some ionic imports and especially interesting is that ionic angular import here we'll find that ionic angular package being used in our app module which is the root module of our angular app there we generally find default angular code we have our ng module we declare our app component we bootstrap it we import the browser module but then we also see the ionic module being used here and we also have these providers down there which are also not there in a standard normal web app you build with angular now this is all imported from ionic and from ionic angular specifically we import that ionic module and this ionic module here in the end as it is included in the app module unlocks all these ionic components in our angular app here now you would of course correctly say what does it need to unlock didn't you say that web components can be used anywhere by default yes but first of all we of course need to import them we need to import our ionic package and in the previous sections we did that by including a cdn link here we will never find this link because there is no cdn link or any other import link instead this ionic module will import the ionic web components but it will actually do more than that for us because why do we actually have an ionic angular package if ionic is all about having web components we can drop into any app by default why do we need a separate ionic angular package then if it should work with any framework the ionic angular package in the end is a wrapper package around the ionic component suit so you can think of it as an as a package that takes all these ionic components these web components which can be used anywhere and wraps them into a separate angular specific package or module into this angular module also which can only be used in an angular app but this is done because it makes the usage of these components in angular easier and actually also more efficient especially when we later talk about things like the alert controller modal controller so these controller like components we already had a look at so in an angular app we use this ionic angular package which gives us the ionic component suit but which acts as a so-called binding as it makes the usage of these components easier and kind of gives us a bridge to conveniently use them in a way we would use angular components as well you could say and the ionic module here does just that it basically includes all these uh web components and gives us that extra magic on top of it which will help us with for example these controllers as always purely optional but still interesting if you visit the official ionic github repository i did show you the core folder in the last module there you can find all these core web components if you dive into the angular folder here you actually can see how that ionic angular package is set up and there you will see that what it does here in the zionic module for example is it takes all these core ionic web components and simply declares them so this is all added to declarations and it does so because this simply wraps the web components into angular components so that a angular doesn't complain about unknown elements being used in its templates because by default it only accepts angular components and normal html elements and b we get additional uh features as you will see throughout this course so that is the idea behind the ionic module and this is how the angular project and ionic are connected it's a totally normal angular project and we just add ionic with this module with a little bit of extra configuration and angular json and therefore we can now start using the ionic components and features in our normal angular app now since it is a normal angular app if you open a terminal which you can deal with view terminal or with the shortcut you see there you can of course run ng-surf to bring up the development server where you can preview this app and this would work however i recommend ionic serve but this behind the scenes will only use ng surf it runs a special script but in the end that just does the same as ngserv you could say but it automatically also opens this in a new window uses a specific port and so on so i will use ionic server but it will use ngsurf behind the scenes basically here is the running project and as before i'll open my developer tools here and preview this in the mobile view so to see how it would look like roughly on a mobile device and i'll go with the pixel 2 for now so this is how we use angular and ionic or how we create an app and how the two frameworks or libraries work together time to now get our hands dirty and build a simple dummy app here so that we can also see how we use the ionic components and how we use these special controller components i did spend a lot of time talking about how angular and ionic work together but it is super important to understand that and to be aware of how the two parts do work together now it's time to get our hands dirty we do have that home component here as a default and i will actually delete that and build an app from scratch now for that i'll open a new tab in my terminal the upper tab should keep on should be kept open because this process needs to be kept running it will automatically watch your code for changes and rebuild and reload the app when it changes in the second window we can now use the angular cli to generate components so with a ng generate component or shortcut ng gz you can generate a new component in your app you can also do this by hand but this of course is faster now i want to build a very very very simple recipe book implementation i basically want to have a list of recipes and if we tap one we can view the details about this recipe therefore i'll add a new component which i'll call recipes however i want to load this as a page so i want to basically use the angular router to replace the entire content of the current page of what we currently see on the page with the content of this component now obviously pages in angular are just components but we can also use the ionic cli to generate it ionic generate and then if we hit enter you can actually select from different things you can build you can also build a component there and under the under the hood this just uses ng generate but you do have a special page element you can select here so i will choose page and then i'll give it a name which is recipes and this now executes n ng generate page recipes this is a new command added by ionic so that's another part where it kind of adjusts the default behavior of the angular project and it gives us this recipes folder and now the special thing is the naming here and that it automatically gives us a module which sets up a route for this recipes page so that we can load the entire module lazily and actually it even adjusted the app routing module already to include the pav recipes where it does include lazy loading for that recipes module so that's very convenient we get lazy loading for our pages out of the box with this command which is while use it for the creation of new components that will be used as pages now i did delete the home component so i will also delete that path in the routing setup so that i only have that root path where i now want to redirect to recipes and then the recipes path where i do have my lazy loading in place that points at the recipes page module which should be loaded when we try to reach that path here and in the recipes module we simply render the recipes page component the recipes page component is a normal angular component though and we can use it as a normal angular component in the recipes page html file we get this setup out of the box by ionic we got our iron header with a toolbar and a title i'll set the title to recipes we have to iron content with some padding added to it i'll get rid of it for now and add a paragraph where i say recipes page works now this page is loaded through the angular router as you can tell we're using the normal angular router module here in the app routing module and that is then included here in the app module so nothing special there one special thing can be seen in the app component though there we have that iron app wrapper which i mentioned should be there around your entire application and therefore the root component of our application of course is the right place to include it and in there we have this ion router outlet now that is interesting because in a normal angular app we would have just a router outlet now let's go with a router outlet and save all files and then back here the home path doesn't exist anymore so let's reload the main path it loads recipes and i see recipes here at the bottom now so this doesn't look right does it the reason for that is the way we load this the router outlet can be used theoretically because again and i will hammer this into your head this is a normal angular project and therefore we can use normal angular features like angular's routing but to get nice page transitions and the page being displayed correctly on the screen which requires things like the css height consumption of the page being set to 100 and so on to get all of that you should use the iron router outlet which in the end wraps the angular router outlet and adds some extra stylings and features and when you do that as this page reloads you will see that all of a sudden this looks correct so both works but iron router outlet is built to be used with ionic driven pages so with angular components that create an ionic page by having a header a content and so on so ion router outlet is we'll use iron router outlet in this course therefore back to our recipes page i said i wanted to display a list of recipes here so let's include a i list and now the nice thing is here in visual studio code with the angular essentials package installed i now get auto completion here in my templates thanks to this ionic angular wrapper actually which unlocks all the ionic components as angular components and i would get all the completion support for angular components here hence i get it for these ionic components too because they're all wrapped into angular components so to say so i can add my iron list here and on that iron list or in that ion list i want to render a couple of items a couple of recipes now of course we don't have any recipes yet and i will not create an overly complex app at this point we'll do that later with the course project so for now i will simply create a new file here my recipe model typescript to define how a recipe should look like and i'll use an interface here name it recipe and i want my recipes to let's say have an id which is of type string a title which is of type string an image url which is of type string and then some ingredients which is an array of strings something like bananas apples so a really simple recipe definition now in case this is something you've never seen again please go through my angular complete guide first this is a typescript feature we're defining an interface here we can basically use this as our own type and we can ensure that we therefore always work with the same data with data with the same structure in our application so with the recipe interface created here in the recipes page typescript file i will now add a recipes property which is of type recipe array and the recipe is of course my own model and therefore this type has to be imported from the recipe model file and this should not be an empty array but instead i'll start with an array that already has a couple of recipes and each recipe should have an id like r1 whatever you like it should have a title like schnitzel if you took my angular complete guide you know what i'm talking about it should have an image url and for that i'll quickly pick a lovely schnitzel image here i copied in a url you can simply find an image where on google image search later in the course i'll show you how to use the device camera but for now let's go with this hard-coded url here and i also need my ingredients and here we certainly need french fries and we need pork meat and maybe we also need some salad now i'll quickly add another recipe here and of course you can add anything you want i'll go with some nice spaghettis here and quickly search an image for that as well brought in a url and ingredient wise we need spaghetti and we need uh meat and probably also some toe tomatoes now here i got some linting error regarding my url being too long um i'll just ignore that here so with the recipes added here i want to output them in my iron list and this can be done by adding an iron item here and since i want to repeat this for every element in my ingredient list i'll dump an ng4 statement on it so using the default ng4 directive we can use in any angular project and then i'll go through all my recipes i have here so with let recipe of recipes i loop for all my recipes and in the iron item here i of course want to display the image let's say on the left and on the right i then want to have my text for that we can use a component i haven't shown you before and of course as always you'll find that in the official docs and that would be the iron avatar this is a component which can wrap the iron image and the iron image in the end is like the normal image just with some optimizations one of the optimizations being that it's only loading the image when it's uh visible so when the user can actually see it so if it scroll down outside of the current viewport of the user this will not be loaded and i'll bind that with property binding square brackets to my recipe image url here now this avatar here will get a slot of start in the iron items so that it's all the way on the left and next to the avatar i'll add a iron label here as a wrapper around my text simply and there we can use string interpolation to output the recipe title with that let's save it and let's see what we get when this application runs here this looks very nice we got this list of elements and here we already see how ionic components these ones here wrapped into angular components thanks to at ionic angular and angular works together it's time for a second page we do have our list of recipes here and that is of course neat but when we tap a recipe i'd like to display a details page where we can see the image a bit bigger and also viewed a list of ingredients for example now for that i will again run ionic generate and you could now hit enter and select page from the drop down or you simply type ionic generate page and then i'll create this in the recipes folder so i'll start with recipes slash because you can define a path to the component here and then i'll name it recipe dash detail so recipe detail is the newly created component and it is created in the recipes folder so let's wait for this to finish and it's done it again gave us a new component folder with a recipe detailed page component which does have its own module for lazy loading and in the app routing module here we now also have a new path which points at recipe detail and then loads this lazily now of course you don't have to keep that default setup though and i want to have a different one i want to have a path recipes which loads my well recipes page module but then i want to have a path recipes slash some recipe id that loads the recipe detail page now to make this work what we can do is on that recipes route here we can add children which is an array of route definitions and then the first child has a path of empty so just recipes here and this should now load the recipes page module and then i'll add a second child here with a path of colon recipe id and this defines a dynamic segment in angular which means this can actually be anything in the url so recipes slash abc which would reach this recipes slash one two three would too but then we will be able to read that value on the component that is loaded for this page so here i want to load my children i want to load this route so let's add load children here and let's get rid of this recipe detailed path down there so now this is the new routing setup i want to have if we save it like this it should recompile and it should reload and still show us the recipes if i now add slash abc after recipes then it actually loads the recipe detail page here now obviously we don't see anything on that page because we haven't added any logic but this is how the routing will generally work now now that is a good first step now let's make sure that on the recipe detail page we actually do display the details about a recipe and for that i need a global state management solution where i do store the recipes because right now the recipes are stored in the recipes page component here and that is nice for this page but if i need that data in another page i have no easy way of getting access to it yes you could somehow import the recipes page component but that is not how you do that in angular and it would actually lead to strange side effects and not be a good solution instead we want to use a angular service for that let's add an angular service and again i do assume that you know what angular services are and why we would use them we can generate it with the ionic generate command again if you hit enter you'll see that in there you can select a service of course you can also type ionic generate service and then the name or the path of the service but for now i'll go with the drop down so now i'm asked for the name or path of the service and i want to create a recipes service so i'll create it in the recipes folder and then the name of the service will also be recipes so recipes slash recipes it is and this gives me a new recipes service in the recipes folder now this automatically gets at injectable provided in root which ensures that this is provided application wide we can use the same instance of the service in any component any page of the entire app and of course here it's important that we use the same instance so that if our recipes data would change it is reflected in all components and not just in components using that specific service instance and therefore now this is our service i will now take my recipes i have set up in the recipes page and cut them from there and instead add them here to the recipe service now having the recipes in here is of course nice but now we need them back in the recipes page right now how do we do that well it is a public property so we could just access it like this however i will turn it into a private property so that we can't just access it like this and instead i'll add a method which i'll name get all recipes you can name it however you want and there i will return let's say a copy of that recipe array so that if we then would added the array returned by this method inside of the component we wouldn't add it the original array and this is simply related to how arrays and objects work in javascript and that they are reference types and not primitives attached you find an article and video where i dive a bit deeper into that in case you're interested so here i'll create a copy with the spread operator by pointing at this recipes now what this does is it pulls all the elements of this array out of it and then adds it to a new array down there and then i return this new array which is a perfect copy of the old array not of the objects in the array but of the array itself at least now i can also already add a get recipe method which requires a recipe id as an argument and this will return a single recipe for that id so here i want to return this recipes and then i can use the find method which is a default javascript method i can use on arrays and this method takes a function which will execute on every element in the array and then if this function returns true we basically tell find that this is the object we were looking for and it will stop execution and not run find on any other element in the array and give us back that element it was running on instead so the function i pass here gets the recipe as an input because again it executes this function on every element in the array and this is an array of recipes so what we get in every function execution is a single recipe and there i want to return true if this is the recipe i'm looking for and falls otherwise and therefore here in this condition i will compare the idea of the recipe i'm looking at with the recipe idea i got as an argument and if these are equal then i have the recipe i want to return and then i do return it now here just as with the array i will create a copy of that object by wrapping this whole call here in curly braces and then i can use the spread operator here as well this will pull out all the properties of the return recipe object and add them into a new object so this is now the service we can use in the recipes page and the recipe detail page and this is already angular's state management in action it isn't very complex here but writing a similar logic in your vanilla javascript app would already be more complicated and it will become more complicated throughout the course where we will have more and more complex state management so now the recipe service is what i want to use in my components and as you know we can get access to a service by injecting it into a component so here in the recipes page component i want to inject the recipes service and for that you need to define the type here recipes service and you need to import that from your recipe service file by the way in the recipe service you should also make sure you're importing that recipe model so let's add this you can click the light bulb here to get help with that so the recipe model is required because we're referencing it here in the service but back to the page now in the page i'm now injecting the recipe service and i'm using that typescript shortcut where i automatically assign the argument i'm getting here to a private property of this entire class so that i can use the recipe service anywhere in the class and not just in the constructor ngon init then always is a great place for initialization work so here i want to call recipe service get all recipes this returns an array of recipes and i want to store this in this component and therefore here i will re-add my recipes array like this but initially this is undefined and it will be set here so we'll set recipes this recipes so my local property here equal to the recipes returned by get all recipes now what all that gives us is that if i now save this it will recompile and give us the exact same look as before but now we'll also be able to tap into a single recipe on the recipe detail page let's do that next so let's get a single recipe on the recipe detail page now to get it we need the recipe id right because in get recipe we do require the id now conveniently we get that id as a dynamic segment on our path here so on recipe detail page we just need to extract that and for this we can use a default angular strategy where we get information about the activated route activated route you do inject this from at angular router is where you need to import the actuated route and this is an object which you can use an engine in it to then have a look at your param map which is a complex name but which in the end means a map of all the parameters this route receives and parameters are these dynamic url segments now this is not an object with all these segments instead it's a so called observable now observables are a concept heavily embraced by angular as you probably know and will use it a lot in this course attached you find some resources to get you started with observables in case you never heard about them here i do expect you to know the basics about them observables are basically objects you can subscribe to to get data either one-time data like when you are sending an http request or multiple times if you subscribe to something which emits new data every x seconds or whenever a user clicks somewhere or something like this this observable here will emit new data whenever our dynamic segments change even if we are still on the same page but they somehow change because we have a button that changes them in subscribe we pass in a function that will execute when we receive new data and that function will get a per map object and this now actually is the object where we can retrieve our parameters from so first of all i can check if this paramap does not have recipe id as a parameter it should have because we set it up here recipe id but if it somehow wouldn't have it which is very unlikely and unrealistic but if it wouldn't have it then we want to redirect the user here we want to make sure the user leaves the page here and i'll come back to how we can go back programmatically in a second i will also return here so that no other executes runs after this if however we make it after this check here which we should uh in most cases so we do have a recipe id we can extract it so the recipe id can be extracted from the paramap with a get and then the name of the parameter now obviously the name here and here but not this one but string names here have to match the name you set up in your routing configuration without the colon but the part after the colon this has to match so now i'm extracting my id here and now we can use the service to load it so for this we need to inject our recipe service here recipes service like this you need to import that recipes service type from the recipe service file up there and with it injected there i can now reach out to my recipe service get my recipe and pass that recipe id i extracted as an argument now this will return a single recipe and to use it in the template we need to store it in a property of our class here so i'll name this loaded recipe you can name it whatever you want and it will be of type recipe and it is a good pattern a good practice to clearly state the type an object will hold so here i say that this will actually be a recipe or null but initially it's undefined but thereafter once there is data in it it should be of type recipe and for that you need to import recipe from your recipe model so loaded recipes now where i can store this recipe i'm retrieving here like this and now we can access the loaded recipe data in the template of course in the template of the recipe detail page i want to output the image for that i'll remove the padding here and i can simply add iron image and bind its source to my loaded recipe image url and below the image here let me also wrap this into the iron grid actually to control the size of that so here i have my iron column and we'll see how we adjust it later for now i'll just wrap it in there below that in a new iron row in a new iron call you always need to have a column in your rows there i want to have a h1 tag with the title so i'll use string interpolation here and then access loaded recipe title and if we have a look at the recipe model then we also have the ingredients it would be nice to output these as well and which better uh component to use than a iron list so in a new row and column i'll add my iron list here and in there again we can use i iron item with ng4 to go through all the ingredients so i'll add a loop here let ig for ingredient off loaded recipe ingredients this loops for all the ingredients and i simply output the ingredient name here ig refers to an element in ingredients and ingredients is just an array of strings so we can directly output that here okay nice so this should work now let's have a look if it works remember the ids of our recipes are r1 and r2 and therefore if i manually edit the route here in the app and load slash recipes slash r1 we should load recipe one and here it is doesn't look too bad we can do something about the styling but it doesn't look too shabby now i actually want to make sure that my title up there doesn't say recipe detail but actually shows the name of the recipe that was loaded so here i will output loaded recipe title with string interpolation you can do this up here too not just in the content of course you can use the loaded recipe anywhere in this angular component and that should be a good first step and i also want to give my toolbar here a color of primary also by the way in the recipes page and then later in the styling and theming module i'll also show you how you can generally set all backgrounds of all toolbars to this primary color instead of having to add this manually to every toolbar but for now we'll do it manually and as this app now reloads this doesn't look too bad now let's also center schnitzel here and make sure that our image here this column in which it is has no padding and for that you can go back to the recipe detail page and on the h1 tag we can center this with the css utility attribute text center which you can learn more about in the official docs of course on ionic framework under developers ui components if you go to the guide and then there under layout css utilities there you find all these utility attributes you can add and i don't just want to center the text on this column which has my image i also don't want to have padding around it so on the column we can add no padding actually and that is something you can also learn when you dive into the official grid documentation this reloads the page it reduces the padding but if we inspect it there still is a little bit of padding around the entire grid well for that let's copy notepadding and add it to the entire grid as well and now this is gone i'm quite happy with that progress but entering the url by hand is not really how we want our users to work with our app right so how can we make sure that when we tap this we go to the second page to go to the recipe detail page when we click a recipe item we can use a feature you already know you can go to the iron item you are rendering in the recipes page which is the item you want to make clickable and you could add a click listener and navigate programmatically but you can also just use router link here as you can do in a normal angular app and that is really amazing in ionic 2 and 3 you had to use ionic's own navigation solution for going to different parts of the app and it did use angular for the components but added its own navigation now ionic fully embraces angular and it will do the same for react and view by the way and that means that you don't have to keep an eye on ionic and update when that changes and keep an eye on angular and maybe you're not able to update angular because ionic didn't update yet instead you now only depend on angular you use native angular features like angular routing as it is baked into angular and ionic only takes care about offering a nice page transition a nice animation things like that but it gets out of the way when it comes to the heavy lifting so here we can't just enter a link we want to go to when this item is tab and i want to go to a dynamic link of course because the id i want to load differs so i will bind this with square brackets to property binding and then we pass an array of segments in here and we can add a relative link here dot slash and then recipe id and this will now go to slash recipes recipe id now let's see if it works if we save that this page will reload and now if we tap this we go to this page and you have a nice animation for this page transition out of the box now going back would always be nice right where's the back button well the back button has to be added separately so you can control whether you want to have a back button on a page or not now if you have a look at the ionic docs and we go to components then you will see that if you go all the way down to the toolbar there is the iron back button now that back button here has to be included like this you wrap it in an iron buttons component actually which you would also use for other buttons in the toolbar for different actions and you give it a slot of start to position it on the default starting position of the platform typically that is on the left but depending on the platform or on the uh region people are using your weapon it could also be on the right so here i will now add iron buttons in the toolbar and give that a slot of start and in there i'll add my iron back button now on that i and back button you can also set a default ref attribute here for a cases where um this page here we are on the recipe detail page was loaded as a first page because since this is a web app we can of course reload this page and boom here we are and then we have no previous page in ionix history so to say it keeps track of our navigation moves but if we reload the app it reloads that stored stack of pages it thinks in and therefore we can give this a default back link where we say okay if you loaded this app and you don't know where we where we've been previously because maybe we haven't been anywhere previously then i want to go to slash recipes here let's say so if we save all of that as this app reloads here we have the back button we do go back now if i reload on this page here let's try it the other way around now if i go here we got the back button as well now you will notice at least right now if i tab anywhere else we don't navigate again and right now this is a known bug maybe already fixed when you're doing this it is related to a relative path being used here you can simply fix it by using an absolute path here and for now this is the easiest work around use an absolute path for navigation and with that being used you can go back forth and back as often as you want to the different pages so this is how we can navigate around and again most important takeaway you use angular features and ionic just adds animations and ionic also keeps track of your navigation moves it constructs a stack of pages under the hood so to say so that it knows that you now have a previous page you haven't gone back to and you can go back by clicking the back button because if you didn't reload the page here then this back button will even work without the default rev if i temporarily remove that you see as this page reloads now it will not work and not display because it doesn't know where we've previously been if i started on recipes now i do have the button because now ionic keeps track of that for us but more on that in the routing and navigation module where we will dive deeply into how navigation works also how we can integrate tabs and so on we added a service we added basic routing so we added state management and navigation two important features for using angular and of course we have all the other nice features of being able to just use ng4 instead of writing our own javascript logic to add elements dynamically to the dom and this shows us why using angular is nice and it also shows you that it works together with ionic just fine now it is especially awesome to see it work together with angular when we do need extra features like that alert controller remember that previously if we wanted an alert controller we had to integrate ion alert controller as a component and then we had to get access to it programmatically so that we could use it now you see i even get an error that angular doesn't know that alert controller because the ionic angular package doesn't even wrap it into a angular component as it does for all the other components the reason for that is that we now use this alert controller differently more conveniently to show you how to use it let's edit our app a little bit and let's make sure we can delete a recipe here shall we for this in our toolbar i'll add another iron buttons element slot here is primary this will be by default at the end of the toolbar and i'll add a iron button in there where i want to have a iron icon let's find a nice icon for deleting something on ionicons.com if we search for delete this trash bin here will do the name is trash so here i'll give this a name of trash i only want to have the icon so on the iron icon i'll give it a slot of icon only so in that button i'll now only have that icon that is what this does and if you now save that on the app as it reloads if we go to the detail page here you see that trash bin here now when i tap this i want to delete this recipe for that let's go to the recipe service and let's add a delete recipe method and we need the recipe id of the recipe that should be deleted of course and then i will set this recipes equal to this recipe's filter filter is another function built into default normal javascript and this will execute a function on every element in this recipes array and if this function then returns true it will keep this element otherwise it will get rid of it and i of course want to keep all elements but the element with the recipe id here so i go through all my recipes here and i want to return true if i want to keep it and false if i want to drop it so i will return recipe id equal to recipe id that would now return true for all elements where the ids are equal but actually i want to drop the element where the id is equal so i will check if it's not equal here now this is delete recipe with delete recipe added we can use it in the recipe detail component there on this button let's add a click listener and execute on the lead recipe or whatever you want to call it let's add this method in the recipe detail page component file here and in there i want to use my recipe service and call delete recipe for the recipe id we loaded here now i'm only storing it in engion in it but i do have my loaded recipe so this loaded recipe and there the id this isn't the anti-id i want to pass to delete recipe now once we're done deleting of course i want to leave that page because the data for this page will have been gone and therefore i'll inject the router and with that i mean the normal angular router from at angler slash router and after deleting here i will call this router navigate and now i will go to just slash recipes here let's see if that works it does but of course i wanted to show you how we can use that alert controller in a nicer way now for that let's say we want to ask the user whether he really wants to delete the recipe before we go ahead and do it and hence in recipe detail in this recipe detail page i want to show an alert now as i mentioned we don't include iron alert controller in our template anymore and then select it with javascript instead you can now thanks to at ionic angular simply inject your alert controller let's say and the same will work for the other controllers we'll learn about throughout the course and the type here is alert controller now alert controller and that's important needs to be imported from at ionic angular because this wrapper package gives you this convenience access to the alert controller and it does so by not giving you a default component you have to add to your templates and then access manually but by giving you a service in the end that gives you all the features of the alert controller so now we can use this alert controller service down there to create a new alert and here thanks to typescript we even get auto completion and we can see what we can set here by heading control space so we pass our object to create and in there we can see what we can set on this alert for example we can add a header of are you sure and then let's say a message of do you really want to delete the recipe and then we can add some buttons and here i of course also want to give the user the option of replying with no so buttons here will not just be an array where i have okay instead we can pass an object in here to configure a button a bit more detail and that object can have a text a role and a handler now let me add a text here and there i want to have the text of let's say cancel we can give this a roll of cancel and that will actually just close the dialogue and not do anything else and i can add a second button with the text of delete and there well indeed i want to delete this now create returns a promise which actually gives us this alert element this hasn't changed and then we can call alert l percent now i only want to delete if this button is pressed for that i can define a handler here which in the end is just defining a function and here i'm defining an anonymous arrow function that holds the code that should execute when this button is pressed so there i will delete and navigate on cancel i'll do nothing just the alert will be closed then we present this alert here that should be all we need with this alert controller being injected now which of course is pretty nice so let's wait for this and if i now click this trash bin i get this nice alert if i click cancel nothing happens but if i click delete then we go ahead we delete this and we are navigated so this now works as it should work and this is another major advantage of using angular here with the at ionic angular package we got very easy access to the alert controller and we can inject this anywhere where we want to show an alert now with the alert controller added we're pretty much done one of the missing things is that i also want to redirect here in this very unlikely case that we somehow get to this page without having a recipe in the url so i will do that there and with that i'm happy with that uh setup with what we achieved here i hope you see why using angular together with ionic can be helpful and in the end it's just a normal angular app with the ionic magic added to it you could say this therefore is of course the setup i'll continue with for the rest of the course and with which we'll build the entire course project then there's one more thing i want to show you just to make this really clear on how it works and how it works together with ionic obviously in this angular project you can still create your normal angular components which you use with their selectors in your templates so you cannot just generate pages with angular components you can still use them as you use them in any angular project so i can use ionic generate here again and as you will see besides being able to create a page i can also create a normal component so let's go with that of course you could have typed ionic generate component as well and the path will be recipes recipe item here and this will simply be a single recipe item which i output here in my list so i will grab this iron item code here from the recipes page component and add it to the html file of my recipe item component so this is now not a full ionic page it is just keeping or containing some ionic components and it could also just contain other angular components or normal html the key takeaway is this will not be rendered as an ionic page i also don't want to have ng4 on this iron item here instead in recipe item i want to have a property recipe item maybe which will be a recipe so it will be of type recipe and therefore you should import recipe from the recipe model file and this will be bindable from outside how does it work in angular well you add add input in front of it right and input is imported from at angular core so you can continue building these normal angular components with inputs outputs and so on here we're using an input and make recipe item bindable from outside therefore in the template of recipe item i can use recipe item here and here because that is the name of my property now of that bindable property we can now start using recipe item by its selector in our recipes page now recipes module was automatically updated by the ionic cli and it added recipe item component there to the declarations which is correct because i want to use it in this module i want to use it in the recipes page so declaring it in the app module or anything like that would have been wrong you have to declare it in the module where you use it and we do use it here so now in the recipes page component file here we can use app recipe item that is the selector of the component that was created you can of course see that here in the component typescript file and all we have to do is we have to pass in a value for our recipe item now this can be done by still going through all our recipes with ng4 here so recipe of recipes this doesn't change and that recipe is then forwarded as a recipe item to the app recipe item component and with that if you save that it should now rebuild and work in exactly the same way as before here we have our items and we can still tap them and navigate around so this works as before and i'm simply showing you this because i really want to make sure that you understand that this is a normal angular project and you can build angular components as you're used to and indeed if you compare angular components and ionic components you'll see that you use them in a similar way inside of your angular project of course angular components are created by you with that component or you're importing some other third-party library and actually as i mentioned at ionic slash angular this package in the end wraps all the ionic web components into angular components so technically these also are angular components now but they're only thinly wrapped in its core they're still web components so we create our own components with that component we use them inside of our angular templates and that's the only place where we can use them angular will render them to the dom for us we'll render the content of their templates to the dom for us and as i mentioned we can only use angular components in an angular app ionic components well ionic ships these pre-built web components and you can't edit them they're open source but you can't edit them they will not allow you to merge your changes into the ionic repository without a very good reason ionic components use native web technologies they are web components and yes they are wrapped here by at ionic angular but in its core there are still web components in there and you can therefore use these web components anywhere in any project anywhere not just inside of angular apps and i mentioned this a couple of times i think it's pretty clear now it is just important to understand which is why i'm emphasizing this over and over again so that's it with this first angular anionic module this is of course a very simple application we built here we'll build a way more complex application for the rest of this course but i hope that it's now clear how ionic and angular work together that you still only build a normal angular app here but you can use these ionic components that using ionic components is easier especially when you think about things like the alert controller and therefore we now have the best of both worlds let's use that best of both worlds to build amazing apps then what we get thus far in this course is a nice looking web app and that might be all you want to build that is already a part where ionic with its beautiful and feature-rich components can help you but of course historically a big selling point of ionic always was that you can build cross-platform applications that run not only on the web but in the past actually primarily on native devices as real native apps you distribute through the app stores and that hasn't changed just that web apps are now a more realistic option and a fully supported platform as well so in this module we'll focus on the native apps and i will show you how to create apps for android and ios and how to run your app on these devices i'll run it on emulators here but running it on real devices will be exactly the same process so let me show you how you turn your web app into a mobile app now i will continue with the app we built in the last course module this very simple recipe app built with the help of angular now as always the official docs are your friend if you get stuck if something is unclear you find step-by-step instructions here under a guide and then under running on ios or running on android there you'll learn all the steps you need to execute to turn your web app into in this case here an android app and here for ios now important you need to have certain tools installed to succeed here and also important if you're building locally on your machine then you actually need to be on a mac os system to build for ios you can't build ios apps on windows unless you're using ionix paid service app flow that is something you can do and you can learn more about that on ionicframework.com there you can build your app in the cloud instead of on your machine and then on the cloud it can be built on a mac os environment but this is a paid service i'll not be covering it here so if you build it locally as we do then you can only build for ios on mac os systems android apps can be built on both mac os and windows systems as well as linux so what are the requirements then now i want to start with android development and to build your app for android or ios i will use capacitor now you can actually use capacitor or cordova both are tools that in the end can take a web app and wrap it into a native app cordova has been around for a couple of years and in the past ionic only used cordova it still fully supports it but the ionic team now also built their own tool capacitor which does essentially the same but gives you in my opinion nicer api and in this course we'll use capacitor which is under heavy development and will probably see quite an exciting future you can learn more about capacitor on capacitor.ionicframework.com and there in the docs you also learn all about how to use it how to tap into native device features and so on things we'll do later but you also learn how to set up your machine to be able to build for android and ios to start with android here under android click on getting started and there you learn how to configure your machine to build android apps what you'll learn here is that you need to install the android sdk the android sdk tools or build tools in this version or hire and this might change over time so definitely check this page out and you need the android sdk platform api 21 or greater now this is all installed automatically or you're asked to install it automatically when you do install android studio and android studio is a tool you need as well you can google for android studio to find a link to its official page and there you can download android studio onto your machine and then walk through the installer android studio is the official android development environment and will not write code in android studio but we will use it as a build tool so ionic capacitor will use it behind the scenes to create that native app wrapper into which it injects your mobile app you could say so therefore you should download android studio from this android studio page and this will give you an installer for mac and windows and linux through which you can walk now when going through that installer make sure you do install the android sdk tools and the android sk sdk platform as destructed here and if you don't do that during the installation you can still do it thereafter from inside android studio i already do have it installed by going to configure sdk manager there and then here you want to choose an sdk which has at least version 21 or higher and under sdk tools you want to install these android sdk build tools here you also want to install the android sdk tools here in the latest version you see and the platform tools as well i also recommend installing that emulator that hacksam installer here to speed up your emulator if you're running an android emulator to test your app on basically you can also set all the other check marks you see here and also make sure you do install the android emulator um i do have a slightly outdated version here so i'll update it now but you should simply tick this box here and then once you press apply this will install all the things you checked onto your machine and this will install all the tools you therefore need to build android apps with that all installed you can go back to the ionic documentation to see the rest of the steps we can use the ionic cli to basically add android as a supported platform in our project and you do this by inner terminal navigate into your project running ionic capacitor add and then either ios or in our case here android and this will now set this project up such that you can build an android app with it to put it simple it will install an extra package capacitor core and do a couple of other things in configurations and actually add a brand new folder with your android app inside of it now i actually got an error here the capacitor could not find the web assets directory and then this path here now this is pretty normal if you never build your app simply run ng-build to fix this ng-build will now build your angular app and you always need to do that before you can turn it into a native mobile app because you will wrap your finished build app into that native mobile app so once this build process finished you got this www folder and that is exactly the folder that was missing so let's now rerun ionic capacitor at android and now this should succeed so let's wait for that to finish and here it is so now it is finished and you should now have a new android folder in there now this is the android app and this is actually a folder you could now open in android studio to launch your app this is the native app so to say it holds all the code for the native app and it also will hold your web app bundled into that native app now if you have a look at the official docs you also see what you would do if you were to use cordova which i'll not cover here though for us the next important step is that we want to set the package id for this app you can set that in the capacitor config.json file here it's this app id and i will name this here to com udemy course ionic angular you typically use an identifier that looks like a reverse url here and you're free to use any identifier you want the idea here is that your app has a unique identifier that differentiates it from all the other apps in the app store now with this setup what we can do is we can run ionic capacitor copy android now this is a command you should always execute after you created a new build with ng build because ionic capacitor copy android will basically copy your www folder into this native app and bundle it into that again so to say this is a command you have to run before you can run your native app and see it you can also type ionic capacitor run android and what this will do is it will execute all these previous steps for you it will run ng build essentially and thereafter it will copy the www folder into the native app for you so it does all of that and it then even opens the android folder in android studio and that is important because you can launch your app from inside there now so when this opens for the first time let it finish all its tasks it's executing there they should all finish without errors so let's wait for that to finish on the first load this will take a little longer subsequent loads will be faster no worries and here it did finish this error here actually is just a warning we should be fine and now we can launch our app now for that we need an emulator up and running and you can go to tools avd manager here to create one now i already created a couple of virtual devices here on the bottom left you can click on create virtual device to build a new one then choose any of these blueprints like the pixel 2 click next choose the latest stable version of android here and then simply finish this you should be able to use all the default settings now you can launch such an emulator by clicking that green play button there and this will now open up that emulator here it is and there you can see your app now you can also connect your real device cue your computer and turn on the developer options there after this lecture here you'll find a lecture where i explain how it works and then run the app on your real device that works as well here i'll go with the emulator let's wait for the emulator to finish booting up so here it did now finish booting and now back in android studio remember this is the android folder from our project which was opened there for us by capacitor you can now click that green layout icon here and then choose the emulator or connected device you want to run the app on and here i'll use that connected emulator which is already up and running and press ok and this will now actually build the native app that wraps your web app and then automatically install it on that emulator or real device and launch it there so let's wait for that to finish the build process succeeded it's now installing this app on the emulator on the connected device here and here the app is now the startup time here on my machine is not super fast because i'm also recording and everything so this machine here is pretty on its limit it actually does start up quite fast and you can demo this by connecting a real device because emulators also always are a bit slower now here what we can see though and again any uh lag here is really just caused by me recording we can see this application works exactly as it should work and exactly as we saw it in the browser but now this is a real native app on our emulator here installed as a native app there now for the majority of the course i will actually keep on developing here with the help of the browser simply because that's easier to debug it updates faster and so on but being able to build that native app and see it run here of course is a core part of ionic and this is how you do go through that process now one note of course when you run ionic capacitor run android all these steps are executed for you and with the emulator up and running all you have to do is press that play button but you can also execute ionic capacitor run android with dash l after it which stands for live reload now what this will do is it will actually not build the app but run ng-surf and therefore run the same command we used before for having the server to visit it here in the browser and then it gives you a native app that actually talks to that server running on your mac or windows machine and that will automatically update the app on the native device when your code changes so you get the same behavior as you do in the browser with live updates on the native device now and you don't have to rebuild the app after every change you want to see reflected here now from my experience this live reload process is a bit clunky and sometimes doesn't work perfectly but generally this is a nice thing to have and definitely something you should experiment with because it can be really useful and can speed up your development flow if i now build a start this app again here after i started this live reload process and build my app with that and now with that app running again if i now change something in code let's say on the recipe page here where i have recipes as a title title if i add an exclamation mark and i save that it will now rebuild because i have that server up and running which was started by ionic capacitor run android l and by the way you can therefore now also connect to that on your browser again and you will see your changes there but now this all the live updated as you can tell here in the native mobile app and that can speed up the workflow when you want to preview your changes inside of your real native mobile app and not just in the browser and let me also emphasize one more time this is a mobile app as you could install it from the app store this is not the browser on the mobile app hosting the web app this is a custom native mobile app in the last lecture we had a look at getting the app up and running with android now maybe you're not developing for android or at least not exclusively but also for ios and for this in the official ionic docs under a guide here you should also check out running on ios now again i will use capacitor you could use cordova and here you will also find steps on how to use cordova but capacitor is developed by the ionic team and i see the brighter future for that and therefore i will go with capacitor in this course now you can run these commands to set up your app for ios and run it on an ios device but first of all you need to make sure that you have the ios development environment set up since we use capacitor you can visit capacitor.ionicframework.com and then go to the docs there and there you'll find an ios section here you find a detailed description of what you need to have set up on your machine to build ios apps and in detail that is xcode version 9 or higher and you should check these docs for updates if that changes and the xcode command line tools now you get xcode from the app store on your mac and as i mentioned before you need a mac to build ios apps on your system in the app store you can search for xcode and i already do have it installed if you don't install it from there it's free you also don't need a paid apple developer account for this with xcode installed you need the xcode command line tools and you get these by opening your terminal on your mac and then you can type xcode dash select now if this gives you something like this so maybe an error but just an error that you didn't choose a specific command you already got them installed only if it tells you something like command not found or operation not found then you don't have it installed and you can then simply install them by typing xcode select dash dash install and this will now install the xcode command line tools now i already have them installed hence i don't need to do that but if you don't well then this command here gives you the xcode command line tools with all of that installed you can go back to the ionic docs and use the commands here to add ios as a platform to your project and then also run your app on ios so back in the project i'll start with ionic capacitor add ios this command enables ios as a platform in this project here however i get an error regarding my app id dashes are not wanted here actually so make sure to remove them now let me try this command again and what this command does is just as before we got the extra android folder now we get the ios folder and this is a folder you can open with xcode and it has the native xcode app in there which will wrap your web app your ionia app now with that created the next step is that you build your project with ng build because you can only ship that build project into your uh native app wrapper so to say um you will also learn how to have a dynamically reloaded app up and running and connected to your ios device by the end of this video here but for now let's go with that build process this spits out a www folder and that contains your build angular project you can now run ionic capacitor copy ios and this will copy this www folder into your ios folder and basically into the place where it needs to be for it to be wrappable by this native app you get out of the box by capacitor you can also run ionic capacitor run ios and this will combine the build process and the copy process for you that of course is the more convenient command therefore so this is the command i will from now on use but behind the scenes it does the two steps you saw before now it does not only copy your files it also should open xcode for you now and it does not only open xcode but it opens xcode with your ios folder already selected there so this is inside of your ios folder now now for this to work you should select app in xcode and then here under signing make sure you select a team if you don't see a team here add an account and simply log in with your apple id here and make sure you do also create an apple developer account for this id you can do that on developer.apple.com and then you sign in with your apple id and basically sign up to be an apple developer this is free there is a paid version but you'll only need that once you plan on shipping your app to the app store as long as you're only developing you don't need to pay so thereafter select your team here and now the error here should go away if there still are errors there also should be a description on how to get rid of them now with that set up and you will need to do that whenever you delete the ios folder and re-edit with ionic capacitor at ios so with that set up you can now run your app here you can choose a simulator you want to run the app on and if you have a real device connected to your machine you'll be able to choose that here as well a real iphone i mean and then you click that play button and this will now build the app you can ignore any warnings you see here it will build the native app the real native app you're getting wanna emphasize this we're talking about a real app here it will start a simulator if that isn't running already the simulator you selected basically and it will then start the native app in that simulator and that native app is that wrapper around your ionic app in the end so let's wait for this to start up and here is our application coming up and the first start can always take a bit longer here don't worry about that it will be super fast once you do deploy it onto a real device and test it there and now here we got the behavior we saw before and we also see of course that we got the ios specific back button and so on so this looks really really nice we do get the look and feel we would expect it to have from the web app we built before so now this is our app running on a native device on ios but of course it's a bit cumbersome if we always have to rerun ionic capacitor run ios and then press the play button here whenever we change something in the code we want to see here and indeed there is a simpler method you can run ionic capacitor run ios with dash l added after it l stands for live reload and now this will not run ng build but ng serve actually and it will bring up that development server we already connected to before from our web app and you can indeed connect again from the web app and it will do the exact same steps as before otherwise but now if you start the app and you have to restart it once now stop the old process restart the new app now this app will be connected to your live reload server so now whenever you change anything in your code the app here will automatically reload just as the app in the browser does let me demonstrate this if i go to my recipes page here and i add two exclamation marks after recipes in the title then here's our web app i have one exclamation mark here from before when i showed this uh in the android video we can reload this too by the way this is connected to the same development server and here we do see the two exclamation marks but we also see them in the native device on the emulator and this of course can speed up your development workflow because now you can write your code change it and have your changes reflected on the emulator or the real device instantly or pretty fast at least now to my experience this can be a bit clunky and sometimes you get results that actually differ from the results you get when building it and then running it manually so therefore this will not be my primarily development process instead i will stick to the browser app simply because it's faster and easier to debug but now you know how you get that native app too how you can test your app on the native device and obviously will test it there from time to time in the course as well so in this module i walked you through capacitor and i explained how you can use capacitor to get a real native app that holds your ionic app for both android and ios you saw how you can easily build your app for android and ios and run it on emulators or real devices through android studio or xcode you also saw that live reload mechanism and i did mention that i will stick to the web app for now because it's a bit faster and easier to debug nonetheless now we know how to build a web app we know how to build our native apps and that already allows us to build apps for free platforms with one and the same code base and that is just amazing now let's continue with ionic now and with developing ionic apps because now we know how to turn them into what we want them to be well now we can focus on the logic inside the app again that's it for the introduction you learned how ionic works how you can use the many built-in components and how you can build amazing applications with ionic and with angular and why you might want to use angular you also learned how you can use your ionic angular web applications and turn them into real native applications with the help of capacitor now if you want to dive even deeper and learn way more then i strongly recommend taking my full course you'll find a link to that course with a very nice discount below the video in the video description and i'd love to welcome you there in that course you will learn things like styling and theming your ionic angular apps adding features like google maps or accessing the device camera locating the user authentication and much much more the parts you already saw in this video are actually taken from that course and therefore if you decide to go with the course you can skip all these fundamentals and dive right into the next more advanced parts i'd love to welcome you on board of this course and hopefully see you there you

Channel: Academind

Views: 641,113

Rating: 4.93541 out of 5

Keywords: ionic 4, ionic4, ionic, ionic angular, ionic 4 angular, angular, ios, android, capacitor, tutorial, course, full course, complete course, ionic 4 crash course, ionic 4 learn, ionic 4 tutorial, ionic 4 course, ionic 4 full course, maximilian schwarzmüller, maximilian schwarzmueller, learn ionic 4, learn ionic, ionic tutorial, ionic 4 angular how to, ionic 4 how to, ionic 4 app, ionic app, ionic how to, ionic full tutorial, ionic for beginners, ionic 4 for beginners, academind

Id: r2ga-iXS5i4

Length: 234min 13sec (14053 seconds)

Published: Thu Mar 07 2019