Ionic 4 & Angular Tutorial For Beginners – Crash Course

00:00:04 welcome to this course
00:00:05 i'm super excited to have you on board
00:00:08 in this course we're going to dive into
00:00:10 ionic
00:00:10 with angular as you will learn ionic is
00:00:13 an amazing framework
00:00:15 that helps you build mobile apps with
00:00:18 web technologies
00:00:19 and indeed in this course we'll learn it
00:00:21 from scratch you will learn all about
00:00:23 aeonic it's many components it offers
00:00:25 its building blocks it offers and we
00:00:27 will build real mobile apps that we
00:00:29 deploy to the apple app store and the
00:00:31 google play store at the end of this
00:00:33 course
00:00:34 but even better than that ionic allows
00:00:36 you to build
00:00:37 cross-platform applications which means
00:00:39 you have one code base
00:00:41 and you get mobile apps out of it as
00:00:43 well as a regular web app and that's
00:00:46 also what we'll cover in this course now
00:00:48 as i already mentioned
00:00:49 this course is about ionic and angular
00:00:52 angular being an amazing front-end
00:00:54 framework that makes building such apps
00:00:56 even easier
00:00:58 therefore in this course you get both
00:00:59 and you just need the angular basics you
00:01:01 don't need to know anything about ionic
00:01:03 and there even is an angular refresher
00:01:05 in this course
00:01:06 in case it's been some time since you
00:01:08 last worked with angular
00:01:09 i also strongly believe that you'll
00:01:11 learn way more
00:01:13 when you're building something practical
00:01:15 and that means that in this course we'll
00:01:16 build an entire course project
00:01:18 we'll plan it and then build it step by
00:01:20 step adding features like navigation
00:01:24 user interaction fetching user inputs
00:01:26 showing modals and alerts
00:01:28 adding authentication sending http
00:01:30 requests to the backend
00:01:32 using the device camera adding google
00:01:34 maps and so
00:01:35 much more now this is what's in the
00:01:38 course
00:01:38 who am i my name is maximilian
00:01:41 schwarzmuller and i'm a freelance web
00:01:43 developer
00:01:43 and five star rated instructor here on
00:01:45 udemy
00:01:46 i got many courses on web development
00:01:49 including the biggest and best selling
00:01:51 course on angular
00:01:53 i also created an ionic course in the
00:01:55 past discourse actually
00:01:57 but i did re-record it entirely when
00:02:00 ionic 4 was released
00:02:02 because that marked a breaking and
00:02:04 important change in the ionic history
00:02:06 as you will also learn in this course so
00:02:08 this course is fully up to date and it
00:02:10 uses the latest technologies and the
00:02:11 latest best practices
00:02:13 to allow you to build cross-platform
00:02:15 applications
00:02:16 with web technologies with ionic and
00:02:19 with angular
00:02:20 and with that let's dive right in and
00:02:23 let's learn
00:02:23 what exactly ionic is and how it works
00:02:30 so what is ionic in the past this would
00:02:34 have been a bit easier to answer
00:02:36 because ionic evolved quite a bit across
00:02:39 the last
00:02:40 years and i'll come back to a brief
00:02:42 history and future outlook
00:02:44 later in this module so assuming that
00:02:48 you don't know
00:02:48 anything about ionic which is fine this
00:02:51 course is for you
00:02:52 just as it is for people who know a
00:02:54 little bit about ionic or have worked
00:02:56 with
00:02:57 older versions of ionic ionic in the end
00:03:00 is all about having one code base
00:03:04 which is the code base for a web app and
00:03:06 therefore uses
00:03:07 html javascript and css so what you
00:03:09 would use to build
00:03:11 normal user interfaces in the web
00:03:14 and you use these tools and these
00:03:16 techniques and these languages which you
00:03:18 already know and take some magic to
00:03:21 which i will come back

00:03:22 in the next few seconds edit by ionic
00:03:26 to generate web apps progressive web
00:03:29 apps and i'll come back to what this is
00:03:30 in a second too
00:03:31 ios and android apps and if you want
00:03:33 even electron desktops
00:03:35 electron is a certain technology that
00:03:38 allows you to wrap a web app
00:03:40 into a desktop app so to say so you can
00:03:43 build
00:03:44 an app for different platforms with one
00:03:47 and the same code base
00:03:48 with minor adjustments as you will learn
00:03:50 in this course but really minor
00:03:52 adjustments
00:03:52 not big ones and that of course is a big
00:03:55 selling point
00:03:56 you can use your existing knowledge and
00:03:59 get different
00:04:00 apps which allows you to distribute your
00:04:02 app on different channels
00:04:04 now regarding that progressive web app
00:04:06 part a progressive web app in the end is
00:04:08 a normal web app that looks and feels a
00:04:11 bit like a native
00:04:12 mobile app it isn't a native mobile app
00:04:14 you don't distribute it through the app
00:04:16 stores
00:04:17 it's still a website which you can find
00:04:19 via google and so on
00:04:20 but it's optimized to be reliable which
00:04:23 means it even works
00:04:24 offline or parts of it work offline it
00:04:28 should be
00:04:28 fast and give the user instant feedback
00:04:31 upon actions
00:04:32 and you also want to have an engaging
00:04:34 app which is able to tap into some
00:04:36 native device features
00:04:38 like using the location of the user or
00:04:41 the camera
00:04:42 and with ionic you can build such a
00:04:44 progressive web app you can also build a
00:04:47 normal web app which
00:04:48 isn't particularly fast or which doesn't
00:04:51 tap into native device features
00:04:53 and you can also though get a real
00:04:56 native app out of it so that you can
00:04:58 really
00:04:58 target the broadest range of channels
00:05:02 possible now let's dive a bit deeper
00:05:05 into the ionic platform then
00:05:07 because it's nice that we know that with
00:05:09 ionic we can build such
00:05:10 cross-platform apps but what does this
00:05:13 mean what really
00:05:14 is ionic how does it do that what's this
00:05:16 magic ingredient
00:05:17 it adds the ionic platform
00:05:21 as we should call it is all about ionic
00:05:24 which in its core
00:05:26 is a set of web components now web
00:05:29 components on the other end are a
00:05:30 technique a technology supported by
00:05:33 modern browsers
00:05:34 which allows you to basically build your
00:05:36 own html
00:05:37 elements that behind the scenes have
00:05:40 more complex logic
00:05:41 something like a tabs component let's
00:05:43 say where the user can toggle between
00:05:45 different tabs
00:05:46 in the past you could build something
00:05:47 like this on your own by writing your
00:05:49 own html
00:05:50 adding your own css and adding your own
00:05:52 javascript logic
00:05:53 ionic gives you such a functionality
00:05:55 packaged up in a finished
00:05:57 ready-to-use web component and it has
00:05:59 lots of web components you can use
00:06:02 that is the core of ionic this suit of
00:06:05 nicely styled platform agnostic
00:06:09 and automatically adjusting so that you
00:06:11 automatically have to look off the
00:06:13 platform you're running on
00:06:15 web components which you can dump into
00:06:17 your web project
00:06:19 so these custom html elements could be
00:06:21 built by you
00:06:22 but with ionic you don't have to you get
00:06:24 a finished suit
00:06:25 of such web components now these web
00:06:28 components therefore are what you can
00:06:30 see on the screen
00:06:31 but ionic and the ionic ecosystem is
00:06:34 more than just that
00:06:35 because ionic is not just a suit of
00:06:37 components ionic is
00:06:39 also the name of the company who

00:06:41 developed or which developed these
00:06:43 components and this company has more
00:06:46 than just this component suit
00:06:48 it also worked on a tool named capacitor
00:06:51 now capacitor is essentially a tool
00:06:54 that is capable of taking your existing
00:06:56 web app
00:06:57 and wrapping it into a so called web
00:07:00 view
00:07:01 into a native mobile app so in the end
00:07:03 it gives you a native mobile app
00:07:05 that runs your web app inside of it but
00:07:08 in a way
00:07:09 that is indistinguishable for the user
00:07:11 to
00:07:12 a normal native app because it is a
00:07:14 normal native app
00:07:15 just with well a web app included in it
00:07:18 but it looks and feels like
00:07:20 a regular mobile app which you build
00:07:22 with native mobile controls
00:07:24 as you will see in this course and
00:07:26 that's amazing because this allows you
00:07:28 to take your web app
00:07:29 and convert it into a mobile app easily
00:07:32 now if you're a little bit more
00:07:33 experienced in this area you also might
00:07:35 know
00:07:35 cordova which is a similar tool doing
00:07:38 something similar
00:07:39 capacitor is basically a more modern
00:07:42 version of that
00:07:43 built from the ground up by the people
00:07:45 at ionic who have a lot of experience
00:07:47 with that
00:07:48 who used cordova in the past but now
00:07:50 have their own solution which we'll also
00:07:52 use in this course which is super fast
00:07:54 super easy to use and makes it really
00:07:56 easy to build native mobile apps
00:07:59 so this is the part that allows us to
00:08:01 use our web app and run it on a native
00:08:03 device as a native mobile app and not
00:08:06 just as a website opened in the browser
00:08:08 now last but not least the ioniq
00:08:11 platform
00:08:12 so the set of tools we use from the
00:08:14 ionic echo system
00:08:15 also has the ionic cli which stands for
00:08:18 command line interface
00:08:19 which can work with other clis like in
00:08:22 this course the angular cli which you
00:08:24 will use behind the scenes
00:08:26 which helps us create ionic projects
00:08:29 manage them use capacitor to convert our
00:08:32 web app into a mobile app
00:08:34 so basically which helps us with the
00:08:36 entire build workflow
00:08:38 that is the last important part from the
00:08:40 ionic world
00:08:41 we'll be using this makes developing
00:08:44 simply easier
00:08:45 faster and allows us to finally build
00:08:48 and
00:08:49 package our app up now this
00:08:52 is the ionic platform these are the
00:08:54 tools you will learn about in this
00:08:56 course in detail and this is just a big
00:08:58 picture here obviously
00:08:59 and this is what ionic gives us to build
00:09:02 amazing web apps which can
00:09:04 work and run as web apps but then they
00:09:06 look like
00:09:07 native mobile apps already thanks to
00:09:09 these nice
00:09:10 ionic web components which by the way
00:09:12 are also not just about the looks
00:09:15 but also have a lot of rich
00:09:16 functionality included in them
00:09:18 like this tab functionality i mentioned
00:09:21 earlier
00:09:22 but then ionic doesn't stop there
00:09:23 doesn't stop at that web user interface
00:09:26 it then also gives you the tool to build
00:09:28 that in an easy way
00:09:29 and to then also convert it into mobile
00:09:32 apps or even desktop apps
00:09:34 if you want to this is the ionic
00:09:36 platform in its core
00:09:38 there are also a certain premium and
00:09:40 cloud services offered by ionic
00:09:43 for some of them you have to pay others
00:09:45 are free i won't dive
00:09:46 too much into them in this course but i
00:09:48 want to mention nonetheless
00:09:50 these services allow you to build your
00:09:52 app in the cloud
00:09:53 for example if you want to build an ios
00:09:55 app on windows this would be possible
00:09:57 with the services

00:09:58 and they also have other services for
00:10:01 easier development or previewing
00:10:03 and you can find all of that on their
00:10:05 official web page
00:10:06 which i'll also show you in a second but
00:10:08 this is ionic in its core
00:10:15 now that we had this detailed first look
00:10:17 at what ionic is and which kind of tools
00:10:19 it gives us
00:10:20 let's take a closer look at this ionic
00:10:23 ecosystem
00:10:24 and for that let's go back to our
00:10:27 starting point which is that we want to
00:10:29 build a web app
00:10:31 with or without any framework so in this
00:10:33 course with angular but you could even
00:10:35 build it with vanilla javascript or with
00:10:38 react or
00:10:38 view ionic works with all these
00:10:41 alternatives
00:10:42 so you're building this web app and you
00:10:44 want to keep it as a web app
00:10:46 possibly a so-called progressive web app
00:10:49 with these
00:10:50 cooler features this fast and reliable
00:10:53 interaction
00:10:54 and you also want to have a native
00:10:55 mobile app and then you have this
00:10:57 suit of web components which look like
00:11:00 this which look like normal html tags
00:11:02 except for that they aren't you then
00:11:04 have your tools to convert this app
00:11:07 and you have your tools for the
00:11:08 development so the ionic cli and so on
00:11:11 this is essentially what we saw in the
00:11:13 last lecture already but this is just
00:11:15 another way of depicting it or of
00:11:18 showing it on a slide
00:11:20 now of course with that knowledge in
00:11:22 mind we can create an ionic project and
00:11:24 we'll do so in this section already
00:11:26 now this project essentially is all
00:11:29 about our app
00:11:30 so about our code we write to create a
00:11:33 nice
00:11:34 web application a nice website in the
00:11:36 end and that of course means we will
00:11:38 write
00:11:39 our own code and again that could be
00:11:41 written in vanilla javascript
00:11:43 or with any framework like in this
00:11:45 course with angular
00:11:47 so we add such a fronted framework and
00:11:49 that is optional
00:11:50 as i just mentioned you could use
00:11:52 vanilla javascript
00:11:54 and then we add the ionic framework so
00:11:56 this set of ionic web components to get
00:11:59 nice rich web elements added to zap
00:12:03 automatically or with very little effort
00:12:06 so that the app already looks nice and
00:12:08 has a lot of nice capabilities
00:12:10 which would be quite a lot of work to
00:12:12 build on our own otherwise
00:12:14 so with that added and with a lot of
00:12:17 cool functionalities added therefore
00:12:19 we can continue now as a side note
00:12:21 because that's already interesting to
00:12:23 know here
00:12:24 the web components we're adding here the
00:12:26 ionic web components
00:12:27 are built with a tool called stencil you
00:12:30 don't need to learn
00:12:31 stencil to work with ionic not at all
00:12:33 and we will not learn it in this course
00:12:35 but if you want to learn how the ionic
00:12:38 web components were built behind the
00:12:39 scenes so if you want to know a little
00:12:41 bit more about that
00:12:42 or if you want to build your own web
00:12:44 components which you can use in
00:12:46 conjunction with your framework and with
00:12:47 ionic
00:12:48 then learning stencil could be well
00:12:51 worth it
00:12:52 and i do have a complete web component
00:12:54 with and without
00:12:55 stance of course so all in one course
00:12:57 here on udemy so definitely check this
00:12:59 out if you want to learn all about the
00:13:01 technology
00:13:02 the ionic team used to build their ionic
00:13:05 web components
00:13:06 but that's just a side note so
00:13:09 these web components are built with
00:13:10 stencil and that is all done for you
00:13:12 you just add these web components and in
00:13:14 the end you can then
00:13:15 build different kind of apps based on
00:13:18 your single code base based on your app

00:13:21 and this is again done with capacitor or
00:13:23 cordova
00:13:24 as i mentioned in this course we'll use
00:13:26 capacitor which is a tool developed by
00:13:28 the ionic team
00:13:29 so we'll stay entirely in that ionic
00:13:31 world
00:13:32 and what this tool in the end does is it
00:13:34 acts as a bridge between our web code
00:13:36 our web javascript code
00:13:38 and then the native platform we're
00:13:40 running on so that from our javascript
00:13:43 code we can
00:13:44 trigger certain functions which then in
00:13:46 the end trigger
00:13:47 native code on your device so real
00:13:49 native code there
00:13:50 to for example open the camera to get
00:13:53 the user location
00:13:54 to show an alert or anything like that
00:13:57 this can then be done with real native
00:14:00 code executed on your
00:14:02 behalf without you needing to write it
00:14:05 by tools like capacitor or cordova
00:14:08 which you can't even use kind of
00:14:10 together as i'll also show in this
00:14:11 course
00:14:12 but we'll primarily use capacitor here
00:14:15 so this is what ionic is all about
00:14:18 in this course we will learn all about
00:14:20 ionic
00:14:21 we will do that with angular as a
00:14:25 frontend framework
00:14:26 and we'll also learn about capacitor and
00:14:29 we will then
00:14:30 therefore build a progressive web app as
00:14:33 well
00:14:33 as our mobile apps will not cover
00:14:37 stencil or anything like that
00:14:43 now that we had a first look at what
00:14:45 ionic is
00:14:46 and no worries if that was a lot we'll
00:14:49 learn about these different building
00:14:50 blocks
00:14:51 step by step throughout the course we'll
00:14:53 learn about the web components and then
00:14:54 we'll learn about capacitor and how it
00:14:57 works together
00:14:58 no worries but now that we learned about
00:15:00 that what is angular
00:15:02 and i want to be honest here you should
00:15:04 know that
00:15:05 knowing angular is a prerequisite to
00:15:07 this course
00:15:08 there is a complete refresher module
00:15:11 after this first module
00:15:13 this is entirely optional and it should
00:15:15 really just be a refresher
00:15:17 it will not teach you angular from the
00:15:19 ground up it will only refresh your
00:15:21 knowledge
00:15:22 in case it's been some time since you
00:15:23 last worked with angular knowing angular
00:15:26 is a prerequisite and if you don't
00:15:28 check out my complete angular guide to
00:15:31 learn all about angular which you will
00:15:33 also need
00:15:34 in this course angular is of course a
00:15:37 framework
00:15:38 which makes the development of
00:15:42 web apps javascript driven web apps
00:15:44 easier and more fun
00:15:45 and more allows us to write more
00:15:48 powerful apps because we don't have to
00:15:50 focus on the nitty-gritty details but we
00:15:52 can
00:15:53 use angular to take care about all the
00:15:55 rendering of the ui
00:15:56 and of creating a nice single page
00:15:58 application and we can focus on our
00:16:00 business logic
00:16:02 and therefore tools or frameworks like
00:16:04 angular help us
00:16:05 write highly reactive javascript-driven
00:16:08 web apps
00:16:09 um it's absolutely optional we could do
00:16:12 everything with vanilla javascript but
00:16:14 then
00:16:14 we really couldn't because we would have
00:16:16 to reinvent the wheel
00:16:17 all over the place we would probably
00:16:20 introduce
00:16:20 bugs and angler does the same we could
00:16:23 do
00:16:24 but in a best practice way it makes
00:16:27 the way free for us to work and focus on
00:16:30 our own business logic
00:16:32 and we also use angular to build
00:16:33 so-called single page applications
00:16:36 which are apps that run on one and the

00:16:38 same html page
00:16:40 where this page or parts of this page
00:16:42 are constantly re-rendered
00:16:44 why a javascript in the end triggered
00:16:46 and controlled through angular
00:16:48 but which to the user looks like
00:16:50 sometimes the entire page changes
00:16:52 and that simply creates the illusion of
00:16:54 having different pages we can switch
00:16:56 between
00:16:57 whilst all the transitions and is on are
00:16:59 instant because it's javascript
00:17:01 running in the browser we don't need to
00:17:03 wait for a server response
00:17:05 and that's why we build apps with
00:17:06 javascript and where we
00:17:08 power so much logic in our apps with
00:17:10 javascript
00:17:12 now in an ionic app we essentially would
00:17:14 want to use a framework like angular
00:17:16 because it helps us with complex
00:17:18 problems like state or
00:17:20 data management between different pages
00:17:22 for example which can become
00:17:24 quite difficult in bigger apps and it
00:17:26 helps us with things like
00:17:27 routing or navigation so switching
00:17:30 between these different
00:17:31 pages and passing data around between
00:17:33 them and so on
00:17:34 and we'll come back to this later in the
00:17:36 course this is angular
00:17:38 as i said if it's been some time since
00:17:40 you last worked with it have a look at
00:17:42 this refresher i have
00:17:43 after this module if angular isn't your
00:17:46 thing
00:17:47 then this might not be 100 the right
00:17:49 course for you
00:17:50 but i want to highlight at this point
00:17:52 that ionic
00:17:53 also works with just javascript no
00:17:56 framework at all or with other
00:17:58 frameworks or libraries
00:18:00 so you can use it with react or view as
00:18:03 well if you want
00:18:04 you should still in case you want to go
00:18:06 that route and you don't want to refund
00:18:08 the course which is nice of course
00:18:10 you should go through the the quick
00:18:12 start parts the first sections of this
00:18:14 course to learn how ionic works and you
00:18:16 will then still be able to use that
00:18:18 knowledge
00:18:18 with these other frameworks um even
00:18:21 though some
00:18:22 things will differ there but you will
00:18:24 know which things differ
00:18:25 by the end of these first sections
00:18:28 because the ionic components you use
00:18:29 and the way you use them will be the
00:18:31 same and speaking of that
00:18:33 it's time to get our hands dirty and
00:18:35 start using some ionic components
00:18:42 so let's dive in and let's build our
00:18:45 very
00:18:45 first simple ionic app or get something
00:18:49 onto the screen
00:18:51 for this you can visit
00:18:52 ionicframework.com
00:18:54 and there under developers installation
00:18:56 you find installation instructions
00:18:58 now first important thing you don't need
00:19:01 an ionic account
00:19:02 you can instead simply install that
00:19:04 ionic cli here
00:19:06 now for that to be installable and to
00:19:09 run you also need another tool which is
00:19:11 nodejs
00:19:13 you can get nodejs from nodejs.org
00:19:16 node.js is a javascript runtime that you
00:19:19 for example and
00:19:20 mainly used to build server-side
00:19:23 applications with javascript that is not
00:19:26 what we'll do in this course
00:19:28 we'll still need node.js for two reasons
00:19:31 reason number one is it's package
00:19:33 manager npm
00:19:35 for node package manager which is used
00:19:38 to manage dependencies
00:19:40 like other third-party libraries in node
00:19:42 apps but which
00:19:43 also is the de facto standard package
00:19:46 manager
00:19:46 for web projects in general so also for
00:19:49 front-end web applications as we're
00:19:51 building it here in the course in the
00:19:52 end
00:19:53 and therefore we will use npm to manage
00:19:55 our dependencies

00:19:56 and ionic is just such a dependency you
00:19:59 could say
00:20:00 now in addition to npm we also need
00:20:02 node.js itself
00:20:04 because the ionic build workflow and the
00:20:07 tools the ionic cli
00:20:09 behind the scenes run based on node.js
00:20:12 they use node.js features
00:20:14 to execute correctly we don't need to
00:20:16 write the code for that but we need to
00:20:18 have nodejs installed
00:20:19 for these tools to work so from
00:20:22 nodejs.org
00:20:23 download the latest version in my case
00:20:26 11.8
00:20:27 and only if that should fail use the lts
00:20:29 version here
00:20:30 so simply download it walk through the
00:20:32 installer it's the same on windows and
00:20:35 mac os it's a normal installer you go
00:20:37 through it
00:20:38 and thereafter you'll have nodejs and
00:20:40 npm installed
00:20:41 automatically then you can execute this
00:20:45 command and you execute this in your
00:20:47 normal
00:20:47 terminal or command prompt now in
00:20:49 windows feel free to run this
00:20:51 command prompt as administrator by right
00:20:54 clicking on the executable
00:20:55 run as administrator on mac os and linux
00:20:58 you very likely need to add sudo in
00:21:01 front of this command
00:21:02 to get the right permissions to execute
00:21:04 it well with that you're
00:21:06 probably prompted to enter your password
00:21:09 and this will now install the ionic cli
00:21:12 and
00:21:12 tooling you could say globally on your
00:21:16 mac or pc now why globally
00:21:19 because now we can use that ionic cli
00:21:21 anywhere
00:21:22 in any path here in our terminal to
00:21:25 create new ionic projects
00:21:27 to run them to build an ionic app and so
00:21:30 on
00:21:31 so now with that installed we can use it
00:21:33 to build a new app to create a new app
00:21:36 for this in your terminal or command
00:21:38 prompt navigate into the folder
00:21:40 where you want to create your new
00:21:42 project folder for this ionic project
00:21:45 once you navigate it there run ionic
00:21:48 start this basically generates a new
00:21:51 project
00:21:52 it will now ask you a couple of
00:21:53 questions like what should be the name
00:21:55 of the project
00:21:56 and i'll name it ionic angular
00:22:00 course but you can of course choose any
00:22:02 name you want
00:22:04 next you can choose from a couple of
00:22:06 templates now the list here could change
00:22:08 over time
00:22:09 you essentially have the choice between
00:22:11 a plank template which is
00:22:13 totally empty project with just the
00:22:14 starting page
00:22:16 the side menu template where you have a
00:22:18 side menu you can slide in from the left
00:22:20 and a tabs menu where you have some tabs
00:22:22 at the bottom
00:22:23 now we'll learn about all these
00:22:25 different navigation options throughout
00:22:26 the course and you will
00:22:28 learn how to not just use them from a
00:22:29 finished template but how to build them
00:22:31 on your own
00:22:32 and therefore i will just start with
00:22:34 blank here which is the most boring but
00:22:36 also the most simple
00:22:37 template to start with and as i said
00:22:39 we'll learn about the rest
00:22:41 later now this will generate a new
00:22:43 project and install
00:22:44 all the dependencies like angular or
00:22:46 ionic this project requires
00:22:49 let's wait for this to finish and i'll
00:22:50 be back once it is
00:22:52 now once this finished i'm asked if i
00:22:55 want to use ionic app flow and connect
00:22:57 my app and you can simply
00:22:58 answer no here this is one of these
00:23:00 cloud services
00:23:01 which would be usable for free even you
00:23:04 can create a free account and use some
00:23:06 services
00:23:07 but i don't need any of them right now
00:23:09 so i'll just
00:23:10 type in n and hit enter here now next

00:23:14 you can navigate you see the commands
00:23:15 here actually
00:23:16 you can navigate into this newly created
00:23:18 ionic angular course
00:23:20 or whatever you named it folder and in
00:23:23 there simply run
00:23:24 ionic serve now ionix earth
00:23:27 will behind the scenes as you can see
00:23:30 here actually
00:23:31 use the angular cli which is installed
00:23:35 for you in this
00:23:36 project to spin up a development server
00:23:39 which in the end runs your application
00:23:42 builds your angular application and
00:23:44 that's really cool ionic uses the
00:23:46 angular cli behind the scenes
00:23:48 so all the cool features offered by the
00:23:50 angular cli
00:23:51 are included in an ionic project as well
00:23:54 and you don't need to wait for the ionic
00:23:56 cli to update to include something you
00:23:58 might want to use from the angular cli
00:24:01 and if that's something you're totally
00:24:02 not interested in well then
00:24:04 it doesn't hurt you that it uses the
00:24:06 angle or cli
00:24:07 so here i then got my first
00:24:10 ionic app and this doesn't look too
00:24:13 fancy yet but it
00:24:14 already doesn't look bad either this
00:24:17 especially looks good if you open your
00:24:20 chrome developer tools or whichever
00:24:21 browser you're using but in chrome
00:24:24 any developer tools you can click this
00:24:26 toggle device
00:24:27 thing here and you can then preview the
00:24:29 app as it would look on different
00:24:32 mobile devices just reload after you
00:24:34 selected a new one
00:24:36 and this doesn't look too shabby looks
00:24:38 already quite a bit like a mobile app
00:24:40 even though there isn't too much
00:24:41 meat in it but let's change that now to
00:24:44 change that we need
00:24:45 an editor we need an ide where we can
00:24:48 write our code
00:24:49 in this course i will use visual studio
00:24:51 code which is a free ide
00:24:53 built for web development it's fast it's
00:24:56 awesome
00:24:56 it constantly gets new features it's
00:24:59 really great
00:25:00 you can get it from
00:25:02 code.visualstudio.com
00:25:03 and there you can download it for your
00:25:05 platform it's a simple installer you
00:25:08 download it
00:25:09 walk through the installer and once you
00:25:11 have it installed
00:25:12 you can open the project the folder you
00:25:15 generated here so in my case ionic
00:25:17 angular dash course with visual studio
00:25:20 code
00:25:21 here i did open that ionic dash angular
00:25:23 dash course
00:25:24 folder now inside of visual studio code
00:25:28 it should look like this for you as well
00:25:30 if it doesn't you can hit command shift
00:25:32 p
00:25:32 or control shift p on windows and if you
00:25:36 enter theme here you should be able to
00:25:38 pick your color theme here by pressing
00:25:40 enter
00:25:40 and i'm using the dark plus theme so in
00:25:42 case you want to have that same look
00:25:44 you can use the dark plus theme here i'm
00:25:47 also using some extensions so if you go
00:25:49 to view
00:25:50 extensions here i recommend that you use
00:25:54 both the
00:25:54 angular essentials you can simply search
00:25:57 for that here
00:25:58 and then install these angular
00:26:01 essentials
00:26:02 package this angular essentials package
00:26:04 here i already got it installed
00:26:06 simply install it on your own this helps
00:26:09 you with general angular development
00:26:12 and what i also do in this or what i
00:26:14 also use in this course
00:26:15 i also use the material icon theme
00:26:19 and this is totally optional it's this
00:26:22 one here
00:26:23 it just changes the file icons you see
00:26:25 inside of visual studio code and i like
00:26:27 that look here
00:26:28 so i installed that theme as well that
00:26:30 doesn't help you with development
00:26:32 it just gives you prettier icons if you
00:26:34 want to have these

00:26:36 same icons you can see here you can
00:26:38 install this
00:26:39 theme now once you're done picking your
00:26:42 extensions you can go back to
00:26:44 explorer here in the view menu or use
00:26:46 this shortcut as
00:26:47 i just did so this gives you the look
00:26:50 and feel you see here in this course
00:26:52 and what you find in there in its core
00:26:54 is a normal
00:26:55 angular app so if you work with angular
00:26:58 before which you should for this course
00:27:00 then this does look quite familiar here
00:27:02 you got a source folder with the app
00:27:03 folder with the app module
00:27:05 app component and here in the app
00:27:08 component html file we see the first
00:27:11 interesting thing these are not normal
00:27:14 html
00:27:15 elements and they're also not normal
00:27:17 angular components
00:27:18 in the end this year are these web
00:27:21 components added by ionic
00:27:23 now these are some web components we can
00:27:25 see even more here
00:27:26 in your home page html file got an ion
00:27:30 header
00:27:31 toolbar title iron content and then also
00:27:34 a normal html element
00:27:36 so it is quite normal to mix and match
00:27:38 them but ionic has a rich
00:27:40 suit of built-in elements which in case
00:27:43 you want to get a sneak peek already
00:27:45 you can find in the official docs under
00:27:47 developers ui components
00:27:48 on ionicframework.com and there you see
00:27:51 a list of all the web components it
00:27:53 ships with
00:27:54 and that's quite a lot we can do cool
00:27:56 things
00:27:57 like here we could add a iron button
00:28:00 which is one of the components it ships
00:28:01 with
00:28:02 and in this course you will learn about
00:28:03 a lot so you don't need to memorize this
00:28:05 right now
00:28:06 or get shocked regarding how you should
00:28:08 ever learn this
00:28:09 you will learn it throughout the course
00:28:12 and there
00:28:12 i could say change text and let's say i
00:28:15 want to change
00:28:16 this text up there so let's grab this
00:28:20 text here maybe move it into a paragraph
00:28:23 and on that button here
00:28:24 we can now add a click listener and
00:28:27 execute on change text so we write
00:28:29 normal angular code here that is what i
00:28:31 want to show you this is a normal
00:28:32 angular code a normal angular click
00:28:34 listener just the element is not a
00:28:36 normal angular or html element
00:28:38 it is an ionic web component
00:28:42 and then how did i added that we added
00:28:44 this click listener and i'm
00:28:46 targeting on change text i can add a
00:28:48 once
00:28:49 text method here to my homepage
00:28:51 component class
00:28:52 which is a normal angular component as
00:28:54 you can tell it has the component
00:28:56 decorator it has a template url and a
00:28:59 selector so
00:29:00 all things you know from angular and in
00:29:03 there i could have a text property with
00:29:05 default starting text let's say
00:29:08 and when we trigger this function here
00:29:11 this method
00:29:12 i set this text e equal to changed
00:29:16 and now all we have to do again normal
00:29:18 angular logic
00:29:19 all we have to do is we go to home page
00:29:22 html
00:29:23 and there we can now output this with
00:29:25 string interpolation
00:29:27 also a normal angular feature and we can
00:29:30 target
00:29:30 text here and text is simply the
00:29:32 property name
00:29:34 i have in here now with that
00:29:37 if i now save this thanks to ionic serve
00:29:40 still running and you should keep this
00:29:42 up and running
00:29:43 it will automatically watch your code
00:29:44 for changes and reload your app in the
00:29:47 browser so
00:29:48 rebuild the app and then reload the app
00:29:50 in the browser whenever such a change
00:29:52 happens
00:29:52 and therefore now if you go to the tab

00:29:54 where your app runs you see
00:29:56 the change template you see this button
00:29:58 which looks like this
00:29:59 without me adding any css which is
00:30:01 another part of these built-in web
00:30:03 components they have a nice styling
00:30:05 included
00:30:06 and if i press this button it changes
00:30:09 now by the way if i would switch to
00:30:11 let's say a pixel 2 so to an
00:30:13 android device and i reload you can also
00:30:16 see that the button now looks
00:30:17 differently and if i tap it
00:30:18 we get this ripple effect here so that
00:30:21 is
00:30:22 a lot of the stuff ionic does for you it
00:30:24 automatically adjusts its components to
00:30:26 the platform they're running on
00:30:28 it gives you nice styling and you can
00:30:30 use them like normal web
00:30:31 elements like normal html elements just
00:30:35 with a lot of functionality already
00:30:37 included
00:30:39 now that is essentially what you will be
00:30:41 able to do with
00:30:42 ionic we haven't even seen the part yet
00:30:44 where we take this web app and run it on
00:30:47 a real native device
00:30:48 we'll do this later in the course but
00:30:50 this is the end how we will work with
00:30:52 ionic throughout the course
00:30:53 we'll use the many elements it offers us
00:30:56 write normal angular logic and we can
00:31:00 build
00:31:00 nice beautiful automatically adjusting
00:31:04 web apps that we can deploy as web apps
00:31:07 and run as normal websites but which we
00:31:09 can then later
00:31:10 also deploy as real native apps which
00:31:14 look and feel like native apps because
00:31:15 well
00:31:16 they are native apps then by the end of
00:31:18 the course
00:31:19 and i hope this wets your appetite here
00:31:22 obviously
00:31:23 we'll learn all about the different
00:31:25 components here
00:31:26 which ones exist how we use them how we
00:31:28 configure them and how we combine them
00:31:30 with angular
00:31:31 we'll learn all about this throughout
00:31:33 the course
00:31:38 now we had our first little ionic
00:31:40 angular
00:31:41 application nothing too fancy in there
00:31:43 but i hope you saw how we will
00:31:45 generally work with ionic that we in the
00:31:47 end have a setup
00:31:49 where i will explain in more detail how
00:31:51 things are working together there
00:31:53 where we can use these ionic web
00:31:55 components to build nice
00:31:56 user interfaces now ionic hasn't always
00:32:00 been about web components though
00:32:02 historically with ionic 1
00:32:04 ionic was all about creating mobile apps
00:32:06 with angular 1.
00:32:08 an ionic one was released in 2013. in
00:32:11 the end what ionic 1 did
00:32:13 was it didn't create web components that
00:32:15 was possible back then you couldn't
00:32:17 create your own html
00:32:18 elements browsers didn't support that
00:32:21 but it used
00:32:22 angular 1 directives custom directives
00:32:25 to essentially also give you custom
00:32:28 components but custom
00:32:29 angular components in the end which run
00:32:31 only inside of angular apps
00:32:34 now ionic 2 continued this in 2016
00:32:38 by giving you the same for angular 2
00:32:40 which was a brand
00:32:42 new version of angular which is totally
00:32:44 different to angular 1.
00:32:45 the two have basically nothing in common
00:32:47 indeed so ionic 2 gave you again
00:32:50 angular components not web components
00:32:53 angular components
00:32:54 and again therefore you could only use
00:32:56 ionic 2
00:32:58 in angular 2 applications now there also
00:33:01 was an ionic 3 which
00:33:03 basically added some new features
00:33:05 enhanced ionic a little bit
00:33:06 but it was still focused on angular at
00:33:10 that time angular 4 was out but still
00:33:12 angular 4
00:33:13 despite the name as you should know is
00:33:15 just the same as angular 2 in its core
00:33:17 as is angular 7 8 and so on all these

00:33:20 new versions are simply named like this
00:33:22 they're all based on angular 2. so we
00:33:25 still could only build
00:33:27 angular ionic apps there and the ionic
00:33:30 team decided that this would not be
00:33:31 optimal for the future because not all
00:33:34 people are using angular
00:33:36 you of course probably are otherwise
00:33:38 you'd not be taking this course
00:33:40 but you could be using react or you
00:33:42 could be using view or no framework at
00:33:44 all
00:33:45 and maybe you want to use some ionic
00:33:47 components maybe not even all of them
00:33:48 but
00:33:49 some of them or you do want to use all
00:33:51 of them because you do want to build
00:33:53 a native mobile app with ionic well then
00:33:55 you were limited
00:33:56 to angular with ionic 4
00:34:00 you aren't anymore ionic 4
00:34:03 and all the future versions of ionic are
00:34:05 based
00:34:06 on web components and this is a browser
00:34:09 specification
00:34:10 that allows you to add your own html
00:34:12 elements that run totally
00:34:14 independent from any web framework you
00:34:16 might be using
00:34:17 so you're independent from angular and
00:34:19 so on because in the end all you need
00:34:21 here
00:34:21 is javascript these web components use
00:34:23 javascript under the hood
00:34:25 and every browser supports javascript
00:34:27 and therefore
00:34:28 web components in ionic 4 can be used
00:34:30 with any framework any web framework or
00:34:33 no framework at all if you want to
00:34:36 and that is pretty cool now all the word
00:34:38 on the future of ionic
00:34:40 in the past we had ionic 2 and 3 and 1.
00:34:43 now we have ionic 4 and we'll get a new
00:34:45 version every 6 months but just as with
00:34:47 angular
00:34:48 5 6 7 8 and so on these new versions
00:34:51 don't change
00:34:52 everything there are small incremental
00:34:54 enhancements
00:34:55 where the majority will stay the same
00:34:58 your knowledge you need will stay the
00:34:59 same
00:35:00 only some enhancements are made minor
00:35:03 features are introduced
00:35:04 and all these changes will happen in a
00:35:07 backward compatible way
00:35:08 so that you have loads of time of
00:35:11 updating your app if needed and often
00:35:13 you don't even need to update anything
00:35:14 so this is not like oh god i gotta learn
00:35:17 something new in six months
00:35:18 you don't this is the ionic history and
00:35:22 a brief look
00:35:23 into its future and that is why ionic
00:35:26 four
00:35:26 and future versions of that is and will
00:35:29 be the best versions of ionic with ever
00:35:31 had
00:35:32 because we got so much flexibility with
00:35:34 these versions
00:35:39 in the last video i had a look at the
00:35:41 history of ionic
00:35:43 if you have used ionic 2 or 3
00:35:46 this video is for you if you haven't you
00:35:47 can simply skip it i want to dive into
00:35:50 the important differences between ionic
00:35:52 3 and ionic 4
00:35:53 and what changed now first of all if you
00:35:55 need to update an existing project to
00:35:58 ionic for
00:35:58 there is a migration guide on the
00:36:00 official page
00:36:02 on the official webpage of ionic on
00:36:05 ionicframework.com
00:36:07 you can go to guide here in the docs and
00:36:09 you will find a migration
00:36:11 guide here and that gives you a detailed
00:36:14 overview
00:36:15 of what changed from ionic 3 to ionic 4
00:36:18 and how you need to adjust your project
00:36:20 to well updated so that is the detailed
00:36:23 guide
00:36:24 i want to give you the rough overview of
00:36:26 what changed
00:36:27 so an ionic-free project used the ionic
00:36:30 cli
00:36:31 to generate such a project we then used
00:36:34 cordova to
00:36:35 also get a mobile app out of that and
00:36:38 ionic 2 and 3 actually were mostly

00:36:41 focused on getting these mobile apps
00:36:42 with ionic free you could also build
00:36:44 progressive web apps that was possible
00:36:47 but the focus really was on this mobile
00:36:50 app with
00:36:51 web technologies thing with ionic 4
00:36:54 that's changing we still have the ionic
00:36:56 cli
00:36:57 but we can actually also include ionic 4
00:37:00 through a cdn or
00:37:02 through npm so we don't even need a cli
00:37:05 or any complex build workflow to use
00:37:08 ionic for which makes sense because it
00:37:10 doesn't rely
00:37:11 on a framework and actually in the first
00:37:14 real section of this course after the
00:37:16 angular refresher
00:37:18 i will show you how to include ionic
00:37:20 without any cli before we then use it
00:37:23 again
00:37:23 because we're also building an angular
00:37:25 app which needs one so that's the first
00:37:27 subtle but important difference we can
00:37:29 just use the ionic cli
00:37:32 we then in the end have a normal web
00:37:33 project and
00:37:35 an ionic project in ionic 3 and 2 also
00:37:38 was a web project
00:37:39 but it was highly geared towards getting
00:37:41 out such a
00:37:42 mobile app such an ionic driven app now
00:37:45 here we have a normal web app project
00:37:47 that also can spit out a real mobile app
00:37:50 but doesn't have to
00:37:52 because under the hood like the ionic
00:37:54 cli for angular
00:37:55 we use just the angular cli and similar
00:37:58 things are offered for react and view
00:38:00 so we don't really have anything too
00:38:02 different to a normal web app built with
00:38:04 angular or react
00:38:06 it's just a web app plus so to say with
00:38:09 some extra features
00:38:11 and therefore what we get out could be a
00:38:12 normal web app but we can
00:38:14 also use cordova or capacitor both
00:38:17 supported now
00:38:18 capacitor is this new tool offered by
00:38:20 the ionic team
00:38:21 to get a mobile app and in this course i
00:38:23 will use capacitor
00:38:25 so in the end we got more flexibility
00:38:27 that's the general theme of ionic four
00:38:29 more flexibility and yet more stability
00:38:32 and speed
00:38:33 as well this is the big picture again
00:38:36 for the detailed upgrade on what
00:38:38 technically changed have a look at the
00:38:40 official docks i showed you
00:38:46 now we're nearing the end of this module
00:38:48 there's just one important thing that is
00:38:50 important to know
00:38:52 about mobile apps built with ionic
00:38:55 if you're building such a mobile app as
00:38:57 i mentioned in the end what we get is
00:39:00 our code our ionic app with tools like
00:39:02 capacitor or cordova
00:39:04 is made available as a mobile app for
00:39:07 these native platforms so for android
00:39:09 and ios
00:39:10 and now we have two common ways of
00:39:13 making that happen
00:39:14 we could compile our code to native code
00:39:17 so we could compile the code to
00:39:19 java for android or to objective-c or
00:39:22 swift
00:39:23 for ios and compiling here especially
00:39:26 talks about the templates so a button
00:39:30 an iron button we have in our template
00:39:32 could be
00:39:33 converted into a real native button or
00:39:36 the alternative we could wrap our web
00:39:39 app into a web
00:39:40 view on native mobile apps you can
00:39:43 launch a web
00:39:44 view in the application to host a web
00:39:47 page inside of that app
00:39:49 you might know that from some apps like
00:39:50 twitter if a person
00:39:52 links some webpage there and you tap it
00:39:56 you don't open your actual browser app
00:39:58 and open the
00:39:59 page there but inside of twitter a
00:40:02 built-in browser
00:40:03 opens up this is not a browser developed
00:40:05 by the twitter guys
00:40:07 it's a so-called web view it's end a
00:40:09 special widget you can use
00:40:11 in native app development that is a
00:40:14 fully fledged browser that doesn't look

00:40:16 like one because you don't have a url
00:40:18 bar at the top and so on
00:40:19 it just is a full screen browser and
00:40:22 that is what ionic
00:40:23 uses with tools like capacitor or
00:40:26 cordova
00:40:27 you need get a mobile app shell that has
00:40:30 such a web view in it
00:40:31 and also then has some capabilities of
00:40:34 launching a simple web
00:40:35 server running mobilely on the device
00:40:38 that hosts your
00:40:39 ionic web app inside of that web view
00:40:43 and then cordova and capacitor that's
00:40:45 the cool thing
00:40:46 also give you a bridge so to say
00:40:50 through which you can tap into real
00:40:52 native device features
00:40:53 from inside your web app and that's the
00:40:55 difference to a website
00:40:56 running in a normal browser there this
00:40:58 is not possible
00:40:59 in a capacitor app that is so ionic
00:41:03 takes this approach of wrapping your app
00:41:05 into a webview
00:41:07 no matter if you're using capacitor or
00:41:09 cordova
00:41:10 now that webview as i mentioned allows
00:41:12 you to run your app
00:41:14 a normal web app inside of a native app
00:41:16 that renders this full screen
00:41:18 browser now you could say that this
00:41:22 has to be slower than a compiled app
00:41:24 where you work with the real native
00:41:26 widgets
00:41:27 and technically that would be true such
00:41:30 an app will be a little bit smaller
00:41:32 because there is this extra wrapper and
00:41:34 it is just a web page
00:41:36 but it is super important to stress here
00:41:39 that
00:41:39 modern devices are so fast and an ionic
00:41:42 app
00:41:43 typically uses so little performance
00:41:46 that you will absolutely not see any
00:41:49 difference
00:41:50 and then you just have the advantage of
00:41:52 being able to build a cross-platform app
00:41:54 with almost no effort at all that looks
00:41:57 and feels like a native app
00:41:59 that also is technically a native app
00:42:02 and where you can tap
00:42:03 into all the native device features like
00:42:05 the camera you might need
00:42:08 just that if you look under the hood
00:42:10 it's not really compiled down to a
00:42:12 native mobile app but instead it's
00:42:14 wrapped into a native mobile app but
00:42:16 again the performance difference
00:42:18 will in 99 of all cases not
00:42:22 matter and i do mean it like this not
00:42:24 matter for you
00:42:25 and you just reap the benefits
00:42:31 we're almost done getting started in the
00:42:34 next module
00:42:35 i'll give you an angular refresher since
00:42:38 we'll use
00:42:39 angular in this course now knowing
00:42:41 angular isn't prerequisite to this
00:42:43 course
00:42:43 but maybe it's been some time since you
00:42:44 last worked with it maybe
00:42:46 you only barely touched on it then this
00:42:49 module will help you get back into
00:42:51 angular and its core
00:42:53 concepts please note that this is of
00:42:55 course a totally
00:42:56 optional module because well it is a
00:42:58 prerequisite if you already know angular
00:43:01 you can simply fast forward through this
00:43:03 module or entirely skip it
00:43:06 now once we're done with that refresher
00:43:08 we'll finally dive into ionic
00:43:10 and they're into its basics and most
00:43:13 importantly
00:43:14 in its component basics because ionic
00:43:17 mostly is a component
00:43:18 framework or library and therefore
00:43:20 components are its core
00:43:22 and in this module we'll dive into how
00:43:24 to use them how to configure them
00:43:27 and all of that even without angular no
00:43:30 worries we'll add angular back into the
00:43:32 app later but here you'll learn
00:43:34 all the basics about ionic without even
00:43:36 needing angular
00:43:37 which shows a great strength of ionic it
00:43:40 works with or without a framework
00:43:42 and in this course you'll essentially
00:43:44 learn both now once we're done with the

00:43:46 component basics
00:43:47 we'll connect ionic to angular and you
00:43:50 will learn why you might want to do that
00:43:52 and where the strengths of this
00:43:54 combination lie and how to use both
00:43:56 together
00:43:57 how to inject certain ionic controllers
00:44:00 and elements into angular components
00:44:03 and how angular components and ionic
00:44:05 components work together
00:44:06 really exciting stuff once we're done
00:44:09 with that
00:44:10 it's time to leave the component world a
00:44:13 little bit
00:44:14 and focus on another core strength of
00:44:17 ionic what it historically always did
00:44:20 it always allowed you to build native
00:44:22 mobile apps
00:44:23 with web technologies so with a
00:44:26 framework like angular
00:44:27 and therefore in this next module we'll
00:44:29 build native apps with a tool called
00:44:31 capacitor
00:44:32 which is also managed and developed by
00:44:35 the ioniq team
00:44:36 which we can use to take our ionic and
00:44:39 angular web app
00:44:40 and convert it into a real native mobile
00:44:42 app and you'll learn
00:44:43 how that works and how to run your app
00:44:46 on mobile devices
00:44:47 in this section therefore thereafter
00:44:50 i'll teach you how to debug your ionic
00:44:52 apps because
00:44:53 things not always go as planned and
00:44:55 therefore this is a crucial skill to
00:44:57 have
00:44:58 before we then dive into navigation and
00:45:01 routing in ionic angular apps because
00:45:04 switching between different pages
00:45:06 is a task you do all the time in web
00:45:08 apps and mobile apps
00:45:10 you constantly navigate back and forth
00:45:12 and this module you will learn how the
00:45:14 angular router
00:45:15 and ionic work together when it comes to
00:45:17 switching between pages
00:45:19 thereafter we'll dive deeper into ionic
00:45:22 components and i'll give you a very
00:45:25 thorough overview of all the ionic
00:45:27 components and how to think about them
00:45:29 and how to configure them
00:45:30 so this will then really allow you to
00:45:32 build any kind of app you want
00:45:34 with ionix help before we then dive into
00:45:37 styling and theming
00:45:38 because obviously you don't just want to
00:45:40 use components you want to make your app
00:45:42 look good and here you learn how to do
00:45:44 that with the help of ionic
00:45:46 and how to properly assign your own
00:45:49 style your own corporate identity
00:45:51 to an ionic and angular app or basically
00:45:53 to any ionic app you could say
00:45:56 well what would an app be without
00:45:58 fetching user input right
00:45:59 and that is indeed what we'll dive into
00:46:01 thereafter you will learn how to work
00:46:03 with
00:46:04 forms with angular forms in ionic apps
00:46:07 and how to use
00:46:08 ionic components input components in
00:46:10 these forms so how that works together
00:46:13 now whenever you gathered some data or
00:46:16 you
00:46:16 have some data in your application state
00:46:19 management becomes an issue
00:46:20 and therefore i have a whole module
00:46:22 dedicated on how you manage
00:46:24 state in an ionic angular application
00:46:26 before we then also dive into sending
00:46:29 http requests
00:46:30 so that you're not limited to just
00:46:32 managing data locally
00:46:34 on your device or in your app but that
00:46:36 you can also store it on servers
00:46:38 somewhere in the internet now when you
00:46:41 think about
00:46:42 typical native apps and that is still
00:46:44 one of the core focuses of ionic
00:46:46 building native apps
00:46:47 so if you think of such native apps what
00:46:50 often comes to mind is
00:46:51 using maps or the camera in there well i
00:46:54 will cover both in this course
00:46:56 and i will start by adding google maps
00:46:59 in a specific section
00:47:00 where i will show you how to add that
00:47:02 how to unlock the api and how to use
00:47:04 google maps from scratch

00:47:06 in an ionic app before we then dive into
00:47:09 native device
00:47:10 features in general like using the
00:47:12 camera or fetching the current user
00:47:14 location
00:47:15 now that is all nice but what would a
00:47:18 real app
00:47:19 be without some user authentication and
00:47:22 therefore i got a whole module
00:47:24 dedicated to showing you how to add
00:47:26 authentication
00:47:27 to your application once we did all that
00:47:31 we'll have quite a nice zap and that is
00:47:34 another important thing
00:47:35 throughout this course we build a
00:47:37 project a realistic
00:47:39 project and i will demo most of these
00:47:41 things
00:47:42 on that project there are some side
00:47:45 projects or
00:47:46 smaller demos as well but i believe you
00:47:48 learn the most
00:47:49 if you work on a concrete example on a
00:47:52 concrete
00:47:53 project and therefore this is what we'll
00:47:54 do in this course as well
00:47:56 and once we finish that project which
00:47:58 we'll have after the authentication
00:48:00 section
00:48:01 it is of course time to publish the app
00:48:03 and therefore in the publishing section
00:48:05 i will teach you
00:48:06 how you can get your application into
00:48:08 the google play store
00:48:10 into the apple app store or also publish
00:48:13 it as a web app because that is
00:48:15 something you can build with ionic and
00:48:16 angular 2.
00:48:17 you can ship a regular web app or even a
00:48:20 progressive web app which i will show to
00:48:22 you as well
00:48:24 and that's it we're then done and i will
00:48:26 conclude the course give you
00:48:28 some next steps but by that point by
00:48:31 that time you will have learned
00:48:33 all you need to build amazing ionic apps
00:48:36 and build up on the foundation you get
00:48:38 in this course
00:48:39 with the official docs with other
00:48:40 resources and of course by simply
00:48:43 building a ton of stuff and that will
00:48:45 enable you
00:48:46 to build any kind of app you want with
00:48:48 ionic and angular
00:48:50 so let's dive in
00:48:55 we all want to dive into the course now
00:48:58 and we will
00:48:58 but how do you get the most out of the
00:49:01 course because
00:49:02 that is really important to me i want
00:49:04 that you get the most for your money
00:49:05 possible now this is a video on the
00:49:08 month course so obviously you should
00:49:10 watch the videos go through them have a
00:49:13 look at them
00:49:14 and pause them if you need to take some
00:49:16 notes or if you're coding along
00:49:18 also take advantage of these udemy
00:49:21 playback controls in the video player
00:49:23 speed me up if i'm going too slow slow
00:49:25 me down if i'm going too fast
00:49:27 and jump back to videos you already
00:49:29 watched to go
00:49:30 through a concept again which wasn't
00:49:32 very clear to you that is a normal
00:49:34 process of learning and it is the
00:49:36 advantage of a video on demand course
00:49:38 you can go through it at your speed so
00:49:40 take advantage of that
00:49:42 now as i mentioned you should also code
00:49:44 along you learn the most by not just
00:49:47 watching me talk
00:49:48 but by really writing your own code and
00:49:50 for that pause the video
00:49:52 also try something on your own before
00:49:54 watching my solution
00:49:55 do the assignments you find in this
00:49:57 course and take advantage of all the
00:49:59 different tools you have here
00:50:01 now you will definitely also run into
00:50:03 errors
00:50:04 and you will learn in this course how to
00:50:06 debug errors and as always
00:50:08 i recommend that you should try to solve
00:50:10 errors on your own
00:50:12 because you'll learn the most if you fix
00:50:14 your own errors
00:50:15 google is your friend put your error
00:50:17 message into google
00:50:18 and often you will find a solution there

00:50:21 now
00:50:22 also dive into the official docs these
00:50:24 dogs are awesome and you find
00:50:26 all the built-in components there a lot
00:50:29 of useful guides and a lot of useful
00:50:31 resources
00:50:32 that teach you how to work with ionic
00:50:35 and
00:50:35 might help you understand why something
00:50:37 doesn't work the way you would think it
00:50:39 works because it's not
00:50:41 how the ionic team intended it to be
00:50:42 used for example
00:50:44 last but not least this course as all
00:50:47 udemy courses has a q and a
00:50:49 section where you can ask now only ask
00:50:52 if you have exhausted the other
00:50:54 resources also if you compared your code
00:50:57 to mine
00:50:58 attached to multiple lectures in this
00:51:00 course and always to the last lecture of
00:51:02 every module
00:51:03 you find snapshots of the code for this
00:51:06 module
00:51:07 take that code and compare it to yours
00:51:09 that also allows you to find and fix a
00:51:12 lot of
00:51:12 issues and only after you went through
00:51:15 all these steps
00:51:16 or when a certain concept is really
00:51:18 unclear
00:51:19 ask in the q a section but don't just
00:51:21 ask there
00:51:23 also answer help your fellow students
00:51:26 because just as with coding along if
00:51:28 you're forced to think about a problem
00:51:31 and solve it on your own
00:51:32 you get way more out of this than if you
00:51:35 just passively sit there
00:51:36 and ask and wait for help sometimes this
00:51:39 is necessary
00:51:40 but often you can make the difference by
00:51:42 helping our students not just personally
00:51:45 but also for you
00:51:46 because you will learn even more and if
00:51:49 you take all these things into account
00:51:50 you should be getting a lot out of this
00:52:02 course
00:52:05 now that we are all on the same page
00:52:07 regarding angular again
00:52:09 let's finally dive into ionic
00:52:12 and here with ionic since you learned
00:52:15 that ionic actually stands for a couple
00:52:17 of things
00:52:18 also the company which is developing
00:52:21 capacitor
00:52:22 but here with ionic i really mean that
00:52:25 suit of
00:52:25 web components which is the heart of
00:52:28 ionic and which
00:52:29 is what you use in every ionic app which
00:52:32 turns your app into
00:52:33 something you could call an ionic app
00:52:35 after all
00:52:36 so in this module we'll have a look at
00:52:39 these ionic components i'll give you a
00:52:41 furrow
00:52:42 overview of how to use them how to
00:52:45 configure
00:52:46 them how to compose beautiful user
00:52:48 interfaces with them
00:52:50 we'll dive into a lot of component demos
00:52:52 for that and build a tiny
00:52:54 sample application web application here
00:52:57 not a mobile app yet we'll do this later
00:53:00 but a dummy web application where we use
00:53:03 a couple of ionic components
00:53:05 and since we have so many ionic
00:53:08 components
00:53:09 i want to help you memorize them or
00:53:11 maybe i can even show you
00:53:13 a better way of learning about them and
00:53:16 understanding when to use which
00:53:18 component by the end of this module this
00:53:20 will be much clearer
00:53:26 before we dive into the components which
00:53:29 i mentioned would be the heart
00:53:31 of your ionic application let me go
00:53:34 through the core building blocks of a
00:53:36 typical ionic app though
00:53:38 and with that i really mean an app that
00:53:40 could run both on the web
00:53:41 or on a native device wrapped into a
00:53:45 native mobile app distributed for the
00:53:47 app stores
00:53:48 and here again these ui components these
00:53:51 ionic components
00:53:53 are one of the most important or
00:53:55 actually the
00:53:56 most important building block you need

00:53:59 in any ionic
00:54:00 app later in this course though we'll
00:54:03 also learn about things like
00:54:05 theming and styling which basically is
00:54:07 all about
00:54:08 adjusting the look of these components
00:54:11 because whilst
00:54:12 they look beautiful out of the box in
00:54:14 your specific application you will have
00:54:17 your own
00:54:18 style your own corporate identity you
00:54:21 wanna
00:54:21 show and you wanna use an ionic doesn't
00:54:24 stop you from doing so
00:54:26 just because these components look good
00:54:28 out of the box
00:54:29 does not mean that you can't style them
00:54:32 and we'll touch on this later in the
00:54:34 course
00:54:34 in a separate theming and styling module
00:54:37 because it's so important
00:54:39 now when we're building anything but a
00:54:41 very trivial
00:54:42 ionic app we'll also need to dive into
00:54:45 navigation
00:54:46 and that basically means that we want to
00:54:48 switch between different pages of our
00:54:50 app
00:54:51 now a page here doesn't technically mean
00:54:54 a new document fetched from a server
00:54:56 instead you typically build a so-called
00:54:58 single page application
00:55:00 where frameworks like angular or view or
00:55:03 libraries like react together with react
00:55:06 router drive the change of pages
00:55:09 and the rendering of different parts of
00:55:11 your app onto the screen
00:55:13 and in mobile apps as well there we also
00:55:16 know that concept of tapping something
00:55:18 seeing a new page and then tapping the
00:55:21 back button to go back
00:55:22 so this navigation process both in the
00:55:25 web and in a native app
00:55:26 that is also something we'll dive deeply
00:55:28 into in this course
00:55:30 now when we're building a bigger
00:55:32 application there will also be a point
00:55:34 of time
00:55:35 where we need to take care about state
00:55:37 management
00:55:38 and actually state management plays an
00:55:40 important role even in tiny apps but
00:55:42 there it's very simple
00:55:43 but the more complex your app gets the
00:55:46 harder state management becomes
00:55:48 and state management just in case you're
00:55:50 not sure what this means
00:55:52 really refers to the management of data
00:55:54 and of information
00:55:56 in your running app something like is
00:55:58 the
00:55:59 user currently sending a request and
00:56:01 should i show a spinner
00:56:02 that would be state or something like a
00:56:05 list of loaded products
00:56:06 that would be another form of state and
00:56:08 this is also something where
00:56:10 not ionic directly but frameworks like
00:56:13 angular can help us
00:56:14 and therefore we'll also dive into this
00:56:16 later in the course
00:56:19 now when we leave the web app world
00:56:22 and we plan on publishing our ionic app
00:56:25 as a real native app
00:56:26 through the app stores then we'll have
00:56:29 it wrapped in this
00:56:30 web view in this real native app shell
00:56:33 and we'll have this bridge to tap into
00:56:35 native device features like a camera
00:56:38 and that is another important building
00:56:40 block of ionic apps
00:56:41 now admittedly not so much of web apps
00:56:44 though you can tap into
00:56:45 some native device features there as
00:56:47 well as you will also learn in this
00:56:49 course
00:56:50 but mostly in native apps where you can
00:56:53 actually
00:56:53 access the entire bandwidth of native
00:56:56 device features something like
00:56:58 face id uh touch id or
00:57:01 the location of the user ends on all of
00:57:03 that is
00:57:04 possible and is made possible not by the
00:57:07 ionic component suit
00:57:08 but by capacitor which is also developed
00:57:11 by the ionic team
00:57:12 or alternatively cordova which is not
00:57:14 developed by them but which is supported
00:57:16 by ionic

00:57:18 and last but not least the cli and the
00:57:20 whole support you'll also get for the
00:57:22 build
00:57:23 workflow and for the publishing workflow
00:57:26 of your app
00:57:26 that also is part of the ionic world and
00:57:29 that is also what we'll have a look at
00:57:30 later in this course
00:57:32 but for now in this module we'll dive
00:57:34 into these ui components because as i
00:57:36 mentioned
00:57:36 no matter which app you're building and
00:57:38 no matter how it looks or how complex it
00:57:41 is
00:57:41 and if it's just a web app or both a web
00:57:43 app and a mobile app
00:57:45 you will use these components so let's
00:57:48 now dive into them
00:57:53 now how do we use these components in a
00:57:56 project where we
00:57:58 imported this ionic component
00:58:01 library and there are actually different
00:58:03 ways of importing it as you will also
00:58:05 learn in this course
00:58:06 so in a project where we have this
00:58:08 library imported
00:58:09 we have access to this core of ionic to
00:58:11 these components and we use them just
00:58:13 like
00:58:14 regular html elements and now that is
00:58:17 really important to understand if you
00:58:19 never worked with web components before
00:58:21 the term
00:58:22 might be or will be brand new to you and
00:58:24 you might not know how to work with them
00:58:26 well the thing is you just add them with
00:58:28 their tags
00:58:29 into your html code in the places where
00:58:32 you want to use them
00:58:33 just like regular html elements
00:58:36 and here is an example this would be the
00:58:39 iron button
00:58:40 basically a button provided by ionic
00:58:42 which wraps a native
00:58:44 normal html button and then adds some
00:58:46 extra styling and extra functionality to
00:58:48 it
00:58:49 and that's always important these web
00:58:51 components are not just about
00:58:52 pre-styled elements they do add
00:58:55 javascript logic to them as well or at
00:58:57 least they can and they often do
00:59:00 and then this button here can be
00:59:02 configured it can receive
00:59:03 attributes just as you can set
00:59:05 attributes on normal
00:59:07 html elements but of course the
00:59:09 attributes you can set here
00:59:10 and the properties you could set on this
00:59:12 button programmatically as well
00:59:14 depend on the exact web component you're
00:59:17 using because
00:59:18 all the things you can configure here
00:59:20 like the fill mode which defines which
00:59:22 style of button this is and the color
00:59:25 these are of course
00:59:26 things you can configure because the
00:59:28 ionic team made them configurable
00:59:31 and the official docs are the place to
00:59:34 go to learn
00:59:35 which attributes and properties you can
00:59:37 set
00:59:38 on these web components and i'll guide
00:59:41 you through these stocks later in this
00:59:42 module
00:59:44 so we use it like a normal html element
00:59:46 it supports attributes and properties
00:59:48 and these elements can also emit events
00:59:52 and that is also quite interesting um
00:59:55 you can emit your own events when you're
00:59:57 building your own web components
00:59:58 and therefore a lot of ionic components
01:00:02 actually also emit custom events to
01:00:04 which you can listen
01:00:05 something like a special eye and change
01:00:07 event for a select
01:00:09 drop down for example and we'll see some
01:00:11 of these events throughout the course
01:00:14 now under the hood such a button as i
01:00:16 mentioned
01:00:17 is in the end a combination of the three
01:00:20 core
01:00:21 drivers of front-end web development it
01:00:24 contains some html
01:00:25 code under the hood and here we have the
01:00:28 normal
01:00:29 regular by default supported html
01:00:32 elements and in the end all web
01:00:33 components are made up
01:00:35 of such vanilla html

01:00:38 elements now actually a web component
01:00:40 can be made up
01:00:42 of other web components as well but if
01:00:44 you dig down through all web components
01:00:46 the one at the bottom which doesn't
01:00:47 include other web components will only
01:00:50 include
01:00:50 normal html elements so that's important
01:00:54 to understand
01:00:54 such a web component is basically like a
01:00:57 wrapped up piece
01:00:58 of pre-structured html code
01:01:01 now we don't just have html code we also
01:01:04 have some css
01:01:05 styling and here you actually see
01:01:08 something special for the value for the
01:01:10 color this
01:01:10 war thing this is a css variable and
01:01:13 this makes
01:01:14 styling this web component from outside
01:01:17 and applying a general theme
01:01:18 very easy and we'll dive deeply into
01:01:20 this in the styling and theming module
01:01:22 of the course
01:01:24 but as i mentioned a web component is
01:01:25 not just a combination of
01:01:27 html and css we also have a javascript
01:01:30 portion in there
01:01:31 which adds certain functionalities to
01:01:34 that component
01:01:35 which exposes properties that can be set
01:01:38 which controls things like that we can
01:01:40 set
01:01:40 the color or the fill mode of that
01:01:43 button so all of that is controlled with
01:01:45 javascript
01:01:46 and this is all packaged up together and
01:01:49 basically
01:01:49 wrapped into a javascript object you
01:01:52 could say which you can add to the html
01:01:54 code to the dom
01:01:55 with this iron button selector now
01:01:59 under the hood this also uses a
01:02:01 technique called the shadow dom
01:02:02 and css variables which help with
01:02:05 encapsulating the styles of this
01:02:07 component
01:02:08 so that the styling applied to the
01:02:10 elements in this component
01:02:11 doesn't spill over to your app or to
01:02:13 other components
01:02:15 and the ionic web components actually
01:02:18 also automatically load any polyfills
01:02:20 that might be required
01:02:22 to make them run on older browsers
01:02:25 modern browsers support all the web
01:02:28 component features by default
01:02:30 older browsers don't and therefore ionic
01:02:33 actually makes sure that these
01:02:34 components work on older browsers
01:02:36 as well by automatically polyfilling
01:02:38 everything that is required
01:02:41 now that is as deep as i want to dive
01:02:43 into web components here because you
01:02:45 don't need to be able to build web
01:02:47 components to use them
01:02:49 if you want to build them and if you
01:02:50 want to understand everything here
01:02:52 you can take my web component with
01:02:54 stencil cores
01:02:56 stansley as i mentioned in the first
01:02:58 course module is a tool
01:03:00 developed by the ioniq company by the
01:03:02 ionic team
01:03:03 that they used internally to build all
01:03:05 these web components
01:03:07 it's the end a tool that just makes the
01:03:09 creation of web components easier
01:03:11 it still spits out normal vanilla web
01:03:14 components in the end
01:03:15 and you can use that tool too and in
01:03:17 this course i do cover it
01:03:18 now maybe also interesting to you ionic
01:03:21 is of course
01:03:21 open source and if you visit its
01:03:23 repository on github
01:03:25 here under ionic team ionic you can
01:03:28 always dive into this core
01:03:30 folder and inspect the source code of
01:03:33 the component you're interested in
01:03:35 for example if you select a button here
01:03:37 this is this iron button
01:03:38 component there you will always find a
01:03:41 tsx
01:03:42 file because stencyl uses typescript and
01:03:44 so on
01:03:45 and in this tsx file you see how in
01:03:48 stencil
01:03:49 this component was created and this is
01:03:51 not the code that gets imported into

01:03:53 your app when you include that component
01:03:56 this is the raw code which is actually
01:03:57 compiled to a native component by
01:03:59 stencil
01:04:00 you see the raw version here but if you
01:04:02 are learning stencil and you want to
01:04:04 understand what happens under the hood
01:04:06 you can always dive into the source code
01:04:08 of this component
01:04:09 and for example also see which
01:04:12 properties you can set there
01:04:13 things like the disabled property the
01:04:17 button type
01:04:18 the color and of course you can also see
01:04:20 this in a more convenient way in the
01:04:22 official docs
01:04:23 but i find it quite interesting to
01:04:25 sometimes dive into this
01:04:27 official source code to understand how
01:04:30 this actually works under the hood
01:04:31 and how it is in this case this button
01:04:34 is created
01:04:35 under the hood
01:04:40 so enough of the theory let's go back to
01:04:44 our course project and there we created
01:04:47 a simple project
01:04:49 in a module one where i used uh angular
01:04:52 with ionic to create this project what
01:04:55 i'll do now is
01:04:57 i will actually delete all the content
01:05:00 here
01:05:00 will later recreate such a project and i
01:05:04 will
01:05:04 start without angular i'll just add an
01:05:07 index
01:05:08 html file and here in vs code which is
01:05:11 the editor i'm using
01:05:12 i can create a new html5 skeleton by
01:05:16 typing html
01:05:18 and then simply hitting control space
01:05:20 and then selecting html5
01:05:22 and we get this skeleton here
01:05:25 now as a first simple dummy app here i
01:05:28 want to build a
01:05:29 budget planner basically a list that
01:05:32 allows us to add expenses and calculate
01:05:34 our total expenses so a very simple app
01:05:37 which will
01:05:38 still allow us to already use quite a
01:05:40 bit of these ionic components
01:05:43 now why am i using this without angular
01:05:46 because whilst we will use angular for
01:05:48 the rest of the course
01:05:50 one of the biggest strengths of these
01:05:52 ionic web components
01:05:53 is that they work without any framework
01:05:56 as well
01:05:57 and i want you to understand this and i
01:05:59 want to focus
01:06:00 solely on ionic here so that you don't
01:06:03 even have a chance of
01:06:04 thinking that this could be angular's
01:06:07 thing or that angular could be doing
01:06:09 something here
01:06:09 because we're not using angular in this
01:06:11 simple app but no worries
01:06:13 for the rest of the course we will use
01:06:14 it so here i want to use
01:06:17 just ionic and we can do that for this
01:06:20 you should visit ionicframework.com
01:06:23 and there developers ui components
01:06:26 click on guide here and then simply
01:06:29 choose
01:06:30 packages and cdn now here you learn how
01:06:33 you can add ionic to
01:06:35 an angular app but you'll also find this
01:06:38 cdn link here which you can add into
01:06:42 any html file to include the ionic
01:06:45 package
01:06:46 to it and with the ionic package i mean
01:06:49 this package of
01:06:50 pre-built ionic web components you
01:06:53 should add it here
01:06:55 at the end of your head section and you
01:06:57 can leave it just like this
01:06:59 and actually what's not mentioned here
01:07:01 at least not when i'm recording this
01:07:03 you don't just need the javascript
01:07:05 package you also want some default
01:07:06 styles
01:07:07 for this you can simply duplicate this
01:07:09 import but change it to
01:07:11 a link which you which has a rel
01:07:14 attribute of style sheet
01:07:17 and where you then set the ref attribute
01:07:20 and you should point at the same link
01:07:22 but then replace
01:07:24 this here with css
01:07:27 and instead of ionic.js you need to have
01:07:31 ionic.bundle.css

01:07:32 now we have both the styles and the
01:07:34 javascript code and we're now
01:07:36 ready to go and ready to start using
01:07:39 ionics components
01:07:45 now which ionic components can we add
01:07:49 there are over a hundred of pre-built
01:07:51 ionic components
01:07:52 and you find them all in the official
01:07:54 ionic docks
01:07:55 now definitely feel free to browse
01:07:58 through these docks and play around with
01:07:59 them
01:08:01 you can either do this here on the right
01:08:02 where you also have some nice
01:08:04 icons showing what this ionic does or
01:08:06 what it's used for
01:08:08 or just go through these grouped
01:08:09 components here on the left
01:08:11 now it's impossible to learn them all by
01:08:14 heart
01:08:14 you will learn them automatically by
01:08:16 using but use
01:08:18 these docs when you're building an app
01:08:19 really do that this is your go-to
01:08:22 reference
01:08:23 it's always up to date it's directly
01:08:25 generated from the source code actually
01:08:27 and therefore this is the place to go
01:08:30 for example if you inspect that button
01:08:31 here that iron button
01:08:33 here you even see an example a small
01:08:37 example not every component has this as
01:08:39 of now but some components do show you
01:08:41 an example for ios and material design
01:08:44 which is the android
01:08:45 style and you have a description here on
01:08:47 the left and you do have that for all
01:08:49 components
01:08:50 there you learn what this component does
01:08:53 how you use it
01:08:55 some general or important ways of
01:08:57 configuring it
01:08:58 like for example here setting the fill
01:09:00 mode to clear outline or
01:09:02 solid to define how the button looks
01:09:04 like you have some usage examples here
01:09:07 so simply some code examples with some
01:09:09 different
01:09:10 configurations please be aware that you
01:09:13 have both javascript and angular
01:09:15 versions
01:09:15 which for this code of course don't
01:09:17 differ though
01:09:18 and then you have a list of all the
01:09:20 properties and this is also generated
01:09:22 directly from the source code and there
01:09:24 you see which properties you can set
01:09:26 and you can set all these properties
01:09:28 also as attributes
01:09:30 on the element therefore and which
01:09:33 values you can pass in for every
01:09:34 attribute
01:09:35 so that should be very helpful in using
01:09:37 this you see custom events that are
01:09:39 emitted by this
01:09:41 component so non-default html events
01:09:44 that are emitted
01:09:45 you have access to the default ones like
01:09:47 click and so on
01:09:48 as well that is the case for all web
01:09:50 components
01:09:51 and that will become important later
01:09:53 when we dive into styling
01:09:54 you see which css properties you can
01:09:57 override for this component
01:09:58 to control its look so there is a lot of
01:10:02 stuff in there
01:10:03 definitely use these stocks now let's
01:10:06 use
01:10:06 these stocks and let's start creating
01:10:08 our little budget planner
01:10:15 in that budget planner here i want to
01:10:17 build a mobile
01:10:18 like looking application and i basically
01:10:21 want to have a header
01:10:23 some toolbar at the top which displays
01:10:25 the title of the app something like
01:10:27 budget planner
01:10:28 and then i want to have the main content
01:10:31 below that toolbar
01:10:32 where i essentially want to have a input
01:10:35 field where i can
01:10:36 enter um some titles some name some
01:10:40 description of an expense and then also
01:10:42 the value the amount of the expense
01:10:44 have a button which i can press and then
01:10:46 a list below of that
01:10:48 where i basically output all my expenses
01:10:50 and at the very bottom of that
01:10:52 maybe a little some where i see the

01:10:55 total some of the expenses
01:10:57 now for this if we have a look at the
01:10:59 official docs
01:11:01 um this iron app and iron content here
01:11:04 is important iron app should always wrap
01:11:06 your entire ionic app
01:11:08 and this basically just ensures that
01:11:10 some general stylings and behaviors are
01:11:12 set so we can already do that we can add
01:11:16 iron app in here and we only use this
01:11:18 once per html file you could say
01:11:22 or later if you use angular which all
01:11:24 runs on one at the same
01:11:25 single page one html file you only use
01:11:29 it
01:11:29 as a global wrapper in your root
01:11:31 component
01:11:32 you never use this anywhere else in
01:11:35 there
01:11:36 we can have our iron content and
01:11:39 this is a wrapper to our main
01:11:41 application content
01:11:43 now why would we add this because for
01:11:45 example this controls the scrolling and
01:11:47 make sure that our content generally
01:11:49 just works it is displayed correctly so
01:11:52 let's add iron content
01:11:54 but i also wanted to have a header so if
01:11:57 you go back to the official docs
01:11:59 and you scroll to the very bottom here
01:12:01 on the left you should find that
01:12:03 toolbar area and in the end it is such a
01:12:06 tool bar which i want to add
01:12:08 now as you can learn here if a toolbar
01:12:10 is placed in the iron header it will
01:12:12 appear fixed at the top of the content
01:12:14 and that is exactly what i want so
01:12:16 inside my iron app above of the iron
01:12:19 content
01:12:19 i'll add an iron header and in the iron
01:12:21 header i'll add my iron toolbar
01:12:24 now in that toolbar i want to have a
01:12:26 title and indeed here we see that i in
01:12:29 title
01:12:29 and that is a component that sets the
01:12:31 title of a toolbar
01:12:32 and we see a usage example here and i'm
01:12:35 basically just rebuilding this example
01:12:37 now
01:12:38 so inside of iron toolbar we can add i
01:12:40 in title
01:12:41 and name this budget planner
01:12:45 if i now save this let me double click
01:12:48 that index.html
01:12:50 file to just open it in the browser
01:12:54 and we should see something like this we
01:12:56 have this nice header at the top with
01:12:58 budget planner in here
01:12:59 and if we open the dev tools and we go
01:13:02 to that
01:13:03 mobile preview here by clicking this
01:13:04 icon in the chrome dev tools
01:13:06 we see that this also looks good on
01:13:09 mobile devices if we simulate them
01:13:12 now also interesting if we inspect an
01:13:15 element here
01:13:16 we see that here for example we have the
01:13:18 iron toolbar this is really rendered
01:13:20 into the dom web components are
01:13:22 a browser feature they're not emulated
01:13:24 like uh
01:13:25 like angular which in the end just gives
01:13:27 us a syntax that spits out normal html
01:13:30 code
01:13:30 this is normal html code now because the
01:13:33 browser natively supports it
01:13:35 but here we also see what's inside of
01:13:37 this toolbar for example
01:13:39 that under the hood a div gets rendered
01:13:41 and another div
01:13:43 and so on so you can dive into this here
01:13:46 as well
01:13:46 that shadow root here simply is related
01:13:49 to that shadow dom
01:13:50 concept i touched on earlier again if
01:13:52 you want to learn all about that
01:13:54 don't hesitate to dive into my full web
01:13:56 component and stencil course
01:13:58 but this is a good start now we can of
01:14:01 course not just
01:14:02 add these elements we can configure them
01:14:04 as well
01:14:06 and therefore let's go back to the
01:14:07 toolbar and i'm just showing you this
01:14:09 because i want you to get into the habit
01:14:11 of using these docs because it's so
01:14:13 important
01:14:14 i of course know what we could configure
01:14:16 there but i want you to understand it as
01:14:18 well

01:14:18 so let's go to the docs and there to the
01:14:20 toolbar and there we learn how we could
01:14:23 add buttons
01:14:24 something we'll also do later in the
01:14:25 course to for example have a button that
01:14:27 allows us to add
01:14:29 a new item and we see some general usage
01:14:32 examples
01:14:33 also with a back button which we'll
01:14:35 later need not right now
01:14:37 and if we scroll further down we see the
01:14:39 properties we can set
01:14:40 and i'm interested in that color
01:14:42 property which we can set to primary
01:14:44 secondary and so on to these base colors
01:14:47 which we can also overwrite and set our
01:14:50 own colors of course
01:14:51 and that is also something we'll do
01:14:52 later so let's go to the toolbar and add
01:14:55 a color of
01:14:56 primary maybe and if we do that
01:15:00 we save that and we go back to our
01:15:02 application and we reload
01:15:03 we now simply have this blue background
01:15:06 but please also note
01:15:07 that the title color also adjusted it's
01:15:10 now white
01:15:11 and the title of course is a separate
01:15:13 component so these components even work
01:15:15 together here which is of course pretty
01:15:17 cool
01:15:18 so that is our header now what about the
01:15:22 content
01:15:26 inside of that content i want to have my
01:15:30 input fields and a button to submit
01:15:32 whatever the user entered so to say
01:15:35 now again you can dive into the official
01:15:38 docs to
01:15:39 find out that there also is an iron
01:15:42 input
01:15:43 and you learn how to use that how to
01:15:45 configure it and how you can combine it
01:15:47 with a label for example
01:15:49 inside of an iron item as it turns out
01:15:51 to have a label next to it that
01:15:54 behaves in a certain way for example it
01:15:55 floats up when you click into the input
01:15:58 so we can also copy that code snippet to
01:16:00 add a couple of
01:16:01 components at the same time and drop it
01:16:04 in here
01:16:05 and turn the link up there in a
01:16:08 self-closing tag just so that i get
01:16:10 auto completion back and i can
01:16:12 reorganize the code automatically with a
01:16:14 shortcut
01:16:15 so that's all i did here change the link
01:16:16 to self-close itself
01:16:18 so back to what we added we added the
01:16:20 iron item here with a label of position
01:16:22 floating
01:16:23 and the text on the label here should
01:16:25 actually say
01:16:27 um expense reason let's say you can of
01:16:30 course enter any text you want
01:16:31 and below that i'll have an iron input
01:16:34 where i'll set the type
01:16:36 attribute to text of course you find
01:16:38 that in the official docs that you
01:16:40 um can do that and if i now save that
01:16:45 and i reload the app we see our input
01:16:47 here where i can enter
01:16:48 an expense reason now that is sweet
01:16:52 let's also add another input below it
01:16:57 where i will say expense
01:17:00 amount and here this will be of type
01:17:05 number because users should only be able
01:17:07 to enter numbers here
01:17:09 now if we save that and we reload we see
01:17:11 that second input below the first one
01:17:14 so that is nice but what if we actually
01:17:17 would want to wrap this
01:17:19 in let's say a little box instead of
01:17:22 having it go
01:17:23 across the full width of the screen
01:17:25 which looks especially strange
01:17:26 on bigger screens well that is no
01:17:29 problem
01:17:30 we can put it into a so-called card and
01:17:33 you might notice card look from other
01:17:35 pages it's pretty popular these days
01:17:37 as always you'll learn how to use it
01:17:39 here in the official docs
01:17:42 we can just add our iron card element
01:17:45 here
01:17:46 and then take whatever should be in
01:17:48 there
01:17:49 and not add it directly in it like this
01:17:51 but add a iron card content
01:17:53 again something you learn with the help

01:17:55 of the official docs or
01:17:57 in this course now and in that iron card
01:17:59 content i have my
01:18:01 iron items now inside of the iron card
01:18:05 but outside of the iron card content
01:18:07 i'll also add another element supported
01:18:10 by
01:18:10 ionic which is the ion card header and
01:18:14 this allows us to set a nice title in
01:18:15 there
01:18:16 by adding an iron card title inside of
01:18:18 that iron card header
01:18:20 and i'll just add a title of new expense
01:18:23 here
01:18:25 now with that iron card added qd
01:18:28 app here if we now reload
01:18:31 we have this nice card look with our
01:18:34 input sitting in that box here which is
01:18:36 quite neat in my opinion
01:18:39 it still spans across the full width on
01:18:41 bigger screens though so what can we do
01:18:44 about that
01:18:50 now to find a solution for the problem
01:18:52 of our components sometimes not having
01:18:54 the right width
01:18:55 on different screen sizes it's important
01:18:58 to understand
01:18:59 that ionic in its core has three
01:19:02 different
01:19:02 types of components and now these are
01:19:05 categories i came up with it's not an
01:19:07 official turn but
01:19:08 i think it helps if you think about
01:19:10 these components in these terms
01:19:12 we have components that help us with the
01:19:14 output of data
01:19:16 we have components that help us with
01:19:19 layouting the page and
01:19:20 organizing and ordering components and
01:19:23 we have components that help us
01:19:25 with getting user input output
01:19:28 components would be things like iron
01:19:30 image iron batch
01:19:31 iron label iron title iron toolbar
01:19:35 iron alert so basically components that
01:19:37 mostly display things
01:19:39 now obviously in that list there are
01:19:41 some things like iron alert where the
01:19:43 user can
01:19:43 also press a button and interact with it
01:19:46 so of course this component kind of does
01:19:48 both but generally these components are
01:19:50 mostly focused on
01:19:52 getting something onto the screen which
01:19:54 we want to display to the user
01:19:56 layout components are not directly
01:19:59 themselves visible but their effect is
01:20:01 visible
01:20:02 because they basically allow us to
01:20:05 structure content
01:20:06 things like iron grid which we haven't
01:20:09 used yet but which we'll use in a second
01:20:11 iron list iron tabs so basically
01:20:15 components that
01:20:16 sometimes all they have they're visible
01:20:18 parts like iron card but which
01:20:20 also are important for grouping things
01:20:23 together
01:20:23 ordering uh elements in a certain way
01:20:26 and last but not least input components
01:20:29 like iron button iron input
01:20:31 iron text area so all these components
01:20:34 that mostly are there for the user to
01:20:36 interact with
01:20:37 to type something to click something to
01:20:39 tap a button
01:20:42 these are three important categories and
01:20:44 we had a look at
01:20:45 elements from all these categories now
01:20:47 since we have a component that is too
01:20:50 wide
01:20:50 we want to shrink that size of the card
01:20:53 we will
01:20:54 probably need some more help from the
01:20:56 layout box
01:20:57 now i already did put iron card in there
01:20:59 you could also put it into the output
01:21:01 box and it kind of does both
01:21:03 it outputs something with some default
01:21:06 styling but it also groups the things
01:21:08 together
01:21:09 but what will definitely help us here is
01:21:11 the iron grid
01:21:17 as always you can have a look at the
01:21:19 official docs to learn more about the
01:21:21 iron grid
01:21:22 and actually there you are linked to a
01:21:24 complete article about the grid layout
01:21:25 where you can learn
01:21:26 all the details about it but there is no

01:21:28 need to do that right now
01:21:30 i'll dive deeply into the grid in a
01:21:32 separate section later in the course
01:21:34 because it's
01:21:35 such a complex not difficult but
01:21:38 feature-rich
01:21:39 component and a component that can be
01:21:42 very useful
01:21:43 when you're planning to build an app
01:21:44 that should run on both mobile devices
01:21:47 and on desktop machines as well we can
01:21:50 use the grid here
01:21:51 to shrink the size of this card on
01:21:54 bigger screen sizes
01:21:56 for that let's go back to the source
01:21:57 code and in iron content
01:22:00 around the content where i want to
01:22:01 control the size
01:22:03 you can add the iron grid component
01:22:07 however you don't just stick your
01:22:09 content that should resize in there
01:22:11 because how would ioniq know how to
01:22:13 resize it
01:22:14 instead a grid consists of rows so
01:22:17 called i and row elements here
01:22:19 and each row has one or multiple iron
01:22:22 columns
01:22:24 so rows and columns make up a grid and
01:22:26 now for a column you can define the size
01:22:29 of this column
01:22:30 which of course helps you define the
01:22:32 size of the content
01:22:34 because it's the iron column that holds
01:22:36 the content you want to render
01:22:38 so this iron card i'll cut it and move
01:22:41 it into this iron column here
01:22:43 and now on this item column we can use
01:22:45 default
01:22:46 properties and attributes we can set on
01:22:48 this element which you find in the
01:22:50 official docs
01:22:51 for example we can set a size attribute
01:22:54 we can set this to let's say
01:22:55 6. now by default a column
01:22:59 is able to have a size of 1 to 12. you
01:23:02 could overwrite this but the default is
01:23:04 1 to 12
01:23:05 which means it either takes 1 12
01:23:08 of the entire width or the total width
01:23:11 and 6 therefore takes half the available
01:23:13 width
01:23:14 if i now save this and i go back to my
01:23:18 app and
01:23:18 reload we see that shrank it's now
01:23:22 smaller it's only half as
01:23:23 wide as the screen but of course on a
01:23:26 smaller device this looks super ugly now
01:23:29 so how can we get the best of both
01:23:31 worlds have a full
01:23:32 width look on the smaller device and
01:23:36 take
01:23:36 half the width on a bigger screen
01:23:39 well for that we can actually use
01:23:43 specialized forms of these attributes
01:23:45 instead of setting
01:23:46 size equals 6 we can set size
01:23:50 md equal to 6. now supported is
01:23:54 xs that stands for extra small sm for
01:23:57 small
01:23:58 md for medium and lg for large
01:24:01 and this allows you to set the size for
01:24:03 different screen sizes
01:24:04 now the break points for these sizes can
01:24:07 be found in the official docs
01:24:08 and you can also overwrite them and md
01:24:11 should be looking quite good here
01:24:13 so if we now save this and i reload this
01:24:16 on the mobile view
01:24:18 you see we have the full width design
01:24:20 back on bigger screens though
01:24:22 it only takes half the width now of
01:24:24 course it would be nice to have this
01:24:26 centered
01:24:26 and turns out you can do this pretty
01:24:28 easy as well you can
01:24:30 add our offset property and set this to
01:24:32 free
01:24:33 because we have 12 columns available
01:24:36 this has a width of six
01:24:37 so we want to have three columns of on
01:24:39 the left and three columns on the right
01:24:41 and this offsets it by three columns to
01:24:44 the left
01:24:46 and of course i don't want to offset it
01:24:47 on all screen sizes but
01:24:49 only on medium screen sizes and higher
01:24:52 that's important when you add size
01:24:55 medium or offset medium
01:24:56 or any other breakpoint like size sm
01:24:59 offset sm then this counts for this

01:25:02 screen size
01:25:03 so for medium sized screens and bigger
01:25:06 screens
01:25:06 so it's always like a minimum condition
01:25:08 you could say
01:25:10 so now with this configuration size md
01:25:13 equals six and offset md equal three
01:25:16 if we reload this it's now nicely
01:25:18 centered on bigger screens
01:25:19 and on smaller screens we still have the
01:25:21 full available
01:25:23 width and that is exactly the look i
01:25:25 want here
01:25:26 now again the grid has a lot of
01:25:28 configuration
01:25:29 possibilities and therefore we'll have
01:25:32 an entire module where we
01:25:34 spend a lot of time on the grid and i
01:25:36 will not dive super deep into it right
01:25:38 now
01:25:39 i just want you at this point to
01:25:42 understand
01:25:43 that we have different categories of
01:25:45 components
01:25:46 and that you will have different tools
01:25:48 for whether you want to
01:25:50 output some content listen to input or
01:25:53 you want to change the structure
01:25:55 or size or order of your elements
01:25:58 on the screen and the grid as well as a
01:26:01 couple of other layout components
01:26:03 can be really helpful with that
01:26:09 so the application is taking shape and
01:26:11 it's looking
01:26:12 really nice in my opinion even though we
01:26:14 haven't written a single line of css yet
01:26:17 because of these beautiful default
01:26:19 styles ionic gives us
01:26:20 and i hope you already get a feeling for
01:26:22 how easy it is to compose a rich
01:26:24 user interface with nice looking and as
01:26:27 you will see
01:26:28 quite powerful and feature-rich
01:26:30 components with
01:26:31 little effort i'm explaining a lot here
01:26:34 but code wise we haven't written that
01:26:35 much code
01:26:36 and we only worked in html
01:26:40 so we got our card with the two items
01:26:42 here now i also want to have a button
01:26:44 to submit my inputs here we use the
01:26:48 button before
01:26:49 we can add a iron button element here
01:26:51 and on that button i want to have a text
01:26:54 of
01:26:54 add expense but i'll actually add two
01:26:56 buttons
01:26:57 so i'll duplicate this because i also
01:26:59 want to have a clear button here
01:27:01 now if we save it just like this without
01:27:03 any further configuration
01:27:05 then if we reload the app we'll get two
01:27:08 buttons that look like this
01:27:09 not ugly but maybe you also want to
01:27:12 tweak this and have a different look
01:27:14 for example i want my clear button here
01:27:16 to have a red
01:27:17 color and this outlined look where it
01:27:20 doesn't have a background color but only
01:27:22 a border
01:27:23 and a text color and i also want to have
01:27:25 an icon in there an
01:27:27 icon that kind of signals that this
01:27:29 cancels the input and clears the fields
01:27:31 and on the expense button i want to have
01:27:33 a icon too a plus icon
01:27:35 and yeah i want to leave the style as it
01:27:38 is otherwise
01:27:39 now for this let's start with the clear
01:27:43 button
01:27:44 we can set the fill mode to outline
01:27:48 alternative values can of course be
01:27:50 found in the official docs as for all
01:27:52 components
01:27:53 there if you explore the iron button you
01:27:56 said that the fill mode can be set to
01:27:58 clear
01:27:58 to have neither a background nor a
01:28:00 border to outline to have just a border
01:28:03 or to solid to have a background color
01:28:05 so here i'm going with
01:28:07 outline and regarding the color we get
01:28:10 these
01:28:10 nine default colors primary tertiary and
01:28:13 so on
01:28:14 i can set this to danger here which is
01:28:16 one of the default colors
01:28:17 which will apply my default danger color
01:28:20 which turns out
01:28:21 by default to be red and of course you

01:28:23 could change that
01:28:24 but for now let's go with the default
01:28:27 and if we therefore reload this
01:28:29 we have this look now and please note
01:28:31 that on an android device up here
01:28:33 you need to reload if you switch to it
01:28:35 for the first time we actually also get
01:28:37 this nice
01:28:38 ripple effect super
01:28:41 now what about the icons now there is a
01:28:44 built-in
01:28:45 iron icon component
01:28:49 here you go now actually this will
01:28:51 redirect you to a brand new page because
01:28:53 you could add this to any app
01:28:56 as a separate package but the ionic
01:28:58 package we're importing from the cdn
01:29:01 actually has it included already so no
01:29:03 need for an extra import it's in here
01:29:06 and we simply throw our icon into our
01:29:09 button
01:29:10 if you want to use it there or wherever
01:29:12 you want to use it in your
01:29:13 app so i can add my iron icon in here
01:29:16 just like this right in front of the
01:29:18 clear word
01:29:20 now such a icon takes a name attribute
01:29:23 and the name in turn can be found from
01:29:25 this ironicans.com page
01:29:28 now if you search for clear here that
01:29:31 doesn't look good
01:29:32 but what about cancel or delete
01:29:36 well what about this cross now if we
01:29:39 click on that cross here
01:29:40 you see the full markup down there and
01:29:43 you see that name here
01:29:44 is actually close so let's go back
01:29:48 and let's enter close here as our icon
01:29:50 name
01:29:52 now with that i and i can add it and the
01:29:54 file saved once you reload the page
01:29:56 you will see your icon here and this
01:29:58 doesn't look too bad
01:30:00 but you can even improve the look a
01:30:02 little bit by clearly telling the icon
01:30:05 where it should
01:30:06 go into the button and you can do this
01:30:08 with a concept called
01:30:09 slots now slots are a default web
01:30:13 component concept
01:30:14 which basically allows web components to
01:30:16 reserve certain places in their
01:30:18 built-in markup where certain content
01:30:21 should be rendered or can be targeted
01:30:23 to be rendered and as always if there
01:30:27 are slots you can learn about them in
01:30:28 the official docs
01:30:30 so here in the uh button docs here
01:30:34 you find examples for buttons with icons
01:30:37 and different slots they target
01:30:40 so with that information here on our
01:30:43 icon you can add a slot of start for
01:30:46 example
01:30:48 and if you do that if you add that slot
01:30:50 start
01:30:52 you see the button is now the icon is
01:30:54 now a little bit further on the left we
01:30:55 have more spacing between the icon and
01:30:57 the text it looks a bit cleaner now
01:31:01 feel free to add a icon to add expense
01:31:04 on your own now
01:31:06 find a fitting icon here on the ionicons
01:31:08 page it should be an icon that kind of
01:31:10 signals that we can add something
01:31:12 and then try adding it to that button
01:31:15 we'll of course all
01:31:16 do it together but here's your chance to
01:31:18 pause the video
01:31:19 and try it on your own
01:31:23 were you successful let's first of all
01:31:26 find a fitting icon shall we
01:31:28 so here on ionicons if i search for add
01:31:31 what about this plus button of course if
01:31:34 you used a different one that's fine too
01:31:36 now here we find the the code for that
01:31:39 and we can just copy that from down
01:31:41 there
01:31:42 and then go back to our source code and
01:31:45 next
01:31:45 to add expense
01:31:49 i will add my icon with the add button
01:31:52 or with the add look now just as for the
01:31:55 close button i'll assign it to my start
01:31:58 slot
01:31:58 to adjust the spacing and generally make
01:32:01 sure that the button looks good
01:32:03 so with this added if we now reload here
01:32:06 is
01:32:07 the plus button so these are the buttons
01:32:10 added

01:32:11 what about some spacing around the
01:32:13 buttons and maybe we want to have them
01:32:15 aligned to the right actually how could
01:32:18 this be achieved
01:32:23 to control general things like a margin
01:32:26 around elements or paddings inside of
01:32:28 elements or
01:32:29 positioning inside of a container of a
01:32:31 box
01:32:32 you can use a utility feature provided
01:32:35 by ionic
01:32:36 or some utility features to be precise a
01:32:39 couple of utility css classes or
01:32:42 attributes you can add to elements to
01:32:44 have some default css kick in
01:32:46 you find that in the official guide
01:32:49 there under
01:32:50 layout by clicking on css utilities
01:32:53 now here you find a bunch of examples
01:32:55 and these are all
01:32:56 attributes you just add onto an element
01:32:59 to automatically apply some css styling
01:33:02 to it
01:33:02 that's a feature made available by ionic
01:33:05 out of the box
01:33:06 this allows us to for example add a
01:33:09 simple
01:33:09 diff yes we can use normal html elements
01:33:12 in there too you're not restricted to
01:33:14 using ionic elements only
01:33:16 so i add a normal div here around my
01:33:19 buttons
01:33:20 and what we can do there is we can add a
01:33:22 margin to add a margin in all directions
01:33:25 or just margin vertical and you can find
01:33:28 all of that
01:33:29 in this utilities documentation here
01:33:33 so margin vertical to add a margin to
01:33:35 top and bottom
01:33:36 and then to position the buttons on the
01:33:38 right you can add
01:33:40 text right here for example with that
01:33:44 simple trick
01:33:45 still no line of css written from our
01:33:47 site
01:33:48 we can add such a default look and this
01:33:50 looks quite nice in my opinion
01:33:52 now please note that this also has the
01:33:55 advantage of
01:33:56 always adding the same default margin
01:34:00 so this means that you don't have to
01:34:02 worry about
01:34:03 assigning a margin that is too slim and
01:34:05 therefore doesn't fit into the general
01:34:07 look of the rest of the page
01:34:08 or anything like this you can of course
01:34:11 overwrite the default
01:34:12 margin ionic assumes and sets but
01:34:15 thereafter
01:34:16 whenever you throw margin vertical or
01:34:18 margin or anything like this onto an
01:34:20 element
01:34:21 you will use this default look this
01:34:22 default margin
01:34:24 and that helps you keep a general look
01:34:27 uh
01:34:27 standardized look in your application
01:34:35 now this is all taking shape it's now
01:34:37 time to add some
01:34:38 logic and with logic i mean write some
01:34:41 code that does something when either of
01:34:43 these buttons is clicked
01:34:44 now of course later we'll do this with
01:34:46 the help of angular in this course
01:34:48 but as i mentioned multiple times you
01:34:50 don't need to do that with angular
01:34:53 this here will work with vanilla
01:34:55 javascript as well because we're just
01:34:57 throwing a couple of web components into
01:34:58 our app we can interact with them just
01:35:00 as we can do
01:35:01 with normal html elements and that by
01:35:04 the way of course is also the reason
01:35:06 why you can use ionic 4 and later
01:35:09 versions with angular with vue with
01:35:11 react with whichever framework you want
01:35:15 now let's add a app.js file here and you
01:35:18 can name the file however you want of
01:35:20 course
01:35:20 and let's import that file at the end of
01:35:23 our html file
01:35:24 right before the closing body tag here
01:35:26 with a script
01:35:27 import script source app.js so that this
01:35:31 will now
01:35:31 execute when this file is parsed and in
01:35:34 here i want to get access to my inputs
01:35:36 to read the values in them
01:35:38 i want to get access to my buttons to
01:35:40 add click listeners to them

01:35:42 and of course i also want to output
01:35:45 some data we entered below this
01:35:48 card so here we're actually
01:35:52 outside of this column and row so
01:35:55 first of all to get access to the inputs
01:35:57 in the button i will
01:35:58 add ids to them you could add css
01:36:01 classes or
01:36:02 use the tag selectors though since we
01:36:04 have multiple ion inputs using the tag
01:36:06 selector to get
01:36:07 access to them which work but would be a
01:36:10 bit more tricky
01:36:11 so here i'll just give this a reason or
01:36:14 input reason id this here will get an
01:36:18 id of input
01:36:22 amount and for the buttons here this
01:36:25 first button will get an id
01:36:27 of button cancel
01:36:30 and the second button down there this
01:36:33 one will get an id
01:36:34 of button confirm now obviously you can
01:36:38 use any id names you want
01:36:39 this is not an ionic feature these are
01:36:42 regular html ids
01:36:44 with these ids assigned let's go into
01:36:47 app.js
01:36:48 and store references to these elements
01:36:51 in some constants
01:36:52 like the reason input here
01:36:56 we can get access to it by using
01:36:57 document query selector
01:37:00 and then hashtag to use the id selector
01:37:02 input
01:37:03 reason and of course this here
01:37:07 this text here this name here should
01:37:09 match the id name you assigned here
01:37:11 input reason next we'll get access to
01:37:14 input amount
01:37:15 and for that let me just duplicate this
01:37:18 line here name this amount input and get
01:37:21 access to input amount
01:37:23 so these are the two inputs of course i
01:37:25 also want to get access to my buttons
01:37:26 so i'll have my cancel button which i
01:37:29 get access to with document
01:37:31 query selector and then hashtag button
01:37:35 cancel was the id i assigned and last
01:37:38 but not least the
01:37:39 confirm button with document query
01:37:42 selector
01:37:43 hashtag button confirm so now
01:37:46 access to all these uh elements is or
01:37:50 not access references to all these
01:37:52 elements are stored
01:37:54 in this vanilla javascript code i'm
01:37:56 writing here
01:37:57 i can now of course add my listeners
01:38:00 to the confirm button for example we can
01:38:03 add an event listener to the click event
01:38:05 and then this function here will get
01:38:08 executed once we click on the button
01:38:10 and for now we can just console.log it
01:38:13 works
01:38:13 to check well whether it works
01:38:17 so let me open the javascript console
01:38:19 here
01:38:20 on the right reload and click add
01:38:24 expense
01:38:25 and you should see it works now if you
01:38:27 wired this all up
01:38:28 correctly now that is perfect as a next
01:38:32 step let's make sure we
01:38:33 actually read the values we store in
01:38:35 here
01:38:36 and that we then well are able to
01:38:38 validate them
01:38:40 and output them below our card here
01:38:47 so with our first logic added here let's
01:38:49 now make sure that when we click this
01:38:51 confirm button
01:38:52 we do store the title or the description
01:38:55 of the expense the reason
01:38:57 and also the amount so for this
01:39:01 i'll add a constant entered reason here
01:39:05 where i access the reason input and
01:39:07 since this is an
01:39:08 input element it will have a value
01:39:10 property we can read to
01:39:12 get the value the user entered i'll also
01:39:14 store the entered
01:39:16 amount by accessing the amount input and
01:39:19 well then having a look at the value
01:39:21 there
01:39:22 now we could continue with these values
01:39:24 but i want to make sure that the user
01:39:25 did
01:39:26 enter valid values and for that we can
01:39:29 add our own simple validation logic by
01:39:31 adding a if check here

01:39:33 and if the entered reason here
01:39:37 when we trim that which will remove
01:39:39 excess white space at the beginning at
01:39:41 the end
01:39:42 if the length is then smaller or equal
01:39:45 to zero then the user didn't enter
01:39:47 anything
01:39:48 also if the entered
01:39:51 amount is smaller or equal to zero so
01:39:54 not its length but the real value
01:39:56 then the user entered a negative or a
01:39:59 zero
01:40:00 expense amount which is not a valid
01:40:02 amount or
01:40:03 last but not least if for the entered
01:40:05 amount when we trim it
01:40:08 if then its length is smaller or equal
01:40:11 to zero then the field is simply left
01:40:13 empty
01:40:15 so now i have this check and for now
01:40:17 i'll
01:40:18 just return here to basically stop the
01:40:20 execution of this function
01:40:22 and not continue any further if the
01:40:24 values are invalid
01:40:26 now if the values are valid then i want
01:40:29 to continue
01:40:30 and for now i can then console.log
01:40:33 entered reason and entered
01:40:36 amount here so let's go back
01:40:40 reload this page and enter a reason here
01:40:44 food for let's say 12.99
01:40:48 and add this expense and we see food
01:40:50 12.99 here
01:40:51 on the right of course seeing it here in
01:40:53 the console is
01:40:55 nice but not all we want now before we
01:40:57 continue though
01:40:58 let me check the validation if i don't
01:41:00 enter an expense
01:41:01 uh reason then you see nothing gets
01:41:03 printed on the right so this works
01:41:06 and if i enter let's say a value of zero
01:41:08 and a
01:41:09 valid reason here then this also doesn't
01:41:13 get printed with the expense amount of
01:41:15 one it does
01:41:16 so our validation works now let's make
01:41:18 sure we actually create ionic elements
01:41:21 dynamically in javascript code
01:41:23 to then attach them below our card and
01:41:26 render them with our entered reason and
01:41:30 amount
01:41:33 so i want to render a list of all these
01:41:35 expenses
01:41:36 below my card here now please keep in
01:41:39 mind we are in the iron grid with rows
01:41:41 and columns
01:41:42 and i added this to control the width of
01:41:44 my elements in the grid
01:41:46 the list which i want to render also
01:41:48 should have its width controlled
01:41:50 it should not take the full page width
01:41:52 on big screens
01:41:54 so i will add a new ion row beneath the
01:41:56 first one
01:41:58 with a new ion column inside of it
01:42:02 and in that iron column here
01:42:05 i want to render a so-called iron list
01:42:10 now i'll give this list an id of
01:42:13 expenses
01:42:16 list because i want to access this list
01:42:18 programmatically
01:42:19 and render items into it now iron list
01:42:22 here
01:42:23 is an element provided by ionic that
01:42:27 helps us structure
01:42:28 well list data so basically structure
01:42:31 elements
01:42:32 beneath each other and displaying it as
01:42:35 a well nice
01:42:36 list you can actually also add other
01:42:38 features like sliding list items and
01:42:41 these are all things we'll dive into the
01:42:43 course later
01:42:44 for now let's just go with the list like
01:42:46 this and add it just like that
01:42:48 and let's add some logic to add an iron
01:42:51 item dynamically to that list
01:42:53 so in app.js i want to get access to
01:42:56 this
01:42:56 list of expenses so my expenses
01:43:00 list here is fetched or a reference to
01:43:03 it is fetched with query selector
01:43:04 hashtag
01:43:06 expenses list so the id i added to the
01:43:08 expenses list now we can use this
01:43:10 reference to add new items to it
01:43:12 and i want to add new items here where i
01:43:15 currently console log the

01:43:16 entered reason and amount i'll create a
01:43:19 new
01:43:20 item with document create element which
01:43:23 is a default
01:43:24 dom api has nothing to do with ionic
01:43:26 that allows us to create
01:43:27 new html elements and now the nice thing
01:43:30 is
01:43:31 these web components these custom html
01:43:33 elements
01:43:34 can be created just like regular html
01:43:37 elements so here we can enter iron item
01:43:40 which is the selector
01:43:41 or the tag provided by ionic for this
01:43:44 well item element and we used the ion
01:43:48 item before
01:43:49 already when we didn't create it
01:43:50 programmatically we used it
01:43:52 here to wrap our label and input iron
01:43:55 item turns out to be
01:43:57 an element which can be used in
01:43:59 different situations
01:44:00 and i'll dive a bit deeper into that in
01:44:02 a later module where we have a closer
01:44:04 look at
01:44:05 components and do some deep dives on
01:44:07 some important components
01:44:09 iron item is one of them so ion item
01:44:12 actually can be used in different
01:44:13 situations
01:44:14 it can be used to group label and input
01:44:16 together
01:44:17 but it can also be used inside of our
01:44:19 iron list to
01:44:21 wrap all the content of a single list
01:44:23 item that basically should be rendered
01:44:24 in a nice way
01:44:27 so here i'm creating a new ion item
01:44:31 and on this new item here i want to set
01:44:34 a text content
01:44:35 which is equal to my entered reason
01:44:39 then a colon and then a dollar
01:44:42 sign whoops entered reason plus
01:44:45 then a colon then a dollar sign and then
01:44:47 the entered value so i'm just
01:44:49 constructing some text here where i have
01:44:51 the reason then a colon then a dollar
01:44:53 sign and after that the value
01:44:55 which i simply assumed to be in dollars
01:44:57 so now i'm
01:44:58 setting this as a text to my new item
01:45:00 and we can now reach out to the expenses
01:45:02 list which we got access to here
01:45:06 and call append child and we'll not do
01:45:10 this again later in the course then we
01:45:12 will use angular for all these dom
01:45:14 manipulations i'm just doing it here
01:45:16 with vanilla javascript
01:45:18 to give you an introduction of feeling
01:45:20 for just the ionic elements and nothing
01:45:22 else
01:45:23 so here i append a child and that child
01:45:26 is the new
01:45:27 item we created what should now happen
01:45:31 is that we see that up here
01:45:32 below our input here once we reload
01:45:36 and we enter valid data again and here
01:45:39 it is you see food
01:45:40 1299 show up below that and you can hit
01:45:43 this multiple times you can generate
01:45:45 more of these items
01:45:47 now this is how you can interact with
01:45:49 ionic components
01:45:51 in your code and whilst we will not
01:45:53 write this code again later
01:45:55 angular will basically do this for us
01:45:59 behind the scenes later so it's super
01:46:01 important to understand
01:46:03 that angular interacts with these web
01:46:05 components with the ionic components
01:46:07 just as it does with normal html
01:46:09 elements it can render them to the dom
01:46:12 and so on it's not angular compiling
01:46:15 these web components to some
01:46:17 normal html and javascript code instead
01:46:20 this
01:46:20 is normal html and javascript code that
01:46:23 can be used
01:46:24 directly with the dom apis
01:46:31 so with the items generated dynamically
01:46:34 let's make sure that when we do
01:46:35 add an expense we also clear the input
01:46:38 and let's make the clear button work
01:46:42 for this i will add a brand new function
01:46:44 up there
01:46:45 um where i create a new constant which
01:46:47 i'll name clear
01:46:49 and this will be a function so i store a
01:46:53 function in this clear constant to be
01:46:54 precise

01:46:56 where i reach out to my
01:46:59 reason input and set the value equal to
01:47:01 an empty string
01:47:02 and the same for the amount input and
01:47:04 that basically clears them right this
01:47:05 removes any input the user entered
01:47:08 this clear function should now be called
01:47:11 here after we appended our item
01:47:13 so we can just call clear here and this
01:47:15 refers to this clear function now
01:47:19 i also want to do that when i click the
01:47:22 cancel button so i will therefore add my
01:47:26 cancel button event listener down there
01:47:28 for a click event
01:47:30 and when this button gets pressed well i
01:47:32 can just point at clear
01:47:34 like this without parentheses because i
01:47:36 don't want to execute it immediately
01:47:38 instead i'll just pass a reference to
01:47:40 this function to the event listener
01:47:42 so that this will be executed
01:47:43 dynamically when this click
01:47:45 occurs it will execute this function for
01:47:47 me then
01:47:48 so with that if we reload and i enter
01:47:51 food
01:47:52 1299 and i clear this is removed then
01:47:55 you also see that the
01:47:57 items the labels float back in if i add
01:47:59 an expense this is also cleared but of
01:48:01 course the expense is also added
01:48:03 now last but not least let's make sure
01:48:05 we show some sum
01:48:06 some total expense at the bottom and for
01:48:09 this back in the html code
01:48:11 we can add a new ion row here
01:48:15 with a new ion column and
01:48:18 show our sum there for example by simply
01:48:22 adding a paragraph where we write
01:48:24 total expenses and then here i have a
01:48:28 span
01:48:28 which i'll use as a hook to render my
01:48:30 total expenses in
01:48:31 so i'll give this an idea of total
01:48:33 expenses so that i can easily get access
01:48:35 to that
01:48:36 from within my javascript code and with
01:48:38 that
01:48:39 id added on that span
01:48:42 we can get access to the total expenses
01:48:45 output
01:48:46 element or whatever you want to call it
01:48:47 here with query selector
01:48:50 total expenses
01:48:54 like that so this total expenses output
01:48:57 should now be updated with every item we
01:48:59 add
01:49:00 and therefore i will add a new variable
01:49:03 up there with let
01:49:04 total expenses which starts at zero
01:49:08 because
01:49:08 initially we have no expenses with every
01:49:11 item we add here
01:49:12 i can set total expenses equal to the
01:49:15 old value with the plus equal sign
01:49:17 shortcut
01:49:18 to the old value plus the amount
01:49:21 the entered amount and i will add a plus
01:49:23 in front of that to convert this
01:49:25 string which is by default any value you
01:49:28 fetch from my input element is a string
01:49:30 to a number and then this gets added to
01:49:32 the total expenses
01:49:33 we had before this updates the total
01:49:36 expenses
01:49:37 after updating them i can set my total
01:49:39 expenses output
01:49:41 text content equal to total expenses
01:49:43 here
01:49:44 so that this is not only stored in
01:49:45 memory in javascript but also written to
01:49:48 the dom
01:49:49 so with that if we reload and i add food
01:49:51 again with 12.99
01:49:54 and i also was in the cinema for 8.99
01:49:58 then we see our total expenses here at
01:50:00 the bottom
01:50:01 now the styling can be improved though
01:50:04 especially
01:50:05 on bigger screens
01:50:10 now we can fix the styling by simply
01:50:12 using the techniques we already learned
01:50:14 about
01:50:14 by using the grid and some of these css
01:50:17 utility classes
01:50:19 so let's start with the grid i can
01:50:22 essentially just copy
01:50:23 my grid setup i used up there
01:50:27 so size md6 offset md3 we can copy that
01:50:31 and add it to our other columns as well

01:50:33 so in this
01:50:34 second row where i have the expense list
01:50:36 i will add it here
01:50:38 and i will also add it to the column
01:50:39 here where i output my total expenses
01:50:42 with this simple change we make sure
01:50:45 that these columns
01:50:46 in separate rows but still columns in
01:50:48 these rows have the same size as the
01:50:50 column in the first row and therefore
01:50:53 now if we add
01:50:54 food here this looks way better in my
01:50:57 opinion
01:51:00 now also when i have some padding here
01:51:03 on this
01:51:04 output down there for that we can go to
01:51:06 that paragraph down there
01:51:08 and let's try adding margin here the css
01:51:11 utility attribute if you do that and you
01:51:14 reload
01:51:15 you will see that now this has the same
01:51:17 default margin as the other elements and
01:51:19 therefore it nicely aligns here on the
01:51:22 left
01:51:23 so this again uses the power of these
01:51:25 css utility attributes to
01:51:27 quickly add some default core styles
01:51:30 like margins or paddings
01:51:32 to different elements with that i'd say
01:51:34 we have quite a nice application here
01:51:41 so we have this nice demo app in a forum
01:51:44 that we'll never use again because for
01:51:46 the rest of the course we'll use angular
01:51:48 but still you learn a lot about some of
01:51:50 the core
01:51:51 ionic components and most importantly
01:51:54 where to find more information about the
01:51:55 components
01:51:56 and how to generally use them and have a
01:51:58 look at this app
01:52:00 it really looks nice it really looks
01:52:02 beautiful in my opinion
01:52:04 and that with very little work from our
01:52:06 side
01:52:07 and this is the power ionic gives you
01:52:09 and it even gives you the power to of
01:52:10 course
01:52:11 adjust all these styles if you need to
01:52:14 we'll do that later in the course as
01:52:16 well styling and theming
01:52:17 is an important topic before we do that
01:52:20 let's dive into a component which works
01:52:23 a bit differently
01:52:24 than the other components and which will
01:52:26 then also nicely explain why using
01:52:29 angular instead of vanilla javascript
01:52:31 can be more convenient
01:52:34 let's say when we enter some invalid
01:52:37 data for example we leave the fields
01:52:38 empty
01:52:39 and i click add expense we want to show
01:52:41 a little alert which warns the user that
01:52:44 the
01:52:44 entered value is invalid
01:52:47 now of course we could throw
01:52:51 an alert here invalid values
01:52:55 this uses the built-in alert
01:52:57 functionality every browser knows
01:52:59 if we do that if i reload then i get
01:53:02 this default alert here at the top
01:53:04 but we can certainly do way better how
01:53:06 about a native looking like alert here
01:53:09 in the middle of the app
01:53:10 ionic has us covered it does offer
01:53:14 components that help us with that but if
01:53:16 we have a look at the official component
01:53:18 stocks
01:53:18 we do find an alert and we find oh
01:53:22 an i alert controller and an iron alert
01:53:27 now thankfully you find some
01:53:28 instructions on how to use the alert
01:53:30 here
01:53:31 also with vanilla javascript instead of
01:53:33 just angular
01:53:34 but as you will learn with angular it's
01:53:36 way more
01:53:37 convenient but let's focus on the
01:53:40 vanilla javascript style for now
01:53:43 to throw such an alert first of all in
01:53:46 our ion app
01:53:47 somewhere maybe here at the bottom you
01:53:49 have to add the iron alert
01:53:51 controller now if you add this element
01:53:54 you'll not see any change on your screen
01:53:58 if you reload
01:53:59 you don't see that controller here it's
01:54:01 an invisible
01:54:02 element because it doesn't add any
01:54:04 visual output
01:54:06 it adds some functionality we can tap

01:54:08 into we can use
01:54:10 now to use it though we need to get
01:54:12 access to the ion alert controller
01:54:15 so in my javascript code here i'll add a
01:54:17 new constant
01:54:19 alert controller or alert ctrl
01:54:24 and i will simply use document query
01:54:26 selector to select that
01:54:27 ion alert controller because even though
01:54:30 we can't see anything on the screen
01:54:32 it of course still is a normal web
01:54:34 component just
01:54:36 one that doesn't really render anything
01:54:39 it
01:54:39 just adds some javascript functionality
01:54:42 behind the scenes
01:54:44 with access to this component we can tap
01:54:47 into this javascript functionality
01:54:50 so with the alert controller here where
01:54:53 i
01:54:53 do my validation i can actually call
01:54:57 create now this is a method provided by
01:55:01 this
01:55:01 alert controller component and you can
01:55:03 learn about this method in the official
01:55:05 docs of course
01:55:06 it's not a default html method create
01:55:09 takes a javascript object
01:55:11 because with this method we create a new
01:55:13 alert and with this object we can
01:55:15 configure
01:55:16 this alert and a one configuration we
01:55:19 can set up
01:55:21 is the message that gets displayed
01:55:24 like please enter a valid reason
01:55:28 and amount besides a message we can
01:55:32 also add a header and all these fields
01:55:34 you can set can of course be found in
01:55:36 the official docs
01:55:37 though later when we work with angular
01:55:39 this will also become easier because we
01:55:41 then have typescript support
01:55:43 and we get some help from our ide so for
01:55:45 now i'll just
01:55:46 enter this invalid inputs header by
01:55:49 knowing that this header field exists
01:55:51 and you just have to trust me for now we
01:55:54 can also add a buttons
01:55:55 array which allows us to label the
01:55:57 buttons which are displayed
01:55:58 and control how many buttons are
01:56:00 displayed in general and i will add one
01:56:02 button
01:56:02 which prints okay you can always
01:56:05 configure these buttons in more detail
01:56:07 and control what they do when they are
01:56:08 tapped but for now i'll just enter this
01:56:11 button which will then
01:56:12 as a default always close the alert
01:56:15 now create creates a new alert but if
01:56:18 you
01:56:18 save that and click the button again
01:56:20 after reloading you won't see anything
01:56:23 because it creates that and it does so
01:56:25 asynchronously and it does not display
01:56:28 it automatically instead to display the
01:56:30 created alert
01:56:31 you have to add then because create
01:56:34 actually returns a promise
01:56:35 which will fulfill when the creation of
01:56:38 this element is done
01:56:39 so here as an argument in the function
01:56:41 you pass to the then block
01:56:43 you'll get an alert element this is the
01:56:47 element that was created and it will be
01:56:50 that iron alert component here
01:56:52 if you would add this directly to the
01:56:54 dom like this it would not
01:56:56 work as intended instead this is always
01:56:58 created for you
01:56:59 by the alert controller but on this
01:57:02 alert
01:57:03 element you can then call present
01:57:06 to present it on the screen so now
01:57:10 with this code added if we go back to
01:57:12 the application reload and i tap this
01:57:14 button
01:57:15 we see this alert here now please also
01:57:18 note that here it looks like a typical
01:57:20 material design android alert if i
01:57:24 go to an iphone and i reload that's
01:57:28 always important you need to reload
01:57:29 after switching devices
01:57:31 if i click add expense not only do the
01:57:33 buttons look different
01:57:35 the alert style also looks as it should
01:57:37 look on
01:57:38 ios so this is how we can use
01:57:42 these special components all the
01:57:44 components

01:57:45 which end with controller in the docs
01:57:47 like the action sheet controller
01:57:49 or as you just saw the alert controller
01:57:52 but using these controller-like
01:57:54 components will get even easier once we
01:57:56 add angular
01:57:57 then we don't have to place them in the
01:57:59 dom even though we can't see them
01:58:01 and access them like this instead we'll
01:58:03 be able to inject them but more on that
01:58:05 later
01:58:10 i now want you to practice using these
01:58:12 components
01:58:13 i want you to build this simple
01:58:15 application here
01:58:16 where you can simply add a couple of
01:58:18 courses you enrolled in
01:58:20 like angular the complete guide
01:58:23 and then assign your rating and show
01:58:26 this output
01:58:27 below the input field so it's pretty
01:58:30 similar to what we had before
01:58:32 some differences for example this text
01:58:34 here is fat
01:58:35 and you can achieve this with default
01:58:36 html elements or css styling there are
01:58:39 multiple ways of doing that
01:58:41 and of course the look is a bit
01:58:42 different here i also didn't bother to
01:58:45 wrap this into a grid
01:58:46 feel free to do so to restrict the width
01:58:49 but i just want you to play around with
01:58:51 the components and
01:58:52 don't write the perfect app here instead
01:58:54 i want to make sure that you know how to
01:58:56 generally create such an app with a
01:58:58 header and then the main content
01:59:00 how to add these inputs with the
01:59:02 floating labels
01:59:03 how to add a button and then add some
01:59:05 javascript code that does something with
01:59:07 the inputs
01:59:08 you should add validation so that if you
01:59:10 enter an invalid value
01:59:11 you actually throw an alert and then you
01:59:14 will have used a lot of the things
01:59:15 you'll learn throughout this module
01:59:17 and hopefully have a better feeling for
01:59:20 how you work
01:59:21 with these ionic components now to solve
01:59:23 this assignment
01:59:24 you need absolutely no component we
01:59:26 haven't covered thus far
01:59:28 but still definitely dive into the
01:59:30 official docs in case you're stuck
01:59:32 or you're just not sure anymore how this
01:59:35 button was configured to look like this
01:59:37 or how this alert was shown good luck
01:59:40 with that
01:59:41 definitely check my solution to compare
01:59:44 yours to it
01:59:44 both to my video solution and the
01:59:46 attached solution code
01:59:52 so i'm in a new project so to say a new
01:59:56 index.html file which just has a basic
01:59:59 skeleton but no ionic elements in it
02:00:01 the ionic imports here are added though
02:00:04 for
02:00:04 the css code and for the javascript code
02:00:07 and my javascript file where i will add
02:00:09 my own logic
02:00:10 also is empty
02:00:13 so let's start working on that ionic app
02:00:17 and therefore as a main wrapper you
02:00:19 should have this ion app
02:00:21 element this ensures that everything is
02:00:23 wired up correctly and works correctly
02:00:25 behind the scenes
02:00:26 so definitely add that then i wanted to
02:00:29 have a header
02:00:31 with a nice toolbar and a title and
02:00:33 below that my content
02:00:35 now you learned that a header can be
02:00:36 added with iron header
02:00:38 and in there we can add an iron toolbar
02:00:40 in which we in turn can add an iron
02:00:42 title
02:00:43 which i'll simply set to my courses
02:00:46 also up there though this tile up there
02:00:48 of course has nothing to do with ionic
02:00:51 so now i added this header and the
02:00:53 toolbar with my own title
02:00:55 below the header i'll add the iron
02:00:57 content which will be the area where the
02:00:59 main page content gets rendered now
02:01:02 in that main content we need two inputs
02:01:06 and then a place to output what the user
02:01:08 entered and this of course is very
02:01:10 similar to what we did before
02:01:12 now as i mentioned feel free to use the

02:01:14 grid here the
02:01:16 ionic grid to control the width of the
02:01:18 cells and make it look awesome on all
02:01:20 devices i will save some time here
02:01:24 and don't use the grid and just add my
02:01:26 iron items instead
02:01:28 because if you remember or check the
02:01:30 docs iron items
02:01:32 should be used to wrap labels and inputs
02:01:34 that work together
02:01:36 and that's exactly what i want to have
02:01:37 here i want to add an iron label
02:01:40 where i want the user to enter a course
02:01:42 name and believe that
02:01:44 an iron input of type text where
02:01:47 the user can do just that enter the
02:01:49 course name
02:01:51 now that label will get a position of
02:01:53 floating
02:01:54 so that it floats nicely up when we
02:01:56 click into the input or
02:01:57 tab into it and that input will already
02:02:00 get an id
02:02:02 of input course name whatever you like
02:02:06 so that we can later select this from
02:02:08 inside our code
02:02:10 now i'll duplicate design item here
02:02:12 because i
02:02:13 also need an item for the rating
02:02:16 1 to five are accepted values
02:02:19 and here this should be of type number
02:02:22 because the user should enter a number
02:02:24 and i'll name this input course rating
02:02:29 if we save that you should see
02:02:32 something like this course name and a
02:02:34 rating which floats up
02:02:36 now actually i want to have a blue
02:02:38 toolbar and that can be achieved by
02:02:40 setting the color
02:02:41 attribute on the iron toolbar to
02:02:44 primary and this will automatically
02:02:46 color it blue
02:02:47 and watch the title color the title
02:02:50 white
02:02:51 that is another thing this does
02:02:53 automatically
02:02:55 okay so now we got the two inputs we got
02:02:58 our
02:02:59 toolbar here how about the button to
02:03:02 submit this all
02:03:03 beneath the iron items i'll add my iron
02:03:07 button
02:03:08 and on that button i'll set
02:03:11 add as a text and you can of course also
02:03:15 add an icon if you want to
02:03:16 i don't require that from you here but
02:03:18 you can add an icon
02:03:20 if you want you learned how that works
02:03:22 with using slots and so on
02:03:24 but what i definitely want to do is i
02:03:26 want to fix the positioning
02:03:28 right now this button doesn't look super
02:03:30 nice here
02:03:31 now we can easily fix this by giving it
02:03:33 a margin
02:03:34 which will add a margin around the
02:03:36 button if you do so
02:03:38 this looks much nicer so we got two
02:03:41 inputs in the button
02:03:42 we now need a place to output whatever
02:03:44 the user entered
02:03:45 and for that just as before i'll add a i
02:03:48 in list here
02:03:49 and give this an id of course list or
02:03:53 whatever you want
02:03:54 by the way i'll also give my button an
02:03:56 id of
02:03:58 button add
02:04:01 now we can start writing some code in
02:04:03 the app.js file which i do already
02:04:06 import here
02:04:07 so first of all we need to get access to
02:04:09 all these inputs and buttons
02:04:10 or the one button we have so to get
02:04:13 access
02:04:13 um i will use these ids again to get
02:04:16 my course name rating and so on and
02:04:19 store references to these elements and
02:04:20 constants
02:04:21 like here the course name input
02:04:25 i get access with document
02:04:28 queries selector hashtag input course
02:04:32 name
02:04:32 we can duplicate this and get access to
02:04:35 hashtag input course rating
02:04:37 with the course rating input
02:04:40 now the inputs are nice obviously we
02:04:42 also need access to the button
02:04:44 so let me duplicate this and add my
02:04:48 add button constant which refers to

02:04:52 button dash add so to the button with
02:04:55 the id
02:04:56 button dash add this one here and the
02:04:58 course list
02:04:59 is where all the entered course data
02:05:01 should be output so let's get access to
02:05:03 that element as well course
02:05:06 list with document query selector
02:05:10 hashtag course list
02:05:14 so now with that we can add a listener
02:05:16 to the add button
02:05:18 an event listener to the click event
02:05:20 which will execute well
02:05:22 when the button is clicked and a click
02:05:24 also counts if the user taps this on a
02:05:27 mobile device by the way
02:05:29 so here when we click this i want to get
02:05:32 my
02:05:33 entered course name by reading course
02:05:36 name
02:05:37 input dot value like this
02:05:41 and also i get the entered course rating
02:05:45 by reading course rating input.value
02:05:49 and now the first step is to validate
02:05:51 this to make sure that the user did
02:05:53 enter
02:05:54 anything at all and for the rating a
02:05:56 rating between 1 and 5.
02:05:58 so i'll add a if check and check if
02:06:00 entered course name
02:06:01 if we trim it has a length that is
02:06:04 smaller or equal to zero which would be
02:06:06 the case if it's empty
02:06:07 or if entered core's rating if we trim
02:06:11 it
02:06:11 has a length that is smaller or equal to
02:06:13 zero
02:06:15 or if entered course rating
02:06:18 is actually smaller than 1
02:06:21 or if entered course rating is actually
02:06:24 greater
02:06:25 than 5 because these values would be not
02:06:28 allowed it has to be between 1
02:06:30 and 5. if any of that is the case i will
02:06:34 return
02:06:35 otherwise you can proceed and now the
02:06:37 goal is to
02:06:38 just as we did it before in this module
02:06:40 create a new item
02:06:42 and append it to this course list so
02:06:45 here
02:06:45 new item is created with document
02:06:49 create element and there i create
02:06:52 an iron item
02:06:55 like this and on that new item
02:06:59 i will now actually set the inner html
02:07:01 content that is something new
02:07:03 and i will set this here with backticks
02:07:06 to use
02:07:07 a string literal to make it a bit easier
02:07:09 to construct the string
02:07:10 you could also concatenate multiple
02:07:12 strings but here i'll use the string
02:07:14 literal
02:07:15 to use a strong element and then we can
02:07:17 inject the dynamic value here and this
02:07:19 is a normal
02:07:20 next-gen javascript syntax nothing
02:07:22 specific to
02:07:23 angular or ionic or anything like that
02:07:26 here i can now simply input a variable
02:07:28 name or
02:07:29 an expression and the value of that
02:07:31 expression will be rendered into this
02:07:33 string which is generated in the end and
02:07:35 here i will enter my
02:07:37 um my entered course name
02:07:42 and after that let me also add a colon
02:07:45 here as text
02:07:46 after that i'll add my rating
02:07:49 and that will also be injected the
02:07:52 entered
02:07:53 rating and that and then i add
02:07:56 slash five to kind of output well the
02:07:59 rating
02:07:59 of five possible stars
02:08:02 so this is now simply a string being
02:08:04 constructed with backticks because this
02:08:07 allows us to
02:08:08 use this dynamic injection syntax the
02:08:11 alternative would have been to use
02:08:12 single quotes and basically concat this
02:08:15 string with dynamic and hard coded
02:08:16 values and with that
02:08:18 set to inner html so that we can use the
02:08:21 strong element in there
02:08:23 we can now append this new item to the
02:08:26 list
02:08:26 so to the course list we can call append
02:08:29 child

02:08:30 and then append the new item here
02:08:34 if you do that and you reload
02:08:38 let's try angular decomplete
02:08:42 guide and enter six
02:08:45 doesn't do anything is rejected one does
02:08:48 work because one is allowed
02:08:50 zero would not be allowed so this gives
02:08:53 us that output
02:08:54 um now that i look at this maybe it
02:08:57 would be nice to have some
02:08:58 white space here to get that um we have
02:09:02 to
02:09:03 use this special
02:09:07 code here which will render
02:09:10 a white space in html ampersand
02:09:14 nbsp semicolon
02:09:18 if you do that and save and enter
02:09:20 something
02:09:22 now we have a white space between the
02:09:23 name and the rating
02:09:25 okay cool so this is almost all i wanted
02:09:28 to achieve here
02:09:29 what's missing is a little alert that
02:09:32 warns me
02:09:33 when i do enter some invalid data here
02:09:35 and of course i also want to clear the
02:09:37 inputs
02:09:38 once i added a value or a new item
02:09:41 so let's start with clearing the inputs
02:09:44 that is pretty simple
02:09:45 all we have to do is we have to access
02:09:47 the course name input and set its value
02:09:50 equal to an empty string
02:09:51 and then do the same for the course
02:09:53 rating input
02:09:55 this ensures that we clear both when we
02:09:57 do enter a value
02:09:58 so therefore now if i reload here and i
02:10:01 have react
02:10:02 the complete guide which of course is
02:10:04 awesome
02:10:05 then this looks good now of course
02:10:09 regarding the validation and the alert
02:10:11 you learned that this works by adding
02:10:13 such a controller
02:10:15 in our ionic app so i will add my ion
02:10:18 alert
02:10:20 controller here and we can now get
02:10:23 access to that from inside our app.js
02:10:26 code
02:10:27 alert controller by using document query
02:10:31 selector and then select
02:10:34 iron alert controller with the tag
02:10:37 selector here
02:10:39 and now this alert controller can be
02:10:41 used to construct an alert
02:10:43 by calling create and pass a javascript
02:10:46 object where you configure the alert
02:10:48 and if you remember you could set a
02:10:50 header here
02:10:52 invalid input for example add a message
02:10:56 please enter a valid course name
02:10:59 and rating and if you want this is
02:11:02 optional it will show a default button
02:11:03 otherwise
02:11:04 you can also set your own buttons like
02:11:07 okay
02:11:08 so this is now the configuration we can
02:11:10 use to create a new alert but as you
02:11:12 learned this alert is not instantly
02:11:14 created and shown
02:11:15 instead this returns a promise which
02:11:18 eventually will resolve to the created
02:11:20 alert element
02:11:21 and therefore in this function we pass
02:11:23 to the then block
02:11:24 we get access to the alert element and
02:11:26 then we can call
02:11:27 alert element present and this will then
02:11:30 actually show the alert
02:11:32 so with this final change now if you now
02:11:35 reload and you try to add something
02:11:36 invalid
02:11:37 you get this alert and if you do enter
02:11:41 valid input like this one
02:11:43 [Music]
02:11:45 it of course just works so this is the
02:11:48 finished assignment here
02:11:50 and technically this uh was of course
02:11:52 not
02:11:53 super fancy we haven't built the most
02:11:56 amazing app you ever saw
02:11:58 but we had a detailed look at the core
02:12:01 elements the core building blocks of any
02:12:03 ionic
02:12:04 app you will be building and therefore i
02:12:06 hope this general
02:12:08 way of thinking about these components
02:12:10 is now really clear
02:12:11 and hammered into your mind because it's

02:12:14 so important and we will use it for the
02:12:15 rest of the course of course
02:12:21 so in this module we learned a lot about
02:12:24 the core ionic components
02:12:26 you learned that the official docs are
02:12:28 the place to go to learn
02:12:29 all about them all possible
02:12:31 configurations
02:12:33 because it's impossible to just memorize
02:12:36 them you will learn them by heart over
02:12:38 time as you use them
02:12:39 but it is totally normal that you
02:12:41 initially look into here and learn how
02:12:43 you can use certain components how you
02:12:45 can combine them
02:12:46 and i still look into this documentation
02:12:49 as well
02:12:50 because there are some components which
02:12:52 you use all the time which you quickly
02:12:54 know how to use and which you
02:12:55 don't need to look up but there also are
02:12:58 components you don't use that often
02:12:59 and then the docs are your friend plus
02:13:02 new features might be added and you can
02:13:04 always see them here
02:13:06 so with that we were able to build
02:13:08 something like this something like this
02:13:10 application
02:13:11 and we achieved this with just these
02:13:13 ionic components without our own styling
02:13:16 and the behavior is then the only thing
02:13:18 we control with our javascript code
02:13:20 so the behavior of the app and that is
02:13:22 exactly where
02:13:24 angular can help us and why we will use
02:13:26 angular
02:13:27 because if we will implement everything
02:13:29 on our own this will be quite hard with
02:13:32 vanilla javascript
02:13:33 it doesn't have to be angular but you
02:13:35 will definitely need some framework
02:13:37 or library at some point of time so that
02:13:40 you don't have to reinvent the wheel all
02:13:42 the time
02:13:42 for example when it comes to adding
02:13:44 elements to the dom you don't want to do
02:13:46 that
02:13:46 you want to focus on your business logic
02:13:48 and not on these nitty-gritty details
02:13:50 which you can still easily mess up so
02:13:53 therefore we use
02:13:54 angular to be very precise
02:13:57 there are three main reasons why we
02:13:59 would use angular or any other framework
02:14:02 because doing everything on our own will
02:14:05 be hard
02:14:06 especially hard will be if we have more
02:14:09 complex logic
02:14:10 as i mentioned we don't want to reinvent
02:14:12 the wheel of the
02:14:13 low level implementations we don't want
02:14:15 to access the dom on our own
02:14:17 we just want to control how will our dom
02:14:20 need to change which data will need to
02:14:23 be output like a list of products
02:14:25 we don't want to take care about the
02:14:26 actual outputting logic
02:14:28 we want to control the logic behind that
02:14:31 so adding a product validating input
02:14:34 products
02:14:35 fetching them from a server that is what
02:14:37 we want to do
02:14:38 we also don't want to do all the state
02:14:40 management on our own
02:14:42 because state management in bigger apps
02:14:44 can be really hard
02:14:46 passing the data around correctly and
02:14:48 updating different parts
02:14:50 in the application when some data
02:14:52 changed somewhere else
02:14:53 this can quickly become a nightmare and
02:14:56 angular makes this super easy with its
02:14:58 services
02:14:59 so to prevent our user interface from
02:15:02 behaving unpredictably
02:15:03 and our application having tons of bugs
02:15:07 we definitely want to use a state
02:15:09 management system as the one offered by
02:15:11 angular
02:15:12 it's services and dependency injection
02:15:15 and
02:15:15 this by the way all the kind of touches
02:15:18 on the alert controller
02:15:19 and so on you remember this element we
02:15:22 had to place
02:15:23 in our html code and then get access to
02:15:25 to create an alert
02:15:27 with angular and ionic we'll be able to
02:15:30 just inject this alert controller
02:15:32 thanks to a little wrapper package ionic

02:15:34 gives us
02:15:35 around uh well the core components
02:15:38 it then makes using these controller
02:15:40 components way easier
02:15:42 so that again we don't have to focus on
02:15:44 adding it and selecting it with the
02:15:46 query selector
02:15:47 but that we can just inject it and start
02:15:49 using it
02:15:50 and last but not least what if our
02:15:52 application needs multiple pages
02:15:55 right now we always had one page in our
02:15:57 dummy app right we didn't navigate
02:15:58 around
02:15:59 we didn't press a back button and go
02:16:01 somewhere else
02:16:02 in bigger apps you of course have that
02:16:04 you have tabs you have a site drawer
02:16:06 you have different pages different parts
02:16:08 of the app like a list of products
02:16:11 your cart and the user profile this
02:16:14 routing could be done with just ionic it
02:16:17 actually has its own router component
02:16:19 but the angular router is way more
02:16:22 powerful than that
02:16:23 it gives us a lot of advanced
02:16:25 functionalities
02:16:26 and smart routing so routing correctly
02:16:30 where we also can work with
02:16:31 things like query params in the url and
02:16:33 so on is actually quite difficult
02:16:35 so we definitely want to use a finished
02:16:38 and tested and battle proven
02:16:40 routing solution like the angular router
02:16:42 to have efficient fast
02:16:44 and powerful feature-rich routing we can
02:16:46 add in our app
02:16:47 to switch pages and navigate around
02:16:51 that is why we use angular because it
02:16:53 helps us
02:16:54 with the complex logic because we can
02:16:56 focus on writing the logic and angular
02:16:58 does the rest of updating the dom
02:17:01 it gives us clear rules of how we
02:17:02 structure our app
02:17:04 with components directives services and
02:17:06 so on
02:17:07 so that we have a clear plan of
02:17:10 building a bigger app it helps us with
02:17:13 services bindings and
02:17:15 with routing to transport state around
02:17:18 and speaking of routing
02:17:20 there it helps us with passing data and
02:17:22 with lazy loading etc
02:17:24 so this is why we will use angular from
02:17:27 the next section on and i will show you
02:17:29 in detail
02:17:30 how to set up an angular and ionic
02:17:32 project we already did it in section one
02:17:34 of the course
02:17:34 but now i will also walk you through the
02:17:37 created project
02:17:38 and explain how angular and ionic work
02:17:41 together
02:17:42 and how ionic actually leverages the
02:17:44 angular cli under the hood
02:17:50 we had a look at the basics about ionic
02:17:54 and
02:17:54 their about its component suit obviously
02:17:57 we'll explore
02:17:58 all the exciting parts of ionic
02:18:00 including styling
02:18:01 theming running it on a native mobile
02:18:04 device and creating a real native mobile
02:18:06 app
02:18:07 but before we do all of that it's time
02:18:10 to add
02:18:10 angular to our ionic app or to create
02:18:14 an ionic angular app to be precise
02:18:17 as you learned in the last module ionic
02:18:20 works with
02:18:21 any framework or non at all if you don't
02:18:24 want to use
02:18:24 a framework but this course is of course
02:18:27 about ionic
02:18:28 and angular now i did briefly touch on
02:18:31 why we would want to
02:18:33 use a framework like angular instead of
02:18:36 just
02:18:37 ionic with vanilla javascript and
02:18:39 therefore in this module
02:18:41 i'll briefly dive into this again but
02:18:43 i'll not bore you we talked about that
02:18:44 so this will be a quick part
02:18:46 and thereafter we'll set up an angular
02:18:48 plus ionic project and i'll explain how
02:18:51 that works internally and what it does
02:18:53 and how it differs to a normal
02:18:55 angular project and we'll then dive into
02:18:59 how we use ionic components how we do

02:19:02 use them combined with angular
02:19:04 components how these components interact
02:19:07 we'll also dive into how we can use the
02:19:09 angular router to switch between
02:19:11 pages and what ionic's role in that is
02:19:15 and we'll also have a look at ionic
02:19:19 controllers
02:19:20 so these controller components like the
02:19:22 alert controller we saw in the last
02:19:24 course module
02:19:25 and how using them becomes much simpler
02:19:28 when using ionic
02:19:32 angular
02:19:35 so why would we use angular i did
02:19:38 briefly touch on this in the last course
02:19:40 section already
02:19:41 and i'll just repeat it here in case you
02:19:43 skipped that otherwise you can skip this
02:19:45 lecture here
02:19:46 so we use angular because when we build
02:19:49 more complex
02:19:50 apps where we have more and more complex
02:19:53 logic in our javascript code
02:19:55 we don't want to focus on nitty gritty
02:19:58 details like
02:19:59 updating the dom correctly managing our
02:20:01 application state correctly
02:20:03 these things are hard and they are
02:20:05 annoying and we don't want to
02:20:06 care about them we want to focus on the
02:20:09 core logic that drives our app
02:20:11 so all these things which will be hard
02:20:13 like handling the complex logic
02:20:15 where we would have to reinvent the
02:20:17 wheel over and over again
02:20:18 where we might introduce bugs or state
02:20:21 management
02:20:22 where we could get an unpredictably
02:20:24 behaving user interface if we mess it up
02:20:27 because we don't update one part of the
02:20:29 app correctly when something changes in
02:20:31 another part
02:20:32 or things like routing where we might
02:20:36 have some form of switching between
02:20:38 pages but it doesn't
02:20:39 handle advanced use cases like
02:20:42 protecting
02:20:42 certain routes from unauthenticated
02:20:44 access or anything like that
02:20:46 these are things which are relatively
02:20:48 hard to implement on our own
02:20:50 and hence we use frameworks like angular
02:20:52 and of course you could use react or
02:20:54 view here but this is an ionic angular
02:20:56 course
02:20:57 where angular helps us with solving
02:20:59 these problems
02:21:00 it gives us clearly defined rules on how
02:21:02 we build our apps with components and
02:21:04 directives
02:21:05 and it takes care about the actual dom
02:21:08 rendering so that we can just focus on
02:21:10 the logic
02:21:11 that changes our state our data that
02:21:13 triggers
02:21:14 a dom update in the end it gives us
02:21:17 services and other means of
02:21:19 transporting data from a to b from
02:21:21 component to component
02:21:23 and it also helps us with routing where
02:21:25 we can conveniently pass data around
02:21:27 too where we got lazy loading where we
02:21:29 can add authentication guards and all
02:21:32 this fun stuff
02:21:33 this is why we would use angular instead
02:21:36 of just ionic
02:21:38 for very very simple apps you'll not
02:21:40 need it
02:21:41 and you will also always find solutions
02:21:44 around angular if you don't want to use
02:21:46 it
02:21:47 other libraries or frameworks for
02:21:48 example but this is an ionic angular
02:21:50 course angular is an amazing framework
02:21:53 it can be used to build extremely
02:21:55 powerful
02:21:56 and fast and reactive web applications
02:21:59 and therefore it's the perfect fit here
02:22:01 for ionic
02:22:02 where we want to also build a fast
02:22:05 reactive
02:22:06 web and then also native mobile
02:22:09 application
02:22:14 with that out of the way we can now
02:22:16 create a new
02:22:17 ionic angular project and for this you
02:22:21 should open your
02:22:22 terminal or command prompt and navigate
02:22:25 into the path where you want to create
02:22:27 your project folder

02:22:29 now we will use the ionic cli which is a
02:22:32 tool provided by the ionic team
02:22:34 for creating this project because that
02:22:36 is the easiest way
02:22:38 of setting up an ionic angular project
02:22:40 you can find
02:22:41 now for that to be usable in case you
02:22:43 skipped module 1 of this course
02:22:45 you first of all need to install node.js
02:22:48 from nodejs.org
02:22:50 there fetch the latest version and only
02:22:53 if you're facing issues with that
02:22:55 choose the lts version here so if choose
02:22:58 the latest version download it and go
02:23:00 through the installer
02:23:01 it's available for mac and windows and
02:23:03 you get a convenient installer for which
02:23:05 you simply have to go
02:23:06 and we do install node.js for two
02:23:09 reasons
02:23:10 reason number one is that it also gives
02:23:12 us nodes package manager
02:23:14 npm which is the de facto standard
02:23:17 package manager
02:23:18 for managing javascript dependencies not
02:23:21 only in node.js projects but actually in
02:23:24 any project that uses javascript no
02:23:26 matter if it's a front-end or backend
02:23:28 project
02:23:28 and therefore our angular ionic project
02:23:31 also will use npm
02:23:32 to manage its dependencies and with
02:23:35 dependencies i mean things like the
02:23:36 angular framework the ionic framework
02:23:39 and dependencies of these frameworks
02:23:42 so that's the first reason npm the
02:23:45 second reason is node.js itself
02:23:47 even though we'll not write any node.js
02:23:50 code in this course
02:23:51 we need node.js because behind the
02:23:55 scenes
02:23:55 the angular cli and the ionic cli which
02:23:58 we'll both use
02:24:00 use node.js to build our project
02:24:03 to spin up a development server where we
02:24:05 can preview our app
02:24:07 and so on so download and install
02:24:09 node.js
02:24:10 and thereafter make sure you also have
02:24:13 the ionic
02:24:14 cli installed now in case you need
02:24:16 detailed instructions you can find that
02:24:18 on ionicframework.com
02:24:20 under developers installation and then
02:24:23 install with cli
02:24:25 it's this command with npm installed
02:24:27 which you have to
02:24:29 execute so let's copy that into our
02:24:33 terminal here and on mac and linux you
02:24:35 might need to add a pseudo in front of
02:24:37 this
02:24:37 on windows make sure you're running the
02:24:39 command prompt as administrator
02:24:41 by right-clicking on its executable and
02:24:43 then choosing run as administrator
02:24:46 and this will now install the ionic cli
02:24:49 globally on your machine
02:24:51 now we do need that ionic cli for
02:24:54 things like creating new projects but
02:24:57 also then
02:24:58 to run our projects to build our
02:25:01 app especially then also to build a
02:25:03 mobile app
02:25:04 that is something where the ionic cli
02:25:07 will be important
02:25:08 and this is generally our global ionic
02:25:11 project management tool you could say
02:25:13 now with it installed and navigated into
02:25:16 that folder here where you want to
02:25:18 create your
02:25:19 project run ionic start and you saw this
02:25:22 command in the first module of the
02:25:24 course already
02:25:25 this allows you to create a new project
02:25:28 now first of all
02:25:30 here as it tells you you should choose a
02:25:32 project name
02:25:33 and i will simply go with
02:25:38 ionic angular course you can of course
02:25:41 choose any name you want
02:25:43 then you should pick a template and i
02:25:45 will go with the blank template
02:25:47 if you would use another template you
02:25:49 would start with certain features
02:25:50 already added in the dummy app you get
02:25:52 out of the box but we will add these
02:25:54 features step by step together in this
02:25:56 course so that you learn all about them
02:25:59 hence let's go with the blank template
02:26:01 and this will now create a new project

02:26:03 and install all the required
02:26:05 dependencies of the project which will
02:26:07 take a while and i'll be back once it's
02:26:09 done
02:26:11 once the installation finished you're
02:26:13 asked whether you want to
02:26:15 install the free app flow sdk and you
02:26:18 don't need that
02:26:19 um it's an extra tool offered by ionic
02:26:21 you can find more information about it
02:26:23 in the official ionic docs of course
02:26:26 um there you can find out what app flow
02:26:29 is
02:26:29 in the end it's a service that requires
02:26:31 you to sign up you can sign up for free
02:26:34 and then you can also test your app a
02:26:36 bit easier
02:26:37 on native devices and you can even build
02:26:40 it in the cloud which
02:26:41 also allows you as a windows user to for
02:26:43 example build ios apps
02:26:45 that then however will be a paid feature
02:26:47 and therefore i'll not show it in this
02:26:48 course
02:26:49 so i'll choose no here we don't need
02:26:51 that and thereafter
02:26:53 i created this project we could now run
02:26:55 it with the instructions you see here
02:26:57 but i'll actually not do that
02:26:59 and instead open that in my editor of
02:27:01 choice which is
02:27:02 still visual studio code here is the
02:27:05 created project
02:27:06 opened in visual studio code now one
02:27:09 quick note about visual studio code
02:27:11 under view extensions here you can
02:27:14 actually make sure that you install the
02:27:16 angular essentials
02:27:17 simply search for angular essentials up
02:27:20 here to
02:27:21 make your life as an angular developer a
02:27:23 bit easier in case you don't have these
02:27:25 extensions yet
02:27:26 and i also used and will still use the
02:27:30 material
02:27:31 icon theme which you can also install
02:27:33 from there this is optional
02:27:34 it just changes the file icons in the
02:27:37 project but still this is the exact same
02:27:38 look i have so
02:27:39 if you want to have that same look make
02:27:41 sure to install this extension
02:27:43 thereafter you can go back to view
02:27:45 explorer
02:27:46 so this is the project and it basically
02:27:49 and that is important
02:27:50 is a normal angular project now let me
02:27:53 walk you through it and explain
02:27:54 where it differs from a normal angular
02:27:57 project and how it is connected to ionic
02:28:04 in this project here as i mentioned
02:28:07 generally we have a normal
02:28:09 angular project if you explore the
02:28:11 source folder you will find a main ts
02:28:13 file
02:28:13 and in the end here as you can tell we
02:28:16 bootstrap
02:28:17 a normal angular app you find absolutely
02:28:19 nothing about ionic in here this is all
02:28:22 code
02:28:22 you find in any normal angular web
02:28:25 application
02:28:26 the index.html file also looks pretty
02:28:29 normal
02:28:30 we see the tile leader says something
02:28:33 about ionic but other than that it's a
02:28:35 normal html file
02:28:36 and we do have our app root component in
02:28:39 there
02:28:40 now i do expect you to know how an
02:28:42 angular application starts
02:28:44 that this app root selector is in the
02:28:47 end
02:28:48 picked up by our app module which is the
02:28:51 module we bootstrap we start
02:28:53 our app with and the app module in turn
02:28:55 which can be found in the app folder
02:28:57 this defines that our bootstrapping our
02:29:00 root component
02:29:01 is the app component which happens to
02:29:03 have this exact same selector
02:29:05 app root here and therefore the content
02:29:08 of the template of this component
02:29:10 will be rendered in the place of this
02:29:12 selector in the index.html file
02:29:14 and this then therefore is mounting our
02:29:17 root angular component to the real dom
02:29:20 and any other component we include in
02:29:22 our template of that root component
02:29:25 or in then other components templates

02:29:27 will therefore be
02:29:29 mounted onto the dom as well and will be
02:29:31 part of our angular
02:29:32 application if that is something you
02:29:34 never heard about
02:29:36 definitely learn angular first i do
02:29:38 expect this basic knowledge from now on
02:29:41 so this all looks quite familiar now one
02:29:44 thing that is new is the theme
02:29:45 folder and here we're also using sas or
02:29:49 scss by default though you could do that
02:29:51 in a normal angular app as well
02:29:53 the theme folder will be important
02:29:55 though because here
02:29:57 we see some strange syntax which is
02:29:59 actually a css
02:30:01 feature heavily used by ionic css
02:30:04 custom properties also known as css
02:30:07 variables and in the end this is not
02:30:10 some
02:30:11 hacky new feature offered by onik this
02:30:13 is a standard css feature
02:30:15 about which you also can learn in my
02:30:17 complete css guide here on udemy
02:30:19 and it allows you to define your own
02:30:22 variables
02:30:23 which can hold any kinds of values like
02:30:25 colors but you can also store
02:30:27 units you can store sizes
02:30:30 margins you can store whatever you want
02:30:32 in there and you can then reuse these
02:30:34 variables
02:30:35 and assign them in your app to other
02:30:37 properties
02:30:38 so somewhere else in the app we could
02:30:40 set a background color of a div
02:30:42 to this variable and it would take
02:30:44 whichever color is stored in this
02:30:46 variable
02:30:47 ionic uses this concept heavily since
02:30:49 this makes it easy for us
02:30:51 to adjust the global look of our
02:30:53 application
02:30:54 that however is something i'll come back
02:30:56 to in a styling and theming module
02:30:58 i just wanted to mention it here
02:31:01 more interesting is of course how this
02:31:03 app now interacts
02:31:05 with ionic how is it connected exactly
02:31:08 if we have a look at the angular json
02:31:11 file there
02:31:13 we'll see that if we scroll down a bit
02:31:15 this here is actually the
02:31:16 build setup for our default build we
02:31:19 would execute when building our angular
02:31:21 app
02:31:22 and there we do import some assets and
02:31:25 the first interesting thing here is that
02:31:27 we see that
02:31:28 the ionicons so these ionic icons are
02:31:30 included
02:31:31 as assets that of course is not the case
02:31:33 in a standard angular project
02:31:35 instead ionic created an angular project
02:31:38 for us
02:31:38 where the configuration is already
02:31:40 adjusted to
02:31:42 include these icons so that we can use
02:31:44 them
02:31:45 in our angular app here now that is the
02:31:49 first interesting part we also have that
02:31:52 ionic config
02:31:53 json file here which is very simple but
02:31:56 in the end
02:31:57 this will allow you to for example set
02:31:59 the app the identifier
02:32:01 of your ionic app
02:32:06 in the package.json file we of course
02:32:09 also see that
02:32:10 we have all these angular imports but
02:32:11 then we also have some ionic imports
02:32:14 and especially interesting is that ionic
02:32:16 angular import here
02:32:19 we'll find that ionic angular package
02:32:21 being used
02:32:22 in our app module which is the root
02:32:25 module of our angular app
02:32:27 there we generally find default angular
02:32:29 code we have our ng module
02:32:32 we declare our app component we
02:32:34 bootstrap it we import the browser
02:32:36 module
02:32:37 but then we also see the ionic module
02:32:40 being used here and we also have these
02:32:43 providers down there which are also not
02:32:45 there in a standard normal web app you
02:32:48 build with angular
02:32:50 now this is all imported from ionic and
02:32:53 from ionic angular specifically
02:32:55 we import that ionic module and this

02:32:58 ionic module here
02:33:00 in the end as it is included in the app
02:33:02 module
02:33:03 unlocks all these ionic components in
02:33:06 our
02:33:07 angular app here now you would of course
02:33:09 correctly say what does it need to
02:33:11 unlock didn't you say that web
02:33:12 components can be used anywhere
02:33:14 by default yes but first of all we of
02:33:17 course need to import them
02:33:19 we need to import our ionic package and
02:33:21 in the previous sections we did that by
02:33:23 including a cdn link
02:33:25 here we will never find this link
02:33:27 because there is no
02:33:28 cdn link or any other import link
02:33:31 instead
02:33:31 this ionic module will import the ionic
02:33:35 web components
02:33:36 but it will actually do more than that
02:33:38 for us because
02:33:39 why do we actually have an ionic angular
02:33:41 package
02:33:42 if ionic is all about having web
02:33:45 components we can
02:33:46 drop into any app by default why do we
02:33:49 need a separate
02:33:50 ionic angular package then if it should
02:33:52 work with any framework
02:33:58 the ionic angular package in the end is
02:34:01 a wrapper
02:34:02 package around the ionic component suit
02:34:05 so you can think of it as an as a
02:34:08 package
02:34:09 that takes all these ionic components
02:34:11 these web components which can be used
02:34:13 anywhere
02:34:14 and wraps them into a separate angular
02:34:17 specific
02:34:18 package or module into this angular
02:34:21 module also
02:34:22 which can only be used in an angular app
02:34:24 but this is done because it makes the
02:34:26 usage of these components
02:34:28 in angular easier and actually also more
02:34:31 efficient
02:34:31 especially when we later talk about
02:34:33 things like the alert controller modal
02:34:36 controller
02:34:36 so these controller like components we
02:34:39 already had a look at
02:34:40 so in an angular app we use this ionic
02:34:42 angular package which gives us the ionic
02:34:45 component suit
02:34:46 but which acts as a so-called binding as
02:34:49 it makes the usage of these components
02:34:51 easier and kind of
02:34:53 gives us a bridge to conveniently use
02:34:56 them
02:34:56 in a way we would use angular components
02:34:59 as well you could say
02:35:00 and the ionic module here does just that
02:35:03 it basically includes
02:35:04 all these uh web components and gives us
02:35:08 that
02:35:08 extra magic on top of it which will help
02:35:11 us with for example these controllers
02:35:14 as always purely optional but still
02:35:16 interesting if you visit the official
02:35:18 ionic github repository
02:35:20 i did show you the core folder in the
02:35:22 last module
02:35:23 there you can find all these core web
02:35:25 components
02:35:26 if you dive into the angular folder here
02:35:29 you actually can see how that ionic
02:35:31 angular package is set up
02:35:33 and there you will see that what it does
02:35:35 here in the zionic module for example
02:35:38 is it takes all these core
02:35:41 ionic web components and simply
02:35:44 declares them so this is all added to
02:35:47 declarations
02:35:49 and it does so because this simply wraps
02:35:52 the web components into
02:35:53 angular components so that a angular
02:35:56 doesn't complain about
02:35:58 unknown elements being used in its
02:36:00 templates because by default it only
02:36:02 accepts angular components and
02:36:03 normal html elements and b
02:36:06 we get additional uh features as you
02:36:09 will see throughout this course
02:36:11 so that is the idea behind the ionic
02:36:13 module and this is how
02:36:14 the angular project and ionic are
02:36:17 connected it's a totally
02:36:18 normal angular project and we just add
02:36:21 ionic

02:36:22 with this module with a little bit of
02:36:24 extra configuration and angular json
02:36:26 and therefore we can now start using the
02:36:28 ionic components and features
02:36:30 in our normal angular app now since it
02:36:33 is a normal angular app if you open
02:36:36 a terminal which you can deal with view
02:36:38 terminal
02:36:39 or with the shortcut you see there you
02:36:42 can of course run
02:36:43 ng-surf to bring up the development
02:36:46 server where you can preview this app
02:36:48 and this would work
02:36:49 however i recommend ionic serve
02:36:52 but this behind the scenes will only use
02:36:55 ng
02:36:56 surf it runs a special script but in the
02:36:59 end that just
02:37:00 does the same as ngserv you could say
02:37:02 but it automatically also opens this in
02:37:04 a new window
02:37:05 uses a specific port and so on so i will
02:37:08 use ionic server
02:37:10 but it will use ngsurf behind the scenes
02:37:12 basically
02:37:13 here is the running project and as
02:37:15 before i'll open my developer tools here
02:37:18 and preview this in the mobile view so
02:37:21 to see how it would look like
02:37:23 roughly on a mobile device and i'll go
02:37:25 with the pixel 2 for now
02:37:28 so this is how we use angular and ionic
02:37:31 or how we create an app and how the
02:37:34 two frameworks or libraries work
02:37:36 together
02:37:37 time to now get our hands dirty and
02:37:39 build a simple dummy app here
02:37:41 so that we can also see how we use the
02:37:42 ionic components and how we use these
02:37:45 special controller
02:37:46 components
02:37:51 i did spend a lot of time talking about
02:37:53 how angular and ionic work together
02:37:56 but it is super important to understand
02:37:58 that and to be aware of
02:38:00 how the two parts do work together
02:38:03 now it's time to get our hands dirty we
02:38:06 do have that home component here
02:38:08 as a default and i will actually delete
02:38:10 that and build an app from scratch
02:38:13 now for that i'll open a new tab in my
02:38:15 terminal
02:38:16 the upper tab should keep on should be
02:38:19 kept open because this process needs to
02:38:21 be
02:38:21 kept running it will automatically watch
02:38:23 your code for changes
02:38:24 and rebuild and reload the app when it
02:38:26 changes
02:38:28 in the second window we can now use the
02:38:30 angular cli
02:38:31 to generate components so with a ng
02:38:34 generate component
02:38:35 or shortcut ng gz you can generate a new
02:38:39 component in your app
02:38:40 you can also do this by hand but this of
02:38:42 course is faster
02:38:43 now i want to build a very very very
02:38:46 simple recipe book
02:38:47 implementation i basically want to have
02:38:50 a list of recipes and if we tap one we
02:38:52 can view the details about this recipe
02:38:56 therefore i'll add a new component which
02:38:59 i'll call
02:39:00 recipes however i want to load this
02:39:04 as a page so i want to basically use the
02:39:07 angular router
02:39:09 to replace the entire content of the
02:39:11 current page of what we currently see on
02:39:13 the page
02:39:13 with the content of this component now
02:39:16 obviously pages
02:39:17 in angular are just components but we
02:39:20 can also use the ionic cli to generate
02:39:22 it
02:39:23 ionic generate and then if we hit enter
02:39:26 you can actually select from different
02:39:28 things you can build you can also build
02:39:30 a component there and under the
02:39:32 under the hood this just uses ng
02:39:33 generate but you do have a special
02:39:36 page element you can select here
02:39:39 so i will choose page and then i'll give
02:39:41 it a name which is recipes
02:39:44 and this now executes n ng generate page
02:39:46 recipes
02:39:48 this is a new command added by ionic so
02:39:50 that's another part where it kind of
02:39:52 adjusts
02:39:52 the default behavior of the angular

02:39:54 project and it gives us this recipes
02:39:56 folder
02:39:57 and now the special thing is the naming
02:39:59 here and that it automatically gives us
02:40:02 a module which sets up a route for this
02:40:04 recipes page
02:40:06 so that we can load the entire module
02:40:08 lazily
02:40:09 and actually it even adjusted the app
02:40:12 routing module already
02:40:13 to include the pav recipes where it does
02:40:16 include
02:40:17 lazy loading for that recipes module so
02:40:20 that's very convenient we get lazy
02:40:22 loading for our pages out of the box
02:40:24 with this command
02:40:25 which is while use it for the creation
02:40:27 of new components that will be used as
02:40:29 pages
02:40:30 now i did delete the home component so i
02:40:33 will also delete that path in the
02:40:34 routing setup
02:40:35 so that i only have that root path where
02:40:37 i now want to redirect to recipes
02:40:40 and then the recipes path where i do
02:40:42 have my lazy loading in place that
02:40:44 points at the recipes page module
02:40:46 which should be loaded when we try to
02:40:47 reach that path here
02:40:49 and in the recipes module we simply
02:40:51 render the recipes page component
02:40:53 the recipes page component is a normal
02:40:55 angular component though
02:40:57 and we can use it as a normal angular
02:40:59 component
02:41:00 in the recipes page html file we get
02:41:03 this setup out of the box by ionic we
02:41:06 got our
02:41:07 iron header with a toolbar and a title
02:41:09 i'll set the title to recipes
02:41:11 we have to iron content with some
02:41:13 padding added to it i'll get rid of it
02:41:15 for now
02:41:16 and add a paragraph where i say recipes
02:41:18 page
02:41:19 works now this page is loaded through
02:41:22 the angular router
02:41:23 as you can tell we're using the normal
02:41:25 angular router module here
02:41:27 in the app routing module and that is
02:41:29 then included here
02:41:30 in the app module so nothing special
02:41:32 there
02:41:33 one special thing can be seen in the app
02:41:35 component though
02:41:36 there we have that iron app wrapper
02:41:39 which i mentioned should be there
02:41:40 around your entire application and
02:41:43 therefore
02:41:44 the root component of our application of
02:41:46 course is the right place to include it
02:41:49 and in there we have this ion router
02:41:51 outlet now that is interesting
02:41:53 because in a normal angular app we would
02:41:55 have just
02:41:56 a router outlet now let's go with a
02:41:59 router outlet
02:42:00 and save all files and then back here
02:42:03 the home path doesn't exist anymore so
02:42:05 let's reload the
02:42:07 main path it loads recipes
02:42:10 and i see recipes here at the bottom now
02:42:13 so this doesn't look right does it
02:42:17 the reason for that is the way we load
02:42:18 this the router outlet can be used
02:42:21 theoretically because again
02:42:22 and i will hammer this into your head
02:42:25 this is
02:42:26 a normal angular project and therefore
02:42:28 we can use
02:42:29 normal angular features like angular's
02:42:31 routing
02:42:32 but to get nice page transitions and the
02:42:36 page being displayed correctly
02:42:38 on the screen which requires things like
02:42:40 the css
02:42:41 height consumption of the page being set
02:42:44 to 100
02:42:45 and so on to get all of that you should
02:42:48 use the
02:42:48 iron router outlet which in the end
02:42:51 wraps the
02:42:52 angular router outlet and adds some
02:42:54 extra stylings and features
02:42:56 and when you do that as this page
02:42:59 reloads
02:43:00 you will see that all of a sudden this
02:43:02 looks correct
02:43:03 so both works but iron router outlet is
02:43:06 built to be used with

02:43:08 ionic driven pages so with angular
02:43:11 components
02:43:12 that create an ionic page by having a
02:43:15 header
02:43:16 a content and so on so ion router outlet
02:43:20 is
02:43:20 we'll use iron router outlet in this
02:43:22 course therefore
02:43:28 back to our recipes page i said i wanted
02:43:30 to display a list of recipes here
02:43:33 so let's include a i list and now the
02:43:35 nice thing is
02:43:36 here in visual studio code with the
02:43:38 angular essentials package installed
02:43:41 i now get auto completion here in my
02:43:43 templates
02:43:44 thanks to this ionic angular wrapper
02:43:47 actually
02:43:47 which unlocks all the ionic components
02:43:50 as angular components
02:43:51 and i would get all the completion
02:43:53 support for angular components here
02:43:55 hence i get it for these ionic
02:43:57 components too
02:43:58 because they're all wrapped into angular
02:44:00 components so to say
02:44:01 so i can add my iron list here and on
02:44:05 that iron list or in that ion list
02:44:07 i want to render a couple of items a
02:44:09 couple of recipes
02:44:11 now of course we don't have any recipes
02:44:13 yet and i will not create an overly
02:44:16 complex app at this point we'll do that
02:44:18 later with the course project
02:44:19 so for now i will simply create a
02:44:24 new file here my recipe model
02:44:27 typescript to define how a recipe should
02:44:29 look like
02:44:30 and i'll use an interface here name it
02:44:33 recipe
02:44:34 and i want my recipes to let's say have
02:44:37 an id which is of type string a title
02:44:41 which is of type string
02:44:43 an image url which is of type string and
02:44:46 then some
02:44:47 ingredients which is an array of strings
02:44:51 something like bananas apples so a
02:44:53 really simple recipe definition
02:44:56 now in case this is something you've
02:44:57 never seen again please go through my
02:44:59 angular complete guide first
02:45:01 this is a typescript feature we're
02:45:03 defining an interface here we can
02:45:04 basically use this as our own type and
02:45:07 we can ensure that we therefore
02:45:09 always work with the same data with data
02:45:11 with the same structure
02:45:13 in our application so with the recipe
02:45:15 interface created here
02:45:17 in the recipes page typescript file i
02:45:20 will now add a recipes
02:45:22 property which is of type recipe
02:45:25 array and the recipe is of course my own
02:45:28 model
02:45:29 and therefore this type has to be
02:45:30 imported from the recipe model file
02:45:33 and this should not be an empty array
02:45:36 but instead i'll start with an array
02:45:38 that already has a couple of recipes
02:45:40 and each recipe should have an id like
02:45:43 r1 whatever you like
02:45:44 it should have a title like
02:45:47 schnitzel if you took my angular
02:45:50 complete guide you know what i'm talking
02:45:51 about
02:45:52 it should have an image url and for that
02:45:55 i'll quickly pick
02:45:56 a lovely schnitzel image here i copied
02:45:58 in a url you can simply find an image
02:46:01 where on google image search later in
02:46:04 the course i'll show you how to use the
02:46:05 device camera but for now let's go with
02:46:07 this hard-coded
02:46:08 url here and i also need my ingredients
02:46:12 and here we certainly need french
02:46:14 fries and we need
02:46:17 pork meat and maybe we also
02:46:22 need some salad
02:46:27 now i'll quickly add another recipe here
02:46:30 and of course you can add anything you
02:46:32 want
02:46:32 i'll go with some nice spaghettis here
02:46:36 and quickly search an image for that as
02:46:38 well brought in a url
02:46:41 and ingredient wise we need spaghetti
02:46:44 and we need uh meat and probably also
02:46:47 some
02:46:47 toe tomatoes
02:46:50 now here i got some linting error
02:46:52 regarding my url being too long

02:46:54 um i'll just ignore that here so with
02:46:57 the recipes added here
02:46:59 i want to output them in my iron list
02:47:02 and this can be done by adding an iron
02:47:04 item here
02:47:06 and since i want to repeat this for
02:47:08 every element in my
02:47:10 ingredient list i'll dump an ng4
02:47:12 statement on it so using the default ng4
02:47:15 directive we can use in any angular
02:47:16 project
02:47:18 and then i'll go through all my recipes
02:47:20 i have here so with let recipe of
02:47:22 recipes i loop for all my recipes
02:47:24 and in the iron item here i of course
02:47:27 want to display
02:47:28 the image let's say on the left and on
02:47:31 the right i then want to have my text
02:47:33 for that we can use a component i
02:47:34 haven't shown you before and of course
02:47:36 as always you'll find that in the
02:47:38 official docs
02:47:39 and that would be the iron avatar this
02:47:42 is a component which can wrap the iron
02:47:44 image
02:47:44 and the iron image in the end is like
02:47:46 the normal image
02:47:48 just with some optimizations one of the
02:47:50 optimizations being
02:47:51 that it's only loading the image when
02:47:53 it's uh visible so when the user can
02:47:55 actually see it
02:47:56 so if it scroll down outside of the
02:47:59 current viewport of the user
02:48:00 this will not be loaded and i'll bind
02:48:03 that
02:48:03 with property binding square brackets to
02:48:07 my recipe image url here
02:48:12 now this avatar here will get a slot of
02:48:14 start
02:48:15 in the iron items so that it's all the
02:48:17 way on the left
02:48:19 and next to the avatar i'll add a iron
02:48:21 label here
02:48:22 as a wrapper around my text simply and
02:48:24 there we can use
02:48:25 string interpolation to output the
02:48:27 recipe title
02:48:30 with that let's save it and let's see
02:48:32 what we get when this application runs
02:48:36 here this looks very nice we got this
02:48:39 list of
02:48:40 elements and here we already see how
02:48:42 ionic
02:48:43 components these ones here wrapped into
02:48:46 angular components
02:48:47 thanks to at ionic angular and angular
02:48:50 works together
02:48:55 it's time for a second page we do have
02:48:58 our
02:48:59 list of recipes here and that is of
02:49:01 course neat
02:49:02 but when we tap a recipe i'd like to
02:49:04 display a details page
02:49:06 where we can see the image a bit bigger
02:49:10 and also viewed a list of ingredients
02:49:13 for example
02:49:14 now for that i will again run ionic
02:49:16 generate
02:49:17 and you could now hit enter and select
02:49:19 page from the drop down
02:49:21 or you simply type ionic generate page
02:49:24 and then
02:49:24 i'll create this in the recipes folder
02:49:26 so i'll start with recipes
02:49:28 slash because you can define a path to
02:49:30 the component here
02:49:32 and then i'll name it recipe dash detail
02:49:34 so recipe detail is the newly created
02:49:36 component
02:49:37 and it is created in the recipes folder
02:49:40 so
02:49:41 let's wait for this to finish and it's
02:49:43 done
02:49:44 it again gave us a new component folder
02:49:48 with a recipe detailed page
02:49:50 component which does have its own module
02:49:52 for lazy loading
02:49:54 and in the app routing module here we
02:49:56 now also have a new path
02:49:58 which points at recipe detail and then
02:50:01 loads this lazily
02:50:04 now of course you don't have to keep
02:50:05 that default setup though
02:50:07 and i want to have a different one i
02:50:09 want to have a path recipes which loads
02:50:11 my
02:50:11 well recipes page module but then i want
02:50:14 to have a path
02:50:15 recipes slash some recipe id that loads

02:50:19 the recipe detail page
02:50:21 now to make this work what we can do is
02:50:24 on that recipes route here
02:50:27 we can add children which is an array of
02:50:31 route definitions and then the first
02:50:33 child
02:50:34 has a path of empty so just recipes here
02:50:38 and this should now load the recipes
02:50:41 page module
02:50:43 and then i'll add a second child here
02:50:46 with a path
02:50:46 of colon recipe id and this defines a
02:50:50 dynamic segment
02:50:51 in angular which means this can actually
02:50:53 be anything in the url
02:50:55 so recipes slash abc which would reach
02:50:58 this
02:50:58 recipes slash one two three would too
02:51:01 but then we will be able to read that
02:51:03 value on the component that is
02:51:06 loaded for this page so here i want to
02:51:10 load my children i want to load this
02:51:13 route so let's add
02:51:14 load children here and let's get rid of
02:51:16 this recipe detailed
02:51:18 path down there so now this is the new
02:51:20 routing setup i want to have
02:51:22 if we save it like this
02:51:26 it should recompile and it should reload
02:51:28 and still show us the recipes
02:51:30 if i now add slash abc after recipes
02:51:33 then it actually loads the recipe detail
02:51:35 page here now obviously we don't see
02:51:37 anything on that page because we haven't
02:51:39 added any logic
02:51:40 but this is how the routing will
02:51:42 generally work now
02:51:43 now that is a good first step now let's
02:51:45 make sure that on the recipe detail page
02:51:48 we actually do display the details about
02:51:50 a recipe
02:51:51 and for that i need a global state
02:51:53 management solution
02:51:54 where i do store the recipes because
02:51:56 right now the recipes are stored in the
02:51:58 recipes page component
02:52:00 here and that is nice for this page but
02:52:03 if i need
02:52:04 that data in another page i have no easy
02:52:06 way of getting access to it
02:52:08 yes you could somehow import the recipes
02:52:11 page component but that is not how you
02:52:12 do that
02:52:13 in angular and it would actually lead to
02:52:16 strange side effects
02:52:17 and not be a good solution instead we
02:52:20 want to use a angular service for that
02:52:27 let's add an angular service and again i
02:52:29 do assume that you know what angular
02:52:31 services
02:52:32 are and why we would use them we can
02:52:35 generate it with the ionic generate
02:52:36 command again if you hit enter
02:52:38 you'll see that in there you can select
02:52:42 a service
02:52:43 of course you can also type ionic
02:52:44 generate service and then the name
02:52:46 or the path of the service but for now
02:52:48 i'll go with the drop down
02:52:50 so now i'm asked for the name or path of
02:52:52 the service
02:52:53 and i want to create a recipes service
02:52:56 so i'll create it in the recipes folder
02:52:58 and then the name of the service will
02:53:00 also be recipes so recipes slash recipes
02:53:03 it is
02:53:04 and this gives me a new recipes service
02:53:07 in the recipes
02:53:08 folder now this automatically gets at
02:53:11 injectable provided in root which
02:53:13 ensures that this
02:53:14 is provided application wide we can use
02:53:17 the same instance of the service in
02:53:19 any component any page of the entire app
02:53:22 and of course here it's important that
02:53:24 we use the same instance so that if our
02:53:26 recipes data would change
02:53:28 it is reflected in all components and
02:53:30 not just in components using that
02:53:32 specific service instance
02:53:34 and therefore now this is our service i
02:53:37 will now take my
02:53:38 recipes i have set up in the recipes
02:53:40 page and cut them from there
02:53:43 and instead add them here to the recipe
02:53:46 service
02:53:47 now having the recipes in here is of
02:53:49 course nice but now we need them back in
02:53:52 the recipes page right
02:53:53 now how do we do that well it is a

02:53:56 public property
02:53:57 so we could just access it like this
02:54:01 however i will turn it into a private
02:54:03 property so that we can't just access it
02:54:05 like this
02:54:06 and instead i'll add a method which i'll
02:54:09 name
02:54:10 get all recipes you can name it however
02:54:13 you want
02:54:14 and there i will return let's say a copy
02:54:16 of that recipe array so that if we then
02:54:19 would added
02:54:20 the array returned by this method inside
02:54:23 of the component
02:54:24 we wouldn't add it the original array
02:54:27 and this is simply related to how arrays
02:54:30 and objects work in javascript
02:54:32 and that they are reference types and
02:54:34 not primitives
02:54:36 attached you find an article and video
02:54:38 where i dive a bit deeper into that in
02:54:40 case you're interested
02:54:41 so here i'll create a copy with the
02:54:43 spread operator
02:54:44 by pointing at this recipes now what
02:54:46 this does is it pulls
02:54:48 all the elements of this array out of it
02:54:51 and then adds it to a new array down
02:54:54 there and then i return this new array
02:54:56 which is a perfect copy of the old array
02:54:58 not of the objects in the array but of
02:55:00 the array itself at least
02:55:03 now i can also already add a get recipe
02:55:06 method which requires a recipe id
02:55:10 as an argument and this will return a
02:55:12 single recipe
02:55:13 for that id so here i want to return
02:55:15 this
02:55:16 recipes and then i can use the find
02:55:18 method which is a default
02:55:20 javascript method i can use on arrays
02:55:23 and this method takes a function which
02:55:25 will execute on every element in the
02:55:27 array
02:55:28 and then if this function returns true
02:55:30 we basically tell
02:55:31 find that this is the object we were
02:55:33 looking for and it will stop execution
02:55:35 and not run
02:55:36 find on any other element in the array
02:55:38 and give us back that element it was
02:55:40 running on
02:55:41 instead so the function i pass here gets
02:55:44 the recipe as an input because again
02:55:46 it executes this function on every
02:55:49 element in the array and this is an
02:55:50 array of recipes so what we get in every
02:55:52 function execution is a single recipe
02:55:55 and there i want to return true if this
02:55:57 is the recipe i'm looking for
02:55:59 and falls otherwise and therefore here
02:56:01 in this condition
02:56:02 i will compare the idea of the recipe
02:56:04 i'm looking at with the recipe idea i
02:56:06 got as an argument and if these are
02:56:08 equal
02:56:08 then i have the recipe i want to return
02:56:10 and then i do return
02:56:12 it now here just as with the array i
02:56:14 will create a copy of that object
02:56:17 by wrapping this whole call here
02:56:20 in curly braces and then i can use the
02:56:22 spread operator here as well
02:56:24 this will pull out all the properties of
02:56:27 the return recipe object
02:56:28 and add them into a new object
02:56:31 so this is now the service we can use in
02:56:34 the recipes page and the recipe detail
02:56:36 page
02:56:37 and this is already angular's state
02:56:40 management
02:56:40 in action it isn't very complex here
02:56:44 but writing a similar logic in your
02:56:46 vanilla javascript app
02:56:49 would already be more complicated and it
02:56:51 will become more complicated throughout
02:56:53 the course where we will have
02:56:54 more and more complex state management
02:56:57 so now the recipe service is what i want
02:56:59 to use in my components
02:57:00 and as you know we can get access to a
02:57:03 service by injecting it
02:57:04 into a component so here in the recipes
02:57:07 page component
02:57:09 i want to inject the recipes
02:57:12 service and for that you need to define
02:57:14 the type here recipes service
02:57:17 and you need to import that from your
02:57:20 recipe service file by the way
02:57:22 in the recipe service you should also

02:57:24 make sure you're importing that recipe
02:57:26 model
02:57:26 so let's add this you can click the
02:57:28 light bulb here to get
02:57:30 help with that so the recipe model is
02:57:33 required because we're referencing it
02:57:34 here in the service but back to the page
02:57:36 now
02:57:37 in the page i'm now injecting the recipe
02:57:39 service and i'm using that typescript
02:57:41 shortcut
02:57:42 where i automatically assign the
02:57:44 argument i'm getting here
02:57:45 to a private property of this entire
02:57:48 class so that i can use the recipe
02:57:50 service anywhere in the class and not
02:57:52 just in the constructor
02:57:53 ngon init then always is a great place
02:57:56 for initialization work
02:57:58 so here i want to call recipe service
02:58:00 get all recipes
02:58:02 this returns an array of recipes and i
02:58:04 want to store this in this
02:58:06 component and therefore here i will
02:58:08 re-add my recipes
02:58:10 array like this but initially this is
02:58:14 undefined
02:58:15 and it will be set here so we'll
02:58:18 set recipes this recipes so my local
02:58:21 property here
02:58:22 equal to the recipes returned by get all
02:58:24 recipes
02:58:27 now what all that gives us is that if i
02:58:29 now save this
02:58:30 it will recompile and give us the exact
02:58:33 same look as before
02:58:37 but now we'll also be able to tap into a
02:58:41 single recipe on the recipe detail page
02:58:43 let's do that next
02:58:49 so let's get a single recipe on the
02:58:51 recipe detail page
02:58:52 now to get it we need the recipe id
02:58:55 right because in
02:58:56 get recipe we do require the id
02:58:59 now conveniently we get that id as a
02:59:02 dynamic segment
02:59:03 on our path here so on recipe detail
02:59:07 page we just need to extract that
02:59:08 and for this we can use a default
02:59:10 angular strategy
02:59:11 where we get information about the
02:59:13 activated route
02:59:15 activated route you do inject this
02:59:18 from at angular router is where you need
02:59:20 to import the actuated route
02:59:22 and this is an object which you can use
02:59:24 an engine in it
02:59:26 to then have a look at your param
02:59:29 map which is a complex name but which in
02:59:31 the end means
02:59:32 a map of all the parameters this route
02:59:35 receives and parameters are these
02:59:37 dynamic url segments
02:59:39 now this is not an object with all these
02:59:41 segments instead it's a so called
02:59:43 observable
02:59:44 now observables are a concept heavily
02:59:47 embraced by angular as you probably know
02:59:49 and will use it a lot in this course
02:59:51 attached you find some resources to get
02:59:53 you started with observables
02:59:55 in case you never heard about them here
02:59:57 i do expect you to know the basics about
02:59:59 them
03:00:00 observables are basically objects you
03:00:02 can subscribe to to get
03:00:04 data either one-time data like when you
03:00:06 are sending an http request or multiple
03:00:09 times
03:00:09 if you subscribe to something which
03:00:11 emits new data every
03:00:13 x seconds or whenever a user clicks
03:00:15 somewhere or something like this
03:00:17 this observable here will emit new data
03:00:19 whenever
03:00:20 our dynamic segments change even if we
03:00:22 are still on the same page
03:00:23 but they somehow change because we have
03:00:25 a button that changes them
03:00:28 in subscribe we pass in a function that
03:00:30 will execute when we receive new data
03:00:32 and that function will get a per map
03:00:35 object
03:00:36 and this now actually is the object
03:00:37 where we can retrieve our parameters
03:00:39 from
03:00:40 so first of all i can check if this
03:00:43 paramap
03:00:44 does not have recipe id as a parameter
03:00:49 it should have because we set it up here

03:00:51 recipe id
03:00:52 but if it somehow wouldn't have it which
03:00:54 is very unlikely and unrealistic but if
03:00:56 it wouldn't have it
03:00:58 then we want to redirect the user here
03:01:01 we want to
03:01:02 make sure the user leaves the page here
03:01:07 and i'll come back to how we can go back
03:01:09 programmatically
03:01:10 in a second i will also return here
03:01:14 so that no other executes runs after
03:01:16 this
03:01:18 if however we make it after this check
03:01:21 here which we should
03:01:22 uh in most cases so we do have a recipe
03:01:24 id we can extract it
03:01:26 so the recipe id can be extracted from
03:01:30 the paramap
03:01:31 with a get and then the name of the
03:01:34 parameter
03:01:35 now obviously the name here and here but
03:01:37 not this one
03:01:39 but string names here have to match
03:01:42 the name you set up in your routing
03:01:44 configuration without the colon but the
03:01:46 part
03:01:46 after the colon this has to match
03:01:49 so now i'm extracting my id here and now
03:01:52 we can use the service to load it
03:01:54 so for this we need to inject our recipe
03:01:57 service
03:01:58 here recipes
03:02:02 service like this
03:02:06 you need to import that recipes service
03:02:10 type from the recipe service file up
03:02:12 there
03:02:13 and with it injected there i can now
03:02:15 reach out to my recipe service
03:02:18 get my recipe and pass that recipe id
03:02:21 i extracted as an argument now this will
03:02:24 return
03:02:25 a single recipe and to use it in the
03:02:27 template we need to store it in a
03:02:28 property of our class here
03:02:30 so i'll name this loaded recipe you can
03:02:33 name it whatever you want
03:02:34 and it will be of type recipe and it is
03:02:36 a good pattern a good practice
03:02:38 to clearly state the type an object will
03:02:42 hold
03:02:42 so here i say that this will actually be
03:02:46 a recipe or null but initially it's
03:02:49 undefined but thereafter once there is
03:02:51 data in it it should be of type recipe
03:02:53 and for that you need to import recipe
03:02:55 from your recipe model
03:02:58 so loaded recipes now where i can store
03:03:00 this recipe i'm retrieving here
03:03:02 like this and now we can access the
03:03:04 loaded recipe data
03:03:06 in the template of course
03:03:09 in the template of the recipe detail
03:03:11 page i want to output the image
03:03:14 for that i'll remove the padding here
03:03:16 and i can simply add iron image
03:03:18 and bind its source to my
03:03:21 loaded recipe image
03:03:24 url and below the image here
03:03:29 let me also wrap this into
03:03:33 the iron grid actually to control the
03:03:35 size of that
03:03:37 so here i have my iron column and we'll
03:03:40 see how we adjust it later for now i'll
03:03:42 just wrap it in there
03:03:43 below that in a new iron row in a new
03:03:46 iron call you always need to have a
03:03:48 column
03:03:48 in your rows there i want to have a h1
03:03:51 tag with the title
03:03:53 so i'll use string interpolation here
03:03:55 and then access loaded recipe
03:03:58 title and if we have a look at the
03:04:02 recipe
03:04:03 model then we also have the ingredients
03:04:06 it would be nice to output these as well
03:04:08 and which better uh component to use
03:04:12 than a iron list so in a new row and
03:04:15 column
03:04:16 i'll add my iron list here
03:04:19 and in there again we can use i iron
03:04:21 item with ng4
03:04:23 to go through all the ingredients so
03:04:25 i'll add a loop here
03:04:27 let ig for ingredient off
03:04:31 loaded recipe ingredients this loops for
03:04:34 all the ingredients
03:04:35 and i simply output the ingredient name
03:04:37 here
03:04:38 ig refers to an element in ingredients
03:04:40 and ingredients is just an array of

03:04:42 strings
03:04:42 so we can directly output that here okay
03:04:45 nice so this
03:04:47 should work now let's have a look if it
03:04:50 works
03:04:51 remember the ids of our recipes are r1
03:04:54 and
03:04:54 r2 and therefore if i manually edit the
03:04:57 route here in the app
03:04:58 and load slash recipes slash r1
03:05:02 we should load recipe one and here it is
03:05:04 doesn't look too bad we can do something
03:05:06 about the styling
03:05:07 but it doesn't look too shabby now i
03:05:10 actually
03:05:11 want to make sure that my title up there
03:05:14 doesn't say recipe detail
03:05:15 but actually shows the name of the
03:05:17 recipe that was loaded
03:05:19 so here i will output loaded
03:05:22 recipe title with string interpolation
03:05:25 you can do this up here too
03:05:26 not just in the content of course you
03:05:28 can use the loaded recipe anywhere
03:05:30 in this angular component and that
03:05:33 should be a good first step
03:05:34 and i also want to give my toolbar here
03:05:37 a color of
03:05:38 primary also by the way in the recipes
03:05:40 page
03:05:42 and then later in the styling and
03:05:43 theming module i'll also show you how
03:05:45 you can generally
03:05:46 set all backgrounds of all toolbars to
03:05:49 this primary color instead of having to
03:05:52 add this manually
03:05:53 to every toolbar but for now we'll do it
03:05:56 manually
03:05:57 and as this app now reloads this doesn't
03:05:59 look too bad
03:06:00 now let's also center schnitzel here and
03:06:03 make sure that
03:06:04 our image here this column in which it
03:06:06 is has no padding
03:06:08 and for that you can go back to the
03:06:09 recipe detail page
03:06:11 and on the h1 tag we can center this
03:06:14 with the
03:06:14 css utility attribute text
03:06:17 center which you can learn more about in
03:06:19 the official docs of course on ionic
03:06:22 framework
03:06:23 under developers ui components if you go
03:06:25 to the guide
03:06:27 and then there under layout css
03:06:29 utilities
03:06:30 there you find all these utility
03:06:32 attributes you can add
03:06:34 and i don't just want to center the text
03:06:36 on this column which has my image
03:06:38 i also don't want to have padding around
03:06:40 it so on the column we can add
03:06:42 no padding actually and that is
03:06:44 something you can also learn when you
03:06:46 dive into the official grid
03:06:47 documentation
03:06:49 this reloads the page it reduces the
03:06:51 padding
03:06:52 but if we inspect it there still is a
03:06:54 little bit of padding around the entire
03:06:56 grid well for that let's copy
03:06:59 notepadding and add it to the entire
03:07:00 grid as well
03:07:04 and now this is gone i'm quite happy
03:07:07 with that progress but
03:07:09 entering the url by hand is not really
03:07:11 how we want our users to
03:07:13 work with our app right so how can we
03:07:15 make sure that when we tap this we go to
03:07:17 the second page
03:07:23 to go to the recipe detail page when we
03:07:25 click a recipe item
03:07:27 we can use a feature you already know
03:07:30 you can go to the iron
03:07:31 item you are rendering in the recipes
03:07:33 page which is the item you want to make
03:07:34 clickable
03:07:35 and you could add a click listener and
03:07:37 navigate programmatically
03:07:39 but you can also just use router link
03:07:42 here
03:07:43 as you can do in a normal angular app
03:07:46 and that is really amazing in ionic 2
03:07:48 and 3
03:07:49 you had to use ionic's own navigation
03:07:52 solution for going to different parts of
03:07:54 the app
03:07:54 and it did use angular for the
03:07:56 components but added its own
03:07:58 navigation now ionic fully embraces

03:08:01 angular
03:08:02 and it will do the same for react and
03:08:03 view by the way and that means that you
03:08:05 don't have to
03:08:06 keep an eye on ionic and update when
03:08:08 that changes and keep an eye on angular
03:08:11 and maybe you're not able to update
03:08:13 angular because ionic didn't update
03:08:15 yet instead you now only depend on
03:08:19 angular
03:08:19 you use native angular features like
03:08:22 angular routing
03:08:23 as it is baked into angular and ionic
03:08:26 only takes care about
03:08:27 offering a nice page transition a nice
03:08:29 animation things like that
03:08:31 but it gets out of the way when it comes
03:08:33 to the heavy lifting
03:08:35 so here we can't just enter a link we
03:08:36 want to go to when this item is tab
03:08:39 and i want to go to a dynamic link of
03:08:41 course because the id i want to load
03:08:43 differs
03:08:44 so i will bind this with square brackets
03:08:46 to property binding
03:08:48 and then we pass an array of segments in
03:08:50 here
03:08:51 and we can add a relative link here dot
03:08:54 slash
03:08:54 and then recipe id and this will now
03:08:58 go to slash recipes recipe id
03:09:03 now let's see if it works if we save
03:09:04 that this page will reload
03:09:08 and now if we tap this we go to this
03:09:11 page and you have a nice
03:09:13 animation for this page transition out
03:09:15 of the box
03:09:16 now going back would always be nice
03:09:18 right where's the back button
03:09:20 well the back button has to be added
03:09:22 separately so you can control whether
03:09:24 you want to have a back button on a page
03:09:25 or not
03:09:27 now if you have a look at the ionic docs
03:09:28 and we go to components
03:09:30 then you will see that if you go
03:09:34 all the way down to the toolbar
03:09:40 there is the iron back button now that
03:09:44 back button here
03:09:46 has to be included like this you wrap it
03:09:48 in an iron buttons component
03:09:50 actually which you would also use for
03:09:52 other buttons in the toolbar
03:09:54 for different actions and you give it a
03:09:57 slot of start to position it
03:09:59 on the default starting position of the
03:10:01 platform typically that is on the left
03:10:03 but depending on the platform or on the
03:10:07 uh region people are using your weapon
03:10:09 it could also be on the right
03:10:12 so here i will now add iron buttons
03:10:16 in the toolbar and give that a slot of
03:10:18 start
03:10:20 and in there i'll add my iron back
03:10:22 button
03:10:24 now on that i and back button you can
03:10:26 also set a default ref
03:10:29 attribute here for a cases where
03:10:32 um this page here we are on the recipe
03:10:34 detail page
03:10:35 was loaded as a first page because since
03:10:38 this is a web app we can of course
03:10:39 reload this page and
03:10:40 boom here we are and then we have no
03:10:43 previous page
03:10:44 in ionix history so to say
03:10:47 it keeps track of our navigation moves
03:10:49 but if we reload the app it reloads that
03:10:52 stored stack of pages it thinks in and
03:10:55 therefore we can give this a default
03:10:57 back link where we say okay if you
03:10:59 loaded this app and you don't know where
03:11:01 we where we've been previously
03:11:02 because maybe we haven't been anywhere
03:11:04 previously then
03:11:05 i want to go to slash recipes here let's
03:11:08 say
03:11:09 so if we save all of that as this
03:11:12 app reloads here we have the back button
03:11:15 we do go back
03:11:16 now if i reload on this page here let's
03:11:18 try it the other way around
03:11:20 now if i go here we got the back button
03:11:22 as well
03:11:23 now you will notice at least right now
03:11:25 if i tab anywhere else
03:11:27 we don't navigate again and right now
03:11:29 this is a known bug
03:11:30 maybe already fixed when you're doing
03:11:32 this it is related to a relative path

03:11:34 being used here you can simply fix it
03:11:37 by using an absolute path here and for
03:11:39 now this is the easiest work around
03:11:41 use an absolute path for navigation and
03:11:44 with that being used
03:11:45 you can go back forth and back
03:11:49 as often as you want to the different
03:11:51 pages
03:11:52 so this is how we can navigate around
03:11:54 and again most important takeaway
03:11:57 you use angular features and ionic just
03:11:59 adds animations
03:12:01 and ionic also keeps track of your
03:12:03 navigation moves
03:12:04 it constructs a stack of pages under the
03:12:07 hood so to say
03:12:08 so that it knows that you now have a
03:12:11 previous page you haven't gone back to
03:12:14 and you can go back by clicking the back
03:12:16 button because if you didn't reload the
03:12:18 page here
03:12:19 then this back button will even work
03:12:21 without the default rev
03:12:23 if i temporarily remove that
03:12:27 you see as this page reloads now it will
03:12:29 not work and not display because it
03:12:31 doesn't know
03:12:32 where we've previously been if i started
03:12:35 on recipes
03:12:36 now i do have the button because now
03:12:38 ionic keeps track
03:12:39 of that for us but more on that in the
03:12:43 routing and navigation module where we
03:12:45 will dive deeply into how navigation
03:12:47 works
03:12:48 also how we can integrate tabs and so on
03:12:55 we added a service we added basic
03:12:57 routing so we added
03:12:59 state management and navigation two
03:13:01 important features for using angular
03:13:03 and of course we have all the other nice
03:13:04 features of being able to
03:13:06 just use ng4 instead of writing our own
03:13:09 javascript logic to add elements
03:13:11 dynamically to the dom
03:13:12 and this shows us why using angular is
03:13:14 nice and it also shows you
03:13:16 that it works together with ionic just
03:13:19 fine
03:13:20 now it is especially awesome to see it
03:13:22 work together with angular
03:13:23 when we do need extra features like that
03:13:26 alert controller remember that
03:13:28 previously
03:13:29 if we wanted an alert controller we had
03:13:31 to integrate
03:13:33 ion alert controller as a component
03:13:36 and then we had to get access to it
03:13:39 programmatically so that we could use it
03:13:42 now you see i even get an error that
03:13:44 angular doesn't know that alert
03:13:45 controller
03:13:46 because the ionic angular package
03:13:48 doesn't even wrap it
03:13:50 into a angular component as it does for
03:13:52 all the other
03:13:53 components the reason for that is that
03:13:55 we now use this alert controller
03:13:57 differently
03:13:58 more conveniently to show you how to use
03:14:01 it
03:14:01 let's edit our app a little bit and
03:14:03 let's make sure we can delete
03:14:04 a recipe here shall we for this in our
03:14:07 toolbar
03:14:08 i'll add another iron buttons element
03:14:11 slot here is primary this will be
03:14:14 by default at the end of the toolbar and
03:14:17 i'll add a iron button in there
03:14:19 where i want to have a iron icon let's
03:14:22 find a nice icon
03:14:24 for deleting something
03:14:27 on ionicons.com
03:14:31 if we search for delete this trash bin
03:14:33 here will do
03:14:34 the name is trash so here i'll give this
03:14:38 a name of trash i only want to have the
03:14:41 icon so
03:14:42 on the iron icon i'll give it a slot of
03:14:44 icon
03:14:45 only so in that button i'll now only
03:14:47 have that icon that is what this does
03:14:53 and if you now save that on the app as
03:14:57 it reloads
03:14:58 if we go to the detail page here you see
03:15:00 that trash bin here
03:15:01 now when i tap this i want to delete
03:15:03 this recipe
03:15:04 for that let's go to the recipe service
03:15:07 and let's add a

03:15:10 delete recipe method and we need the
03:15:12 recipe id
03:15:14 of the recipe that should be deleted of
03:15:16 course and then
03:15:17 i will set this recipes equal to
03:15:20 this recipe's filter filter is another
03:15:24 function built into default normal
03:15:26 javascript
03:15:27 and this will execute a function on
03:15:29 every element in
03:15:30 this recipes array and if this function
03:15:32 then returns true
03:15:34 it will keep this element otherwise it
03:15:36 will get rid of it
03:15:37 and i of course want to keep all
03:15:38 elements but the element with the recipe
03:15:40 id here
03:15:42 so i go through all my recipes here and
03:15:44 i want to return true if i want to keep
03:15:46 it and false if i want to drop it
03:15:48 so i will return recipe id equal to
03:15:51 recipe id
03:15:53 that would now return true for all
03:15:55 elements where the ids are
03:15:57 equal but actually i want to drop the
03:15:59 element where the id is equal
03:16:00 so i will check if it's not equal here
03:16:03 now this is delete recipe
03:16:07 with delete recipe added we can use it
03:16:09 in the recipe detail
03:16:10 component there on this button
03:16:14 let's add a click listener and execute
03:16:17 on the lead
03:16:18 recipe or whatever you want to call it
03:16:20 let's add this method in the recipe
03:16:22 detail page
03:16:23 component file here and in there
03:16:26 i want to use my recipe service and call
03:16:29 delete recipe
03:16:31 for the recipe id we loaded here now
03:16:34 i'm only storing it in engion in it but
03:16:36 i do have my loaded recipe
03:16:38 so this loaded recipe and there the id
03:16:42 this isn't the anti-id i want to pass to
03:16:44 delete recipe
03:16:45 now once we're done deleting of course i
03:16:47 want to leave that page because the data
03:16:49 for this page will have been gone
03:16:51 and therefore i'll inject the router
03:16:56 and with that i mean the normal angular
03:16:58 router from at
03:16:59 angler slash router
03:17:03 and after deleting here i will call this
03:17:06 router
03:17:07 navigate and now i will go to just slash
03:17:11 recipes here let's see if that works
03:17:20 it does but of course i wanted to show
03:17:22 you how we can use that alert controller
03:17:24 in a nicer way
03:17:30 now for that let's say we want to ask
03:17:32 the user whether he really wants to
03:17:33 delete the recipe
03:17:34 before we go ahead and do it and hence
03:17:38 in recipe detail
03:17:39 in this recipe detail page i want to
03:17:41 show an alert
03:17:43 now as i mentioned we don't include iron
03:17:45 alert controller
03:17:47 in our template anymore and then select
03:17:49 it with
03:17:50 javascript instead you can now
03:17:54 thanks to at ionic angular simply inject
03:17:57 your
03:17:57 alert controller let's say and the same
03:18:00 will work for the other controllers
03:18:01 we'll learn about throughout the course
03:18:03 and the type here is alert controller
03:18:06 now alert controller and that's
03:18:08 important needs to be imported
03:18:11 from at ionic angular because this
03:18:14 wrapper package gives you this
03:18:15 convenience
03:18:16 access to the alert controller and it
03:18:18 does so by not giving you a default
03:18:20 component you have to add to your
03:18:22 templates and then
03:18:23 access manually but by giving you a
03:18:25 service
03:18:26 in the end that gives you all the
03:18:28 features of the alert controller
03:18:31 so now we can use this alert controller
03:18:33 service down there
03:18:35 to create a new alert and here thanks to
03:18:38 typescript we even get auto
03:18:39 completion and we can see what we can
03:18:42 set here by heading
03:18:43 control space so we pass our object to
03:18:46 create
03:18:47 and in there we can see what we can set
03:18:50 on this alert for example we can add a

03:18:52 header of
03:18:53 are you sure and then let's say a
03:18:57 message of
03:18:58 do you really want to delete the recipe
03:19:02 and then we can add some buttons and
03:19:04 here i of course
03:19:05 also want to give the user the option of
03:19:07 replying with
03:19:08 no so buttons here will not just be an
03:19:11 array where i have
03:19:12 okay instead we can pass an object in
03:19:16 here
03:19:16 to configure a button a bit more detail
03:19:19 and
03:19:19 that object can have a text a role and a
03:19:22 handler
03:19:24 now let me add a text here and there i
03:19:27 want to have the text
03:19:28 of let's say cancel we can give this a
03:19:31 roll
03:19:32 of cancel and that will actually just
03:19:34 close the dialogue and not do anything
03:19:36 else
03:19:38 and i can add a second button with the
03:19:40 text of
03:19:41 delete and there well indeed i want to
03:19:45 delete this
03:19:46 now create returns a promise which
03:19:50 actually gives us this alert element
03:19:52 this hasn't changed
03:19:53 and then we can call alert l percent
03:19:59 now i only want to delete if this button
03:20:01 is pressed
03:20:02 for that i can define a handler here
03:20:04 which in the end is just
03:20:05 defining a function and here i'm
03:20:07 defining an anonymous arrow function
03:20:09 that holds the code that should execute
03:20:11 when this button is pressed so there i
03:20:13 will delete and navigate
03:20:14 on cancel i'll do nothing just the alert
03:20:16 will be closed
03:20:18 then we present this alert here that
03:20:20 should be all we need
03:20:21 with this alert controller being
03:20:23 injected now which of course is pretty
03:20:25 nice
03:20:26 so let's wait for this and if i now
03:20:29 click this
03:20:29 trash bin i get this nice alert
03:20:32 if i click cancel nothing happens but if
03:20:35 i click
03:20:36 delete then we go ahead we delete this
03:20:38 and we are
03:20:39 navigated so this now works as it
03:20:42 should work and this is another major
03:20:45 advantage of using
03:20:46 angular here with the at ionic angular
03:20:49 package we got very easy access to the
03:20:52 alert controller
03:20:53 and we can inject this anywhere where we
03:20:55 want to show
03:20:56 an alert
03:21:02 now with the alert controller added
03:21:03 we're pretty much done one of the
03:21:05 missing things is that i also want to
03:21:06 redirect here
03:21:08 in this very unlikely case that we
03:21:09 somehow get to this page without having
03:21:11 a recipe in the url
03:21:13 so i will do that there and with that
03:21:16 i'm happy
03:21:17 with that uh setup with what we achieved
03:21:20 here
03:21:21 i hope you see why using angular
03:21:24 together with ionic can be helpful and
03:21:27 in the end it's just a normal angular
03:21:28 app with the ionic magic added to it
03:21:31 you could say this therefore is of
03:21:33 course the setup i'll continue with for
03:21:35 the rest of the course and with which
03:21:36 we'll build the entire
03:21:38 course project then there's one more
03:21:40 thing
03:21:41 i want to show you just to make this
03:21:42 really clear on how it works and how it
03:21:44 works together with ionic
03:21:46 obviously in this angular project you
03:21:48 can still create your
03:21:51 normal angular components which you use
03:21:53 with their selectors in your templates
03:21:55 so you cannot just generate pages
03:21:58 with angular components you can still
03:22:01 use them as you use them in any angular
03:22:03 project
03:22:04 so i can use ionic generate here again
03:22:08 and as you will see besides being able
03:22:10 to create a page i can also create a
03:22:12 normal component
03:22:13 so let's go with that of course you

03:22:14 could have typed ionic generate
03:22:16 component as well
03:22:17 and the path will be recipes recipe
03:22:20 item here and this will simply be a
03:22:23 single recipe item
03:22:25 which i output here in my list so i will
03:22:27 grab this
03:22:28 iron item code here from the recipes
03:22:30 page component
03:22:32 and add it to the html file of my recipe
03:22:34 item component
03:22:36 so this is now not a full ionic page it
03:22:39 is just
03:22:39 keeping or containing some ionic
03:22:41 components and it could also
03:22:43 just contain other angular components or
03:22:46 normal html
03:22:48 the key takeaway is this will not be
03:22:50 rendered as an ionic page
03:22:52 i also don't want to have ng4 on this
03:22:55 iron item here
03:22:56 instead in recipe item i want to have a
03:22:59 property
03:23:01 recipe item maybe which will be a recipe
03:23:04 so it will be of type recipe and
03:23:06 therefore you should import recipe from
03:23:08 the recipe model file
03:23:09 and this will be bindable from outside
03:23:12 how does it work in angular
03:23:14 well you add add input in front of it
03:23:17 right
03:23:18 and input is imported from at angular
03:23:20 core so you can
03:23:21 continue building these normal angular
03:23:23 components with inputs
03:23:25 outputs and so on here we're using an
03:23:27 input and
03:23:28 make recipe item bindable from outside
03:23:30 therefore in the template of recipe item
03:23:33 i can use recipe item here
03:23:36 and here because that is the name of my
03:23:38 property now
03:23:40 of that bindable property we can now
03:23:43 start using recipe item by
03:23:45 its selector in our recipes page
03:23:49 now recipes module was automatically
03:23:52 updated by the ionic cli and it added
03:23:56 recipe item component there to the
03:23:57 declarations which is correct because i
03:24:00 want to use it
03:24:01 in this module i want to use it in the
03:24:03 recipes page
03:24:04 so declaring it in the app module or
03:24:07 anything like that would have been wrong
03:24:09 you have to declare it in the module
03:24:11 where you use it and we do use it here
03:24:13 so now in the recipes page component
03:24:16 file here
03:24:17 we can use app recipe item that is the
03:24:20 selector of the component that was
03:24:22 created you can of course see that here
03:24:24 in the component typescript file and
03:24:27 all we have to do is we have to pass in
03:24:29 a value for our recipe item
03:24:32 now this can be done by still going
03:24:34 through all our recipes with ng4 here
03:24:38 so recipe of recipes this doesn't change
03:24:41 and that recipe
03:24:42 is then forwarded as a recipe item to
03:24:45 the app recipe item component
03:24:48 and with that if you save that it should
03:24:51 now rebuild and work in exactly the same
03:24:53 way as before
03:24:54 here we have our items and we can still
03:24:56 tap them and navigate around
03:24:58 so this works as before and i'm simply
03:25:01 showing you
03:25:02 this because i really want to make sure
03:25:03 that you understand that this is a
03:25:05 normal angular project
03:25:07 and you can build angular components as
03:25:09 you're used to
03:25:10 and indeed if you compare angular
03:25:12 components and ionic components
03:25:15 you'll see that you use them in a
03:25:17 similar way
03:25:18 inside of your angular project of course
03:25:21 angular components are created by you
03:25:23 with that component or you're importing
03:25:25 some other third-party library
03:25:27 and actually as i mentioned at ionic
03:25:29 slash angular
03:25:30 this package in the end wraps all the
03:25:33 ionic web components
03:25:35 into angular components so technically
03:25:37 these also are angular components now
03:25:40 but they're only thinly wrapped in its
03:25:42 core they're still web components
03:25:44 so we create our own components with
03:25:46 that component

03:25:47 we use them inside of our angular
03:25:49 templates and that's the only place
03:25:51 where we can
03:25:51 use them angular will render them to the
03:25:53 dom for us we'll
03:25:55 render the content of their templates to
03:25:56 the dom for us
03:25:58 and as i mentioned we can only use
03:26:00 angular components in an angular app
03:26:03 ionic components
03:26:05 well ionic ships these pre-built web
03:26:08 components and you can't edit them
03:26:10 they're open source but you can't edit
03:26:12 them they will not allow you to
03:26:14 merge your changes into the ionic
03:26:16 repository without a very good reason
03:26:18 ionic components use native web
03:26:20 technologies they are web components and
03:26:22 yes they are
03:26:23 wrapped here by at ionic angular but in
03:26:26 its core
03:26:26 there are still web components in there
03:26:28 and you can therefore use these web
03:26:30 components
03:26:31 anywhere in any project anywhere
03:26:34 not just inside of angular apps
03:26:37 and i mentioned this a couple of times i
03:26:40 think it's pretty clear now
03:26:41 it is just important to understand which
03:26:43 is why i'm emphasizing this over and
03:26:45 over again
03:26:50 so that's it with this first angular
03:26:53 anionic module
03:26:55 this is of course a very simple
03:26:56 application we built here we'll build a
03:26:58 way more complex application for the
03:27:00 rest of this course
03:27:02 but i hope that it's now clear how ionic
03:27:04 and angular work together that you still
03:27:06 only build a normal angular app here but
03:27:09 you can use these ionic components
03:27:11 that using ionic components is easier
03:27:14 especially when you think about things
03:27:16 like the alert controller
03:27:17 and therefore we now have the best of
03:27:19 both worlds let's use that best of both
03:27:22 worlds to build amazing apps then
03:27:28 what we get thus far in this course is a
03:27:30 nice looking web app
03:27:31 and that might be all you want to build
03:27:33 that is already a part where ionic with
03:27:36 its beautiful and feature-rich
03:27:37 components can help you
03:27:39 but of course historically a big selling
03:27:42 point of ionic always was that you can
03:27:44 build cross-platform applications
03:27:46 that run not only on the web but in the
03:27:48 past actually primarily
03:27:50 on native devices as real native apps
03:27:53 you distribute through the app stores
03:27:55 and that hasn't changed just that web
03:27:57 apps are now a more realistic option and
03:28:00 a fully supported platform as well
03:28:02 so in this module we'll focus on the
03:28:04 native apps
03:28:05 and i will show you how to create apps
03:28:08 for android
03:28:09 and ios and how to run your app on these
03:28:12 devices
03:28:13 i'll run it on emulators here but
03:28:15 running it on real devices will be
03:28:17 exactly the same process
03:28:19 so let me show you how you turn your web
03:28:21 app into a mobile app now
03:28:27 i will continue with the app we built in
03:28:29 the last course module
03:28:30 this very simple recipe app built with
03:28:33 the help of angular
03:28:34 now as always the official docs are your
03:28:37 friend
03:28:38 if you get stuck if something is unclear
03:28:40 you find step-by-step instructions here
03:28:43 under a guide and then under running on
03:28:46 ios or running on
03:28:47 android there you'll learn all the steps
03:28:50 you need to execute to turn your web app
03:28:52 into in this case here an android app
03:28:55 and
03:28:55 here for ios now important
03:28:59 you need to have certain tools installed
03:29:02 to succeed here and also important if
03:29:06 you're building locally
03:29:07 on your machine then you actually
03:29:11 need to be on a mac os system to build
03:29:14 for ios
03:29:15 you can't build ios apps on windows
03:29:18 unless
03:29:19 you're using ionix paid service app flow
03:29:23 that is something you can do and you can
03:29:25 learn more about that on

03:29:27 ionicframework.com
03:29:28 there you can build your app in the
03:29:30 cloud instead of on your machine
03:29:32 and then on the cloud it can be built on
03:29:34 a mac os environment but this is a paid
03:29:36 service i'll not be covering it here
03:29:38 so if you build it locally as we do then
03:29:40 you can only build for ios
03:29:42 on mac os systems android apps can be
03:29:45 built on both
03:29:46 mac os and windows systems as well as
03:29:48 linux so
03:29:49 what are the requirements then
03:29:56 now i want to start with android
03:29:57 development and to build your app for
03:29:59 android or ios
03:30:00 i will use capacitor now you can
03:30:02 actually use capacitor or
03:30:04 cordova both are tools that in the end
03:30:07 can take a web app and wrap it into a
03:30:09 native app
03:30:10 cordova has been around for a couple of
03:30:12 years and in the past ionic only used
03:30:14 cordova
03:30:15 it still fully supports it but the ionic
03:30:18 team now also built their own tool
03:30:20 capacitor which does essentially the
03:30:21 same but gives you
03:30:23 in my opinion nicer api and in this
03:30:26 course we'll use capacitor
03:30:27 which is under heavy development and
03:30:30 will probably see quite an exciting
03:30:32 future
03:30:33 you can learn more about capacitor on
03:30:37 capacitor.ionicframework.com
03:30:38 and there in the docs you also learn all
03:30:41 about how to use it how to tap into
03:30:43 native device features and so on
03:30:45 things we'll do later but you also learn
03:30:47 how to set up your machine
03:30:49 to be able to build for android and ios
03:30:52 to start with android here under android
03:30:55 click on getting started and there you
03:30:57 learn how to configure your machine to
03:30:58 build android apps
03:31:00 what you'll learn here is that you need
03:31:02 to install the android sdk
03:31:05 the android sdk tools or build tools in
03:31:08 this version or hire and this might
03:31:10 change over time so definitely check
03:31:12 this page out and you need
03:31:14 the android sdk platform api 21 or
03:31:17 greater
03:31:18 now this is all installed automatically
03:31:20 or you're
03:31:21 asked to install it automatically when
03:31:23 you do install
03:31:24 android studio and android studio is a
03:31:27 tool you need as well
03:31:28 you can google for android studio to
03:31:30 find a link to its official
03:31:32 page and there you can download android
03:31:34 studio onto your machine and then walk
03:31:37 through the installer
03:31:38 android studio is the official android
03:31:40 development environment
03:31:42 and will not write code in android
03:31:44 studio but we will use it
03:31:46 as a build tool so ionic capacitor will
03:31:49 use it behind the scenes
03:31:50 to create that native app wrapper into
03:31:53 which it injects your mobile app you
03:31:55 could say
03:31:56 so therefore you should download android
03:31:59 studio
03:32:00 from this android studio page and this
03:32:02 will give you an installer for mac
03:32:04 and windows and linux through which you
03:32:06 can walk now
03:32:08 when going through that installer make
03:32:10 sure you do install
03:32:12 the android sdk tools and the android sk
03:32:14 sdk platform as destructed here
03:32:16 and if you don't do that during the
03:32:18 installation you can still do it
03:32:19 thereafter
03:32:20 from inside android studio i already do
03:32:23 have it installed
03:32:25 by going to configure sdk manager there
03:32:30 and then here you want to choose an sdk
03:32:32 which has at least version 21 or higher
03:32:35 and under sdk tools you want to install
03:32:38 these android sdk
03:32:39 build tools here you also want to
03:32:42 install the android sdk tools here
03:32:44 in the latest version you see and the
03:32:46 platform tools as well
03:32:48 i also recommend installing that
03:32:50 emulator that hacksam installer here
03:32:53 to speed up your emulator if you're

03:32:55 running an android emulator
03:32:57 to test your app on basically you can
03:32:59 also set all the other check marks you
03:33:01 see here
03:33:02 and also make sure you do install the
03:33:04 android emulator
03:33:06 um i do have a slightly outdated version
03:33:08 here so i'll update it now
03:33:09 but you should simply tick this box here
03:33:11 and then
03:33:12 once you press apply this will install
03:33:15 all the things you checked
03:33:16 onto your machine and this will install
03:33:18 all the tools you therefore need
03:33:20 to build android apps
03:33:23 with that all installed you can go back
03:33:26 to the ionic documentation to see the
03:33:28 rest of the steps
03:33:29 we can use the ionic cli to basically
03:33:32 add
03:33:33 android as a supported platform in our
03:33:35 project
03:33:36 and you do this by inner terminal
03:33:39 navigate
03:33:39 into your project running ionic
03:33:42 capacitor
03:33:44 add and then either ios or in our case
03:33:47 here
03:33:48 android and this will now set this
03:33:51 project up such that you can build an
03:33:52 android app with it
03:33:54 to put it simple it will install an
03:33:56 extra package capacitor core
03:33:58 and do a couple of other things in
03:33:59 configurations and actually add a brand
03:34:02 new folder
03:34:02 with your android app inside of it now i
03:34:06 actually got an
03:34:07 error here the capacitor could not find
03:34:09 the web assets directory
03:34:11 and then this path here now this is
03:34:13 pretty normal if you never build your
03:34:15 app
03:34:16 simply run ng-build to fix this
03:34:19 ng-build will now build your angular app
03:34:22 and you always need to do that before
03:34:24 you can turn it into a native mobile app
03:34:26 because you will wrap your finished
03:34:28 build app
03:34:29 into that native mobile app so once this
03:34:32 build process finished you got this www
03:34:35 folder and that is exactly the folder
03:34:37 that was missing
03:34:38 so let's now rerun ionic capacitor at
03:34:41 android and now this should succeed so
03:34:45 let's wait for that to finish
03:34:47 and here it is so now it is finished and
03:34:50 you should now have a new
03:34:52 android folder in there now this is the
03:34:55 android app and this is actually a
03:34:57 folder you could now open in android
03:34:59 studio to launch your app
03:35:01 this is the native app so to say it
03:35:03 holds all the code for the native app
03:35:05 and it also will hold your web app
03:35:08 bundled into that native
03:35:10 app now if you have a look at the
03:35:12 official docs
03:35:14 you also see what you would do if you
03:35:16 were to use cordova which i'll not cover
03:35:18 here though
03:35:19 for us the next important step is that
03:35:21 we want to set the package id
03:35:23 for this app you can set that in the
03:35:25 capacitor config.json file
03:35:27 here it's this app id and i will name
03:35:30 this here to com
03:35:32 udemy course ionic angular
03:35:36 you typically use an identifier that
03:35:37 looks like a reverse url here
03:35:40 and you're free to use any identifier
03:35:42 you want the idea here is that your app
03:35:44 has a unique identifier that
03:35:46 differentiates it from all the other
03:35:48 apps in the app store
03:35:52 now with this setup what we can do is we
03:35:54 can run ionic capacitor copy android
03:35:57 now this is a command you should always
03:35:59 execute after you
03:36:01 created a new build with ng build
03:36:03 because ionic
03:36:04 capacitor
03:36:07 copy android will basically copy your
03:36:10 www
03:36:11 folder into this native app and bundle
03:36:14 it into that again so to say
03:36:16 this is a command you have to run before
03:36:18 you can
03:36:19 run your native app and see it you can
03:36:22 also type

03:36:23 ionic capacitor run android
03:36:26 and what this will do is it will execute
03:36:29 all these previous steps for you
03:36:31 it will run ng build essentially and
03:36:33 thereafter it will copy the www
03:36:36 folder into the native app for you so it
03:36:39 does all of that
03:36:40 and it then even opens the android
03:36:42 folder in
03:36:43 android studio and that is important
03:36:45 because you can launch your app
03:36:47 from inside there now so
03:36:50 when this opens for the first time let
03:36:52 it finish all its
03:36:53 tasks it's executing there they should
03:36:56 all finish without
03:36:57 errors so let's wait for that to finish
03:37:00 on the first load this will take a
03:37:02 little longer subsequent loads will be
03:37:04 faster no worries
03:37:06 and here it did finish this error here
03:37:08 actually is just a warning we should be
03:37:10 fine
03:37:11 and now we can launch our app now for
03:37:13 that we need an emulator up and running
03:37:15 and you can go to tools avd manager here
03:37:18 to create one
03:37:20 now i already created a couple of
03:37:22 virtual devices
03:37:23 here on the bottom left you can click on
03:37:25 create virtual device to build a new one
03:37:28 then choose any of these blueprints like
03:37:30 the pixel 2
03:37:32 click next choose the latest
03:37:35 stable version of android here
03:37:39 and then simply finish this you should
03:37:41 be able to use all the default settings
03:37:43 now you can launch such an emulator by
03:37:46 clicking that green play button there
03:37:48 and this will now open up that emulator
03:37:50 here it is
03:37:51 and there you can see your app now you
03:37:54 can also connect your real device
03:37:56 cue your computer and turn on the
03:38:00 developer options
03:38:01 there after this lecture here you'll
03:38:04 find a lecture where i explain how it
03:38:06 works
03:38:07 and then run the app on your real device
03:38:09 that works as well
03:38:11 here i'll go with the emulator let's
03:38:13 wait for the emulator to finish
03:38:15 booting up so here it did now finish
03:38:18 booting
03:38:18 and now back in android studio remember
03:38:21 this is the android folder from our
03:38:22 project which was opened there for us by
03:38:24 capacitor
03:38:26 you can now click that green layout icon
03:38:28 here
03:38:30 and then choose the emulator or
03:38:32 connected device you want to run the app
03:38:34 on and here i'll use that connected
03:38:35 emulator which
03:38:36 is already up and running and press ok
03:38:39 and this will now
03:38:40 actually build the native app that wraps
03:38:42 your web app
03:38:43 and then automatically install it on
03:38:45 that emulator
03:38:46 or real device and launch it there so
03:38:49 let's wait for that to finish
03:38:52 the build process succeeded it's now
03:38:54 installing this app
03:38:56 on the emulator on the connected device
03:38:58 here
03:39:00 and here the app is now the startup time
03:39:04 here
03:39:04 on my machine is not super fast because
03:39:06 i'm also recording and everything so
03:39:08 this machine here is pretty on its limit
03:39:11 it actually does
03:39:12 start up quite fast and you can demo
03:39:14 this by connecting a real device because
03:39:16 emulators also always are a bit slower
03:39:19 now here what we can see though and
03:39:23 again
03:39:23 any uh lag here is really just caused by
03:39:26 me recording
03:39:27 we can see this application works
03:39:30 exactly
03:39:31 as it should work and exactly as we saw
03:39:34 it in the browser
03:39:35 but now this is a real native app
03:39:38 on our emulator here installed
03:39:41 as a native app there now for the
03:39:44 majority of the course i will actually
03:39:46 keep on
03:39:46 developing here with the help of the
03:39:48 browser simply because that's easier to

03:39:50 debug
03:39:51 it updates faster and so on but being
03:39:53 able to
03:39:54 build that native app and see it run
03:39:56 here of course is a core part
03:39:58 of ionic and this is how you do go
03:40:00 through that process
03:40:02 now one note of course
03:40:05 when you run ionic capacitor run android
03:40:08 all these steps are executed for you
03:40:10 and with the emulator up and running all
03:40:12 you have to do is press that play button
03:40:15 but you can also execute ionic capacitor
03:40:17 run android
03:40:18 with dash l after it which stands for
03:40:22 live
03:40:22 reload now what this will do is it will
03:40:25 actually not
03:40:26 build the app but run ng-surf and
03:40:28 therefore
03:40:29 run the same command we used before for
03:40:31 having the server to visit it here in
03:40:33 the browser
03:40:34 and then it gives you a native app that
03:40:36 actually talks to that server
03:40:38 running on your mac or windows machine
03:40:42 and that will automatically update the
03:40:44 app on the native device
03:40:46 when your code changes so you get the
03:40:48 same behavior as you do in the browser
03:40:51 with live updates
03:40:52 on the native device now and you don't
03:40:54 have to rebuild
03:40:55 the app after every change you want to
03:40:58 see reflected here now
03:41:00 from my experience this live reload
03:41:02 process
03:41:04 is a bit clunky and sometimes doesn't
03:41:07 work
03:41:07 perfectly but generally this is a nice
03:41:10 thing to have
03:41:11 and definitely something you should
03:41:12 experiment with because it can be
03:41:15 really useful and can speed up your
03:41:18 development flow
03:41:20 if i now build a start this app again
03:41:23 here
03:41:23 after i started this live reload
03:41:26 process and build my app with that
03:41:29 and now with that app running again if i
03:41:33 now
03:41:33 change something in code let's say on
03:41:36 the recipe page here
03:41:38 where i have recipes as a title title if
03:41:41 i add an exclamation mark and i save
03:41:43 that
03:41:43 it will now rebuild because i have that
03:41:46 server up and running which was
03:41:47 started by ionic capacitor run android
03:41:51 l and by the way you can therefore now
03:41:54 also connect to that on your browser
03:41:56 again and you will see your changes
03:41:58 there
03:41:59 but now this all the live updated as you
03:42:01 can tell here
03:42:02 in the native mobile app and that can
03:42:05 speed up the workflow when you want to
03:42:07 preview your changes
03:42:08 inside of your real native mobile app
03:42:11 and not just in the browser
03:42:12 and let me also emphasize one more time
03:42:14 this is a mobile app as you could
03:42:16 install it from the app store
03:42:18 this is not the browser on the mobile
03:42:20 app hosting the web app
03:42:21 this is a custom native mobile app
03:42:29 in the last lecture we had a look at
03:42:31 getting the app
03:42:32 up and running with android now maybe
03:42:35 you're not developing for android or at
03:42:37 least not exclusively but also for ios
03:42:40 and for this in the official ionic docs
03:42:42 under a guide here
03:42:43 you should also check out running on ios
03:42:47 now again i will use capacitor you could
03:42:49 use cordova and here you will also find
03:42:52 steps on how to use cordova
03:42:54 but capacitor is developed by the ionic
03:42:56 team and i see the brighter future for
03:42:58 that
03:42:58 and therefore i will go with capacitor
03:43:01 in this course
03:43:02 now you can run these commands to set up
03:43:05 your app for ios and run it on an ios
03:43:07 device but first of all you need to make
03:43:09 sure that you have
03:43:10 the ios development environment set up
03:43:14 since we use capacitor you can visit
03:43:17 capacitor.ionicframework.com and then go
03:43:18 to the docs there

03:43:20 and there you'll find an ios section
03:43:23 here you find a detailed description of
03:43:25 what you need to have set up on your
03:43:27 machine
03:43:28 to build ios apps and in detail that is
03:43:31 xcode version 9 or higher and you should
03:43:33 check these docs
03:43:35 for updates if that changes and the
03:43:37 xcode command line tools
03:43:39 now you get xcode from the app store on
03:43:42 your mac
03:43:43 and as i mentioned before you need a mac
03:43:45 to
03:43:46 build ios apps on your system
03:43:50 in the app store you can search for
03:43:52 xcode and i already do have it installed
03:43:54 if you don't
03:43:55 install it from there it's free you also
03:43:58 don't need a paid apple developer
03:44:00 account for this
03:44:02 with xcode installed you need the xcode
03:44:05 command line tools
03:44:06 and you get these by opening your
03:44:09 terminal on your mac and then you can
03:44:12 type xcode
03:44:13 dash select now if this gives you
03:44:16 something like this
03:44:17 so maybe an error but just an error that
03:44:20 you didn't choose a specific command
03:44:22 you already got them installed only if
03:44:24 it tells you something like command
03:44:25 not found or operation not found then
03:44:28 you don't have it installed and you can
03:44:30 then simply install them by typing
03:44:32 xcode select dash dash install
03:44:35 and this will now install the xcode
03:44:38 command line tools
03:44:40 now i already have them installed hence
03:44:42 i don't need to do that but
03:44:43 if you don't well then this command here
03:44:46 gives you the xcode
03:44:47 command line tools with all of that
03:44:50 installed
03:44:51 you can go back to the ionic docs and
03:44:53 use the commands here
03:44:54 to add ios as a platform to your project
03:44:57 and then also run your app on ios
03:45:01 so back in the project i'll start with
03:45:03 ionic capacitor
03:45:07 add ios this command enables ios as a
03:45:11 platform in this project
03:45:14 here however i get an error regarding my
03:45:16 app id
03:45:18 dashes are not wanted here actually
03:45:23 so make sure to remove them
03:45:28 now let me try this command again and
03:45:30 what this command does is
03:45:32 just as before we got the extra android
03:45:34 folder now we get the ios folder
03:45:36 and this is a folder you can open with
03:45:38 xcode and it has
03:45:40 the native xcode app in there which will
03:45:42 wrap
03:45:43 your web app your ionia app
03:45:47 now with that created the next step is
03:45:50 that you build your project with ng
03:45:53 build
03:45:53 because you can only ship that build
03:45:55 project into your
03:45:57 uh native app wrapper so to say
03:46:00 um you will also learn how to have a
03:46:03 dynamically reloaded app up and running
03:46:06 and connected to your ios device by the
03:46:08 end of this video here
03:46:09 but for now let's go with that build
03:46:11 process
03:46:13 this spits out a www folder and that
03:46:16 contains your build angular project
03:46:18 you can now run ionic capacitor
03:46:23 copy ios and this will copy this www
03:46:26 folder into your ios folder and
03:46:28 basically into the place where it needs
03:46:30 to be
03:46:31 for it to be wrappable by this native
03:46:34 app you get out of the box by capacitor
03:46:37 you can also run ionic capacitor
03:46:41 run ios and this will combine the build
03:46:44 process
03:46:45 and the copy process for you that of
03:46:47 course is the more convenient command
03:46:49 therefore
03:46:50 so this is the command i will from now
03:46:52 on use but behind the scenes it does the
03:46:54 two steps you saw before
03:46:57 now it does not only copy your files it
03:47:00 also
03:47:00 should open xcode for you now
03:47:04 and it does not only open xcode but it
03:47:06 opens xcode
03:47:07 with your ios folder already selected

03:47:10 there so this is
03:47:10 inside of your ios folder now now
03:47:14 for this to work you should select app
03:47:16 in xcode
03:47:17 and then here under signing make sure
03:47:20 you select
03:47:21 a team if you don't see a team here add
03:47:24 an
03:47:24 account and simply log in with your
03:47:26 apple id
03:47:27 here and make sure you do also create an
03:47:30 apple developer account
03:47:32 for this id you can do that on
03:47:35 developer.apple.com
03:47:36 and then you sign in with your apple id
03:47:38 and basically sign up to be an apple
03:47:40 developer
03:47:41 this is free there is a paid version but
03:47:43 you'll only need
03:47:44 that once you plan on shipping your app
03:47:46 to the app store
03:47:47 as long as you're only developing you
03:47:49 don't need to pay
03:47:51 so thereafter select your team here and
03:47:53 now the error here should go away
03:47:55 if there still are errors there also
03:47:57 should be a description on how to get
03:47:59 rid of them
03:48:00 now with that set up and you will need
03:48:03 to do that
03:48:04 whenever you delete the ios folder
03:48:07 and re-edit with ionic capacitor at ios
03:48:11 so with that set up you can now run your
03:48:13 app here you can choose a simulator you
03:48:16 want to run the app on
03:48:17 and if you have a real device connected
03:48:19 to your machine you'll be able to choose
03:48:20 that here as well
03:48:22 a real iphone i mean and
03:48:25 then you click that play button and this
03:48:26 will now build the app you can ignore
03:48:28 any warnings you see here
03:48:30 it will build the native app the real
03:48:32 native app you're getting wanna
03:48:33 emphasize this we're talking about a
03:48:35 real app here
03:48:36 it will start a simulator if that isn't
03:48:39 running already the simulator you
03:48:41 selected basically
03:48:43 and it will then start the native app in
03:48:45 that simulator and that native app
03:48:47 is that wrapper around your ionic app in
03:48:50 the end
03:48:51 so let's wait for this to start up and
03:48:54 here is our application coming
03:48:56 up and the first start can always take a
03:48:58 bit longer here
03:49:00 don't worry about that it will be super
03:49:02 fast once you
03:49:03 do deploy it onto a real device and test
03:49:06 it there
03:49:07 and now here we got the behavior we saw
03:49:09 before and we also see
03:49:11 of course that we got the ios specific
03:49:14 back button and so on
03:49:15 so this looks really really nice we do
03:49:18 get the look and feel we would expect
03:49:20 it to have from the web app we built
03:49:23 before
03:49:24 so now this is our app running on a
03:49:27 native device on
03:49:28 ios but of course it's a bit cumbersome
03:49:32 if we always have to rerun ionic
03:49:34 capacitor run ios
03:49:36 and then press the play button here
03:49:38 whenever we change something in the code
03:49:40 we want to see here
03:49:41 and indeed there is a simpler method
03:49:45 you can run ionic capacitor run ios
03:49:48 with dash l added after it
03:49:51 l stands for live reload and now this
03:49:54 will not run ng build
03:49:55 but ng serve actually and it will bring
03:49:58 up that development server we already
03:50:00 connected to before
03:50:01 from our web app and you can indeed
03:50:05 connect again from the web app
03:50:07 and it will do the exact same steps as
03:50:09 before otherwise
03:50:10 but now if you start the app and you
03:50:12 have to restart it once now stop the old
03:50:14 process restart the new app
03:50:16 now this app will be connected to your
03:50:19 live reload
03:50:20 server so now whenever you change
03:50:22 anything in your code
03:50:23 the app here will automatically reload
03:50:25 just as the app in the browser does
03:50:27 let me demonstrate this if i go to my
03:50:30 recipes page here

03:50:31 and i add two exclamation marks after
03:50:34 recipes in the title
03:50:36 then here's our web app i have one
03:50:38 exclamation mark here from before when i
03:50:40 showed this
03:50:41 uh in the android video we can reload
03:50:44 this too by the way this is connected to
03:50:46 the same development server
03:50:48 and here we do see the two exclamation
03:50:50 marks
03:50:51 but we also see them in the native
03:50:53 device on the emulator
03:50:55 and this of course can speed up your
03:50:56 development workflow because now you can
03:50:58 write your code
03:50:59 change it and have your changes
03:51:01 reflected on the emulator or the real
03:51:04 device
03:51:04 instantly or pretty fast at least now to
03:51:07 my experience this can be a bit clunky
03:51:09 and sometimes you get results that
03:51:11 actually differ from the results you get
03:51:13 when building it and then running it
03:51:15 manually
03:51:16 so therefore this will not be my
03:51:17 primarily development process
03:51:19 instead i will stick to the browser app
03:51:21 simply because it's faster and easier to
03:51:23 debug
03:51:24 but now you know how you get that native
03:51:27 app too how you can test your app
03:51:29 on the native device and obviously will
03:51:31 test it there from time to time in the
03:51:33 course
03:51:34 as well
03:51:39 so in this module i walked you through
03:51:42 capacitor
03:51:43 and i explained how you can use
03:51:44 capacitor to get a real native app that
03:51:47 holds your ionic app for both android
03:51:50 and ios
03:51:51 you saw how you can easily build your
03:51:54 app for
03:51:54 android and ios and run it on emulators
03:51:57 or
03:51:58 real devices through android studio or
03:52:00 xcode
03:52:01 you also saw that live reload mechanism
03:52:04 and i did mention that i will stick
03:52:06 to the web app for now because it's a
03:52:08 bit faster and easier to debug
03:52:10 nonetheless now we know how to build a
03:52:13 web app we know how to build our native
03:52:15 apps
03:52:16 and that already allows us to build apps
03:52:19 for
03:52:19 free platforms with one and the same
03:52:22 code base
03:52:23 and that is just amazing now
03:52:26 let's continue with ionic now and with
03:52:29 developing ionic apps
03:52:31 because now we know how to turn them
03:52:32 into what we want them to be
03:52:34 well now we can focus on the logic
03:52:36 inside the app again
03:52:40 that's it for the introduction you
03:52:43 learned how ionic works how you can use
03:52:45 the many built-in components
03:52:47 and how you can build amazing
03:52:49 applications with ionic and with angular
03:52:52 and why you might want to use angular
03:52:54 you also learned how you can
03:52:56 use your ionic angular web applications
03:52:59 and turn them into real native
03:53:01 applications with the help of capacitor
03:53:04 now if you want to dive even deeper and
03:53:06 learn way more
03:53:07 then i strongly recommend taking my full
03:53:10 course
03:53:10 you'll find a link to that course with a
03:53:12 very nice discount below the video in
03:53:14 the video description
03:53:16 and i'd love to welcome you there in
03:53:18 that course you will learn things like
03:53:20 styling and theming your ionic angular
03:53:22 apps adding features like
03:53:24 google maps or accessing the device
03:53:26 camera
03:53:27 locating the user authentication and
03:53:30 much
03:53:31 much more the parts you already saw in
03:53:35 this video are actually taken from that
03:53:37 course
03:53:37 and therefore if you decide to go with
03:53:40 the course
03:53:41 you can skip all these fundamentals and
03:53:43 dive right into
03:53:44 the next more advanced parts i'd love to
03:53:47 welcome you on board of this course
03:53:49 and hopefully see you there

03:54:12 you

You may also like