NativeScript Tutorial for Beginners – Build iOS, Android and Web Apps with NativeScript and Angular

00:00:00 [Music]
00:00:07 so what is native script native script
00:00:11 is a set of tools you could say which we
00:00:13 use to build real mobile apps for
00:00:16 Android and iOS we use technologies for
00:00:20 that which we typically use to build web
00:00:22 apps with that I mean typescript XML and
00:00:25 CSS now we don't use typescript of
00:00:29 course to build web apps we use
00:00:30 JavaScript but typescript is just a
00:00:33 super set to that it's compiled down to
00:00:35 JavaScript and angular for example uses
00:00:38 typescript heavily and we don't use XML
00:00:41 to build web apps but HTML and that's a
00:00:43 tiny difference XML is basically HTML
00:00:46 you could say here in native script apps
00:00:49 we'll use different elements will not
00:00:51 use default HTML elements simply because
00:00:54 native script does not wrap a web app
00:00:56 and put it into a native app but it
00:00:58 really compiles it's down to native code
00:01:00 so a button placed in your native script
00:01:03 template will be a widget button on
00:01:06 Android and a UI button on iOS so really
00:01:10 the native elements you could use when
00:01:12 you build the apps with these native
00:01:13 languages and that gives you the best
00:01:15 possible performance but other than that
00:01:18 it's just the same text sack and native
00:01:21 script does not only give us a tool to
00:01:23 create such a project and bundle and
00:01:25 build it and run it and package it up it
00:01:29 also gives us a way of interacting
00:01:32 between our JavaScript code our angular
00:01:34 code specifically and the mobile
00:01:37 platform it gives us a bridge so to say
00:01:40 which is a code base running in every
00:01:43 applet which is included in every app
00:01:45 that basically translates certain
00:01:48 commands we write in angular and
00:01:50 therefore in JavaScript in the end into
00:01:52 commands the native platforms understand
00:01:55 for example for switching a page loading
00:01:57 a new tab or getting the user location
00:02:00 now and whilst we have all of that and
00:02:03 therefore have a way of tapping into
00:02:05 native api's like using the camera and
00:02:07 so on
00:02:08 we can do that by using technologies we
00:02:10 know we could use vanilla JavaScript or
00:02:13 types
00:02:13 for that but never script all the
00:02:15 supports angular and view and we will
00:02:17 use angular in this course now angular
00:02:20 normally uses HTML templates to build a
00:02:23 web app as you know and that is the part
00:02:25 where we will now use XML instead but
00:02:28 for all the logic so for the non HTML
00:02:31 and partly CSS part of the app we will
00:02:34 write all the angular code as we know it
00:02:37 will use services we'll use a property
00:02:40 binding all the features you know from
00:02:42 angular we will use them here and that
00:02:44 of course is amazing because that allows
00:02:47 us to use our existing knowledge to get
00:02:49 a new kind of app out of it
00:02:55 so what exactly is happening under the
00:02:57 hood of NATO script then well we write
00:03:00 our app code and we do that with angular
00:03:03 in this course and our goal of course is
00:03:05 to get these native mobile apps for iOS
00:03:07 and Android now as I mentioned we could
00:03:10 write the code in JavaScript or
00:03:12 typescript or an angular or in view but
00:03:14 we'll use angular in this course but
00:03:17 this flexibility already is great to
00:03:19 have because it means certain concepts
00:03:21 that you'll learn about native script
00:03:22 can be reused even if you would use a
00:03:25 different framework at a later point of
00:03:28 time now native script of course
00:03:30 provides your way of getting from your
00:03:32 angular code to this native mobile app
00:03:35 and therefore it offers us certain core
00:03:38 modules which we can import into your
00:03:41 app so here I'm really talking about
00:03:42 modules written in typescript partly or
00:03:46 written in an angular so to say which we
00:03:49 import into our typescript code into our
00:03:51 angular app queue directly access
00:03:53 certain device features from inside our
00:03:56 typescript code from inside our angular
00:03:58 code word to interact with our user
00:04:01 interfaces which use these native widget
00:04:04 XML code as I mentioned so we get these
00:04:07 tools to well use features we can't use
00:04:11 on the web in our angular code and still
00:04:14 write normal angular code with that we
00:04:17 can also install certain plugins which

00:04:19 could be developed by the native script
00:04:21 team or by the community and these have
00:04:24 to be installed in addition they're not
00:04:26 baked into the core of native script but
00:04:29 this still is a great part of native
00:04:31 script it's highly extensible we can get
00:04:34 a lot of value out of it and there is
00:04:36 almost no problem we can't solve now and
00:04:40 in the end there is this runtime which
00:04:41 is embedded into every app which is
00:04:43 important for talking to the native
00:04:46 api's for doing things like getting the
00:04:48 user location using GPS and so on this
00:04:52 is basically the code which wraps
00:04:54 everything together which you will not
00:04:56 see and which you will not write on your
00:04:58 own but which is there which ensures
00:05:00 that in the end your angular code which
00:05:03 doesn't know too much about the platform
00:05:06 it's running on runs fine on both
00:05:08 Android and I
00:05:09 yes well and in the end having a
00:05:11 codebase isn't any good we also get the
00:05:14 native script CLI which we used to
00:05:16 create new projects to test them to run
00:05:19 a development server which automatically
00:05:21 loads the app on our connected device
00:05:24 and reloads it whenever we change our
00:05:26 code and which also in the end allows us
00:05:29 to package our wrap up and get an apk or
00:05:32 an IPA file to deploy it on to Android
00:05:35 and iOS and by the end of the course you
00:05:38 will learn how to ship your app to the
00:05:40 App Store's
00:05:45 now what is angular to be honest you
00:05:48 should be able to answer that question
00:05:50 because it really is a prerequisite of
00:05:52 this course I do have an angle a
00:05:55 refresher module in this course which
00:05:57 you should take to get on the same page
00:05:59 as I am basically or to refresh these
00:06:02 basics about angular but I will not
00:06:05 explain every single concept angular has
00:06:08 or offers or how it works so if you feel
00:06:12 like I'm moving too fast through angular
00:06:14 stuff in this course if I'm writing
00:06:16 angular code too fast for you really
00:06:20 pick up a dedicated angular course like
00:06:22 my complete guide here on udemy for
00:06:24 example simply because this is not an
00:06:26 angular course it's a native script with
00:06:29 angular course and if I teach both then
00:06:31 this course would have 60 hours and
00:06:33 would be well basically not suited for
00:06:35 anyone because it would not be teaching
00:06:38 native script and F and not be teaching
00:06:40 angular in depth so I rather focus on
00:06:43 native script here and give you a brief
00:06:45 refresher on angular but I rely on you
00:06:47 being able to follow along in all the
00:06:49 angular related code so therefore just
00:06:53 as a quick refresher angular is a
00:06:55 JavaScript framework which we use to
00:06:58 build highly interactive and reactive
00:07:00 web applications typically or web
00:07:02 application user interfaces mostly it
00:07:06 uses typescript which is a superset to
00:07:08 JavaScript which in the end compiles
00:07:10 down to JavaScript but which makes
00:07:12 development with JavaScript a bit easier
00:07:14 we use it to create single page
00:07:16 applications typically in the web which
00:07:18 are applications that don't need to
00:07:20 reload the page on every click but
00:07:23 rather fetch data behind the scenes and
00:07:25 rerender what we see on the screen with
00:07:27 javascript and therefore we basically
00:07:30 use tools like angular to build web
00:07:32 applications that are very close to the
00:07:34 behavior of native mobile applications
00:07:37 hence it makes sense that we also use
00:07:39 angular to well create real mobile
00:07:42 applications with the help of native
00:07:44 script
00:07:48 let's get our hands dirty let's start
00:07:50 with native script actually before we
00:07:52 leave this first introductory module now
00:07:55 for that you can visit native script
00:07:57 auric which is the official web page of
00:07:59 native script and always a great place
00:08:02 to dive deeper to go into the official
00:08:04 Docs to look up a concept which I only
00:08:07 touch on may be or which you need for
00:08:09 your next app and on that page if you
00:08:13 click on the docs you can basically
00:08:15 choose your flavor of native script and
00:08:17 we're going with native script with
00:08:18 angular in this course and there if you
00:08:21 click on getting started you will
00:08:23 actually find detailed instructions on

00:08:25 how to get started and in the third
00:08:28 module of this course so the first
00:08:30 module after the angular refresher I
00:08:33 will walk you through a full setup on
00:08:35 your local machine in depth so you don't
00:08:38 need to do that right now
00:08:39 instead what you can do is you can go to
00:08:41 developers here and then click on
00:08:43 playground and that's really cool
00:08:45 because that is a interactive playground
00:08:47 interactive development environment you
00:08:50 could say running in the browser and
00:08:52 there you can choose your language and
00:08:55 we'll go with angular here and now you
00:08:57 get this bar code here this QR code and
00:09:00 you can download the native script
00:09:02 playground app for your Android or iOS
00:09:05 device and scan this code to see the app
00:09:09 you're building here in the web browser
00:09:11 live on your real device which is
00:09:14 amazing now the downside of this is
00:09:16 basically this playground app is a
00:09:19 wrapper which only has a limited set of
00:09:21 features it supports which you can use
00:09:22 in here which is actually quite broad
00:09:25 but not everything we might want and
00:09:27 therefore we will use a different set up
00:09:29 for the rest of this course but to get
00:09:31 started this is great so make sure to
00:09:33 download this playground app and then
00:09:36 scan this code
00:09:43 now once you scanned this QR code you
00:09:46 might be prompted to download the
00:09:49 preview app on the App Store and if that
00:09:52 should be the case make sure to do that
00:09:54 and thereafter it should open the
00:09:58 preview app and open that starting app
00:10:02 on your Android or iOS device and here
00:10:05 it is running on my device now the cool
00:10:08 thing is that you can now build that
00:10:11 project here in that web editor so here
00:10:14 on the left you see your simplified
00:10:17 angular project with the app folder with
00:10:19 a routing module with some components
00:10:22 and you will notice that that basically
00:10:25 looks like an angular for the web
00:10:26 project one important difference can be
00:10:29 found in the components what you see
00:10:30 here is this XML code I was talking
00:10:33 about because these elements like these
00:10:35 labels are really compiled down to their
00:10:38 native equivalents so to a label on
00:10:41 Android or a label on iOS so that you
00:10:44 get a real native user interface and not
00:10:46 that HTML user face wrapped into some
00:10:49 webview and therefore now if you change
00:10:51 something here let's say here on home I
00:10:54 say this is amazing and I also add a
00:10:58 button which I can do by dragging and
00:11:01 dropping it here into my interface and I
00:11:04 say tap me we can really build a nice
00:11:07 little first app here and as I said the
00:11:11 amount of features you can use here is a
00:11:12 bit limited because the preview app is
00:11:15 essentially a native app wrapping your
00:11:17 well demo app here and therefore you can
00:11:20 only use features and able to buy that
00:11:22 preview app which is a lot for example
00:11:24 accessing the device camera should be
00:11:27 possible but some things might not be
00:11:29 possible and you probably want to learn
00:11:31 how to develop locally on your machine
00:11:33 anyways so this is a great way to well
00:11:36 play around it is called playground
00:11:38 after all but for a real full
00:11:40 development environment we'll dive into
00:11:42 this in section free so right after the
00:11:44 angular refresher but here let's say we
00:11:47 want to change this this is amazing text
00:11:50 up here when we tap that button so I'll
00:11:53 call this on change the
00:11:55 what we could do is we could go into our
00:11:57 home component and they're all named us
00:12:00 on change because I renamed it in the
00:12:03 template too and then we have a property
00:12:05 here which is my label text which is by
00:12:09 default this is amazing and when we tap
00:12:13 this button well then just as we do it
00:12:15 in angular for web app we say this label
00:12:17 text and you see you even get some auto
00:12:19 completion here this was tapped and this
00:12:25 is some code we can execute here in the
00:12:27 typescript file then in HTML we now can
00:12:29 just bind this with property bindings so
00:12:32 using a default angular feature here on
00:12:34 this first label we can bind this to the
00:12:37 label text so to the property which we
00:12:40 define in home component and this is all
00:12:42 just angular logic here the only
00:12:45 difference really is that we don't use

00:12:47 HTML here but other than that we use
00:12:49 property binding we use event binding
00:12:52 down there with the tap the tap of
00:12:55 course also is an event we don't know
00:12:56 from the web so these are the tiny
00:12:58 differences you will learn about in this
00:13:00 course but other than that it's just
00:13:01 angular and now once you're done you can
00:13:04 hit save here and it should restart the
00:13:07 app automatically on your preview app
00:13:09 and there you will see that now you have
00:13:13 this button and if you tap it this
00:13:14 topmost text here changed this was tap
00:13:17 text so that is a great way and I can
00:13:21 only encourage you to play around with
00:13:23 that here play around with some of these
00:13:25 widgets until you feel like you have had
00:13:27 enough and then you can continue and in
00:13:30 the next module we'll actually have a
00:13:32 refresher on angular and thereafter
00:13:34 we'll have a full set up on our local
00:13:36 machine and I will teach you native
00:13:38 script step by step so you don't need to
00:13:40 understand everything that's going on
00:13:41 and this template here right now that's
00:13:43 just a tiny example to show you how
00:13:46 quick and easy it can be to get started
00:13:49 and feel free to follow along here in
00:13:51 the playground right at the beginning of
00:13:52 the course if you prefer that but
00:13:54 definitely also explore the local setup
00:13:57 I will teach you because there you can
00:13:59 use everything and you can build and
00:14:01 ship your apps without any issues so
00:14:04 with that let's see what else is in the
00:14:06 course before we dive right into our
00:14:08 local setup
00:14:09 and learn native script from scratch
00:14:15 so now that we had a look at our first
00:14:18 native script app let's see what else is
00:14:20 in the course we're almost done getting
00:14:23 started in the next module you will get
00:14:25 that angular refresher I was talking
00:14:28 about and this is an optional module
00:14:30 definitely skip it if you already know
00:14:33 angular and you feel like you need no
00:14:35 refresher it's purely optional the
00:14:38 module after that will be the first real
00:14:40 module of this course where we dive into
00:14:43 the NATO's core basics how it generally
00:14:45 works and where we also set it up
00:14:47 locally on our machine there after we'll
00:14:49 have a look at navigation and native
00:14:52 script so how we can go back and forth
00:14:54 how we can add tabs how we can add a
00:14:56 side drawer so all that fun stuff
00:14:59 thereafter we'll have a look at styling
00:15:01 and theming so how we can make our app
00:15:03 look good how we can add different
00:15:06 colored buttons implement our own
00:15:09 general theme and the app and so on
00:15:11 right before we then dive into forms and
00:15:14 user input which is of course a crucial
00:15:15 part of most apps so you will learn how
00:15:18 to use angle or form stare how to
00:15:20 validate forms and how to use that user
00:15:23 input you're getting there after we'll
00:15:25 have a look at managing state so how we
00:15:27 can work with all the data we gather and
00:15:30 we have in the app right before we then
00:15:32 have a look at HTTP interactions which
00:15:35 basically means how can we also
00:15:37 communicate with a back-end server to
00:15:39 store our data there or to fetch it from
00:15:42 there
00:15:42 now a related concept then is
00:15:45 authentication because we certainly also
00:15:48 want to protect our data we want to
00:15:49 protect our app and user authentication
00:15:52 is something you need in a lot of apps
00:15:54 therefore in this course you will also
00:15:56 learn how you would implement that in a
00:15:57 native script app we're nearing the end
00:16:00 of this course and therefore will then
00:16:02 publish our app to the App Store's
00:16:04 and you will learn how that publishing
00:16:05 process works now thereafter we'll have
00:16:09 a look at code sharing and see how we
00:16:11 can actually use that native app code we
00:16:15 wrote throughout this course to adjust
00:16:17 it such that we get a web app out of
00:16:20 this as well so that's a tiny bonus you
00:16:22 could say but still not a short module
00:16:25 actually quite long because that is a
00:16:27 pretty cool
00:16:28 native script and not something to look
00:16:31 it over whilst you of course do use
00:16:33 native script to build native apps being
00:16:36 able to then not just build native apps
00:16:38 but build web apps as well is of course

00:16:41 an amazing asset and an amazing feature
00:16:43 offered by native script with angular
00:16:46 and therefore in this module we will
00:16:48 have a look at how you can use one code
00:16:50 base to get free apps Android iOS and
00:16:53 the web well and thereafter I will
00:16:57 basically give you some next steps you
00:16:59 could look into you round up the scores
00:17:01 and you will have learned a lot about
00:17:03 native script
00:17:08 so right before we get started with the
00:17:11 refresher and then with the first real
00:17:13 content modules it's important that you
00:17:15 also know how to get the most out of the
00:17:17 course because whilst it might look
00:17:19 trivial just watch the videos right it
00:17:22 actually isn't and I want to ensure that
00:17:24 you're getting as much value for your
00:17:26 money as possible so obviously you want
00:17:29 to watch the videos it's a video on the
00:17:31 mont course watching the videos also
00:17:34 means that you should watch them at your
00:17:35 speed so feel free to slow me down or
00:17:39 speed me up with the udemy video player
00:17:41 controls if I'm going too fast or too
00:17:43 slow pause the videos and occasionally
00:17:46 go back to older videos that is okay
00:17:49 that's a normal process of learning you
00:17:51 will not understand everything at the
00:17:53 first time and then it's absolutely fine
00:17:56 to go back to an older lecture to
00:17:58 reiterate a certain concept or to go
00:18:00 through a certain sequence of concepts
00:18:03 again but watching the videos isn't
00:18:06 everything you also want to code along
00:18:08 at least that is what I recommend if you
00:18:11 code along if you pause the video and
00:18:14 write some code on your own and then see
00:18:15 how I implement this this really makes
00:18:18 you a programmer you need to get your
00:18:21 hands dirty you need to code on your own
00:18:23 there are a few assignments of this
00:18:26 course and I recommend that you do these
00:18:28 as well but other than the assignments
00:18:30 definitely just code along and all the
00:18:32 normal code you write because the whole
00:18:35 course is one assignment if you want to
00:18:37 look at it like this so take this
00:18:39 opportunity and code along and whilst
00:18:42 you're coding along you will face errors
00:18:44 that's a normal process during
00:18:46 development I face errors all the time
00:18:49 as well and your first step should
00:18:52 always be to try and fix them on your
00:18:55 own Google the error message or as a
00:18:57 quick starter read the error message
00:18:59 some error messages are quite
00:19:02 understandable so read the error message
00:19:05 google it if you don't understand it
00:19:06 because you will find many threats on
00:19:08 Stack Overflow and blog posts which
00:19:11 might discuss this exact error and how
00:19:13 to solve it also download and compare my
00:19:16 code which is attached to many lectures
00:19:18 throughout the course and always to the
00:19:20 last lecture of every module
00:19:22 because by comparing your code to mine
00:19:24 you will be able to find out where your
00:19:26 code differs and what could be causing
00:19:28 the problem now this really is a crucial
00:19:32 part and it's often overlooked you got
00:19:34 resources like Google and Stack Overflow
00:19:36 so you use them because if you're able
00:19:39 to fix your own errors then you've made
00:19:41 a huge step forward you need to be able
00:19:44 to solve problems as a programmer now
00:19:47 also use the official Docs I will point
00:19:51 at them a couple of times throughout
00:19:52 this course and that's not because I'm
00:19:54 too lazy to teach you the concepts I
00:19:57 will teach them but there's so much more
00:20:00 than what I can teach and there might be
00:20:02 variations of certain concepts or extra
00:20:06 configurations you can set up for
00:20:08 certain objects we might be using so you
00:20:10 will basically have ways of using
00:20:12 certain things differently than I use
00:20:14 them in the course or in your next app
00:20:16 you might need a certain tool or a
00:20:19 certain module which I didn't use here
00:20:22 and the official Docs are then a great
00:20:24 place to learn about all the features
00:20:26 exposed by native script now and last
00:20:29 but not least there is the Q&A section
00:20:31 and the Q&A section should not be your
00:20:34 oh I got an error I don't even look at
00:20:36 it I asked a question place to go that's
00:20:39 not the idea behind it the idea behind
00:20:42 the Q&A section is that you ask if you
00:20:44 absolutely are stuck and you can't find

00:20:47 any solution anywhere or if something is
00:20:50 unclear or if you want to pass back some
00:20:53 feedback and also don't just ask in
00:20:55 their answer help your fellow students
00:20:58 because if you're forced to think about
00:21:00 a problem and solve it you of course
00:21:03 also get way better at programming and I
00:21:06 guess that ultimately is your goal when
00:21:08 you're taking a course like this right
00:21:10 so these are my hints on how you get the
00:21:12 most out of this course and with that
00:21:14 let's just get started let's dive into
00:21:17 the optional angular refresher before we
00:21:20 then have a detailed look at native
00:21:21 script
00:21:26 so let's now set up a real development
00:21:28 environment as we will use it for the
00:21:30 rest of this course on Mac OS and also
00:21:33 on Linux the steps are pretty much the
00:21:35 same now for that you can dive into the
00:21:37 official box here under the angular
00:21:40 Doc's getting started see lies setup and
00:21:42 will basically walk through all these
00:21:44 steps where the first step is to install
00:21:46 node.js now no js' is required because
00:21:50 the built tool uses it behind the scenes
00:21:52 and we will also use its package manager
00:21:55 npm with which it ships now on node.js
00:21:58 or you can download no chess and there
00:22:01 make sure to pick the LTS version 10.15
00:22:04 and only if you're facing issues with
00:22:05 death try the latest version so this is
00:22:08 pretty straightforward
00:22:09 clicking the error gives you a default
00:22:10 downloader which you can install and for
00:22:13 which you can walk thereafter and this
00:22:15 will now install node and also NPM that
00:22:18 package manager which will also use on
00:22:20 your system simply walk through that and
00:22:24 wait for it is set up to finish once it
00:22:27 is finished we can continue with the
00:22:31 next step off the set up already now the
00:22:33 next step is to install the native
00:22:35 script CLI and there we will already use
00:22:37 that NPM command which no J's unlocked
00:22:40 for us for dad open your normal terminal
00:22:43 or a bash and in there
00:22:45 you can simply run npm install – g
00:22:48 native script but this might fail and if
00:22:51 it fails due to a permission error at
00:22:54 sudo in front of this you're then
00:22:56 prompted to enter your password but
00:22:59 after entering this it should install
00:23:00 native script so d native script CLI
00:23:03 it's globally on your system
00:23:05 successfully now don't worry if you're
00:23:07 getting an error in between as long as
00:23:10 it finishes successfully without an
00:23:12 error so without quitting with an error
00:23:14 which you can see by the fact that it
00:23:17 shows you what it installed here and
00:23:19 mentions something like updated a number
00:23:22 of packages if it finishes like this it
00:23:24 was successful and you can continue now
00:23:27 to continue we will not use the
00:23:29 playground app but instead will now use
00:23:31 the full setup to setup the full
00:23:33 development environment we need on Mac
00:23:36 OS now if you're facing any
00:23:39 shoes during the next step definitely
00:23:42 dive into the advanced setup guide for
00:23:44 mac OS or linux and there you will find
00:23:47 a step by step guide of all the steps
00:23:49 you need to execute and you can do a lot
00:23:52 of copy and pasting here to set up all
00:23:54 the things you need on your environment
00:23:56 on your machine to develop iOS and
00:23:59 Android apps there now will not use this
00:24:02 as a default though because the native
00:24:04 script team gives us utility scripts
00:24:06 which you find here that you can run
00:24:08 which will do all these setup steps for
00:24:10 you so only if Dad fails try it manually
00:24:13 so choose your system here I'm using Mac
00:24:16 OS and copy that here and then simply
00:24:20 execute this in your normal terminal now
00:24:23 important before you hit Enter
00:24:25 make sure to add sudo in front of this
00:24:27 to give it the right access permissions
00:24:30 and not get any permission denied errors
00:24:32 you might be required to enter your
00:24:34 password again now this will ask you a
00:24:37 couple of questions and the first one is
00:24:39 whether you have Xcode installed
00:24:41 Xcode is the ited native app development
00:24:44 IDE offered by Apple for building iOS
00:24:47 apps and you need to have that installed
00:24:50 the script can't install it for you
00:24:52 instead you can install it from the
00:24:54 normal app store so make sure to open

00:24:57 that app store and search for Xcode
00:24:59 there and install it in case you don't
00:25:01 have it installed yet I do but if you
00:25:03 don't have it yet install it here it is
00:25:05 free so thereafter in the terminal type
00:25:09 yes here and if you type no it will quit
00:25:11 so you need to have that installed now
00:25:14 thereafter you need to agree here you
00:25:16 can scroll down by hitting space and
00:25:18 then simply type agree and now you'll be
00:25:21 asked a couple of other questions
00:25:22 basically you should answer all of them
00:25:25 with Y which stands for yes like for
00:25:27 example if you need homebrew now all
00:25:29 these different tools which are getting
00:25:31 installed are different pieces of
00:25:33 software that in the end all work
00:25:35 together behind the scenes for
00:25:37 installing all the penalties you need
00:25:39 for your development and then for the
00:25:42 development itself so for building your
00:25:44 application for the different platforms
00:25:47 so for Android and iOS for optimizing
00:25:50 these apps and so on that is what we
00:25:52 need this setup
00:25:53 for now it will take a while this whole
00:25:56 setup will take a while and I will fast
00:25:58 forward whenever to whenever I'm getting
00:26:00 ass again like here if we need chrome I
00:26:03 don't need it because I have it already
00:26:04 if you don't please add it because it
00:26:07 will help us with debugging at some
00:26:09 point I will choose n4 now here because
00:26:12 though because I have it now I want to
00:26:14 install the Java development kit version
00:26:16 8 and the worsen 8 is important if you
00:26:18 have version 10 still install version 8
00:26:21 you need that now if I want to install
00:26:24 Android SDK is the next question I will
00:26:26 and I will type a here to answer yes for
00:26:29 all subsequent questions as well so that
00:26:31 I'm not prompted every time and now it
00:26:34 will install a bunch of stuff and this
00:26:36 can take very long so I will now simply
00:26:38 skip to the point where this is finished
00:26:41 but don't worry if this takes a couple
00:26:43 of minutes this is totally normal it
00:26:46 downloads a lot of things and installs
00:26:47 all these things so let me now fast
00:26:50 forward to when I'm done now I'm now ask
00:26:53 whoever I want to install the Android
00:26:54 emulator system image I will choose yes
00:26:56 and the same for hardware acceleration
00:26:59 now we need dad to spin up Foreman
00:27:03 Android emulators because obviously on
00:27:05 Mac OS thankfully we can do both iOS and
00:27:09 Android development on Windows and Linux
00:27:11 only Android development is possible so
00:27:14 you still need to the Android setup
00:27:15 there but not Xcode ends on now I'm
00:27:19 getting asked whether I want to create
00:27:20 an Android emulator and I'll choose yes
00:27:22 here too though you could do that
00:27:24 through Android studio as well and now
00:27:27 with that we're done here now we can
00:27:30 execute this command to make sure all
00:27:32 these changes which were done behind the
00:27:34 scenes have an effect in the terminal as
00:27:36 well and the next step is that we should
00:27:38 run T and s dr. you also find that step
00:27:42 and your official Doc's here under
00:27:43 verify it D setup this will now analyze
00:27:46 your system and highlight any issues
00:27:48 that might still exist if any and
00:27:50 therefore tell you if you are ready to
00:27:52 bold your first native script project
00:27:54 now you should see a bunch of green
00:27:56 check marks here if you don't go back to
00:27:59 the installation and have a look at this
00:28:01 advanced setup guide for Mac OS or Linux
00:28:03 and walk through that to make sure that
00:28:06 you don't miss
00:28:07 step or that you can manually fix any
00:28:09 step that is marked here now one thing I
00:28:12 will also do is I will install the
00:28:14 Android studio which is the official
00:28:17 development IDE for Android apps
00:28:19 theoretically we don't need that will
00:28:21 not use it for writing code but this
00:28:24 will make launching emulators easier so
00:28:27 I will simply agree here and then
00:28:29 download Android studio for Mac here
00:28:31 which is quite a big download but once
00:28:34 this is done I will walk through the
00:28:35 installer here to to install Android
00:28:38 studio on this system again because it
00:28:41 will help me launch an emulator
00:28:43 thereafter and gives us a nice user
00:28:46 interface for doing so and whilst as its
00:28:49 downloading we can already install the

00:28:51 IDE we will actually use for dad you can
00:28:54 search for Visual Studio code that is a
00:28:57 free IDE which you can install from code
00:28:59 that Visual Studio comm which has great
00:29:02 native script support and is generally a
00:29:04 great development environment and
00:29:06 therefore will use that you can simply
00:29:08 download it here and then walk through
00:29:10 the installer that gives you it's a
00:29:12 straightforward installer installing
00:29:14 that ID on your system now I already
00:29:17 have that so I will not walk through it
00:29:18 in detail here but you'll simply install
00:29:20 it and we'll launch it later so you
00:29:22 don't need to launch it right now we'll
00:29:24 launch it later but this will then help
00:29:26 us work with native script and write our
00:29:29 code now the download did finish here so
00:29:32 let me now run this installer and go
00:29:34 through it on Mac OS it's really simple
00:29:37 you just drag that into your
00:29:38 Applications folder and we'll use
00:29:40 Android studio a little bit later where
00:29:42 I will show you how you can configure
00:29:44 different emulators there again you
00:29:47 wouldn't need it the script we executed
00:29:48 gave us everything to launch an emulator
00:29:51 automatically and so on but this will
00:29:53 give us a graphical user interface for
00:29:55 configuring different emulators as well
00:29:58 now with all that setup finished we can
00:30:02 go back to the command line here and
00:30:03 navigate into a folder with the CD
00:30:06 command where you want to create your
00:30:08 native script projects where you want to
00:30:11 store all the code files and so on
00:30:13 now I navigate it into such a folder
00:30:16 here and then you can simply run TNS
00:30:18 create which is a command that is now
00:30:20 available
00:30:21 which uses the native script seal eye
00:30:23 and first you have to choose a name I
00:30:25 will use NS ng course here because it's
00:30:28 a native script angular course I guess
00:30:30 and you're then asked what style of
00:30:32 native script you want to use now it's a
00:30:34 native script angular course so we'll
00:30:36 choose angular here and let's go with
00:30:38 that
00:30:38 starting HelloWorld template you could
00:30:41 use different templates but we'll add
00:30:42 all these fancy features manually so
00:30:45 that sounds like a good template to
00:30:46 start now this will generate a new
00:30:49 native script project for you create all
00:30:51 these files you need and store them in a
00:30:53 folder in that location you picked here
00:30:56 and once it is done it will also show us
00:30:59 the command we could execute to run this
00:31:02 so here we are now we can navigate into
00:31:05 that created folder and will not use TNS
00:31:08 preview you could and you would get a
00:31:10 barcode you can scan to use your preview
00:31:12 app but I will use TNS run and now here
00:31:16 on Mac OS you can choose between iOS or
00:31:18 Android both should wear work on Linux
00:31:21 and Windows you will only be able to
00:31:24 work with Android so I will run an iOS
00:31:26 simulator here and I will add – – bundle
00:31:31 and the future this might not be
00:31:32 required anymore but right now whilst it
00:31:34 will work without that this gives you
00:31:36 additional optimizations and is
00:31:37 therefore recommended now this will
00:31:40 search for a running iOS emulator or for
00:31:44 a connected iOS device and if it doesn't
00:31:46 find one it should spin up a new
00:31:48 emulator for you so a new virtual device
00:31:51 on your machine automatically once it
00:31:54 did that it will actually build this
00:31:56 demo project which is a fully functional
00:31:58 basic project you get out of the box and
00:32:00 run it on that emulator so that you have
00:32:03 something to play around with right from
00:32:05 the start
00:32:05 now this can take a while um as you see
00:32:08 it's still searching because this hasn't
00:32:10 booted up yet and once this has finished
00:32:13 booting it will start the build process
00:32:15 now important the first time you run
00:32:17 this this can take longer subsequent
00:32:20 build processes will be faster now
00:32:22 important you want to keep that TNS run
00:32:24 iOS or Android process running as long
00:32:27 as you are working on the code because
00:32:29 it will watch your code and
00:32:30 automatically detect changes you saved
00:32:32 and then read the
00:32:34 the project and reinstall it on the
00:32:36 device for you which speeds up your

00:32:37 development experience so keep that
00:32:40 process running as long as you're
00:32:41 working on the code thereafter once
00:32:43 you're done you can hit ctrl C to quit
00:32:46 that process and that's the same on
00:32:48 Windows by the way now here it's done
00:32:50 building and it's installing the app on
00:32:52 the device here you can see it getting
00:32:54 installed here it starts and this is our
00:32:59 first little demo app which we can use
00:33:01 which we get out of the box nothing too
00:33:04 fancy but it works and that is the app
00:33:06 we'll build up on now for completeness
00:33:09 sake let me open a new terminal window
00:33:11 the old one is still running in a
00:33:13 separate window the old process but now
00:33:15 here navigated into that same folder
00:33:18 I'll run Tina's Android – – bundle –
00:33:21 also search for running Android
00:33:23 emulators or connected devices and if
00:33:25 nan are found a new emulator will be
00:33:28 spun up here and then it will also build
00:33:31 the project for Android and install it
00:33:33 on that emulator so here it is launching
00:33:37 an emulator for me and the emulator it's
00:33:40 launching for you might be a different
00:33:41 one and this is one I used before
00:33:43 because I already had Android studio
00:33:46 installed so don't worry if yours looks
00:33:48 a bit different in the end it will be an
00:33:50 Android emulator with the latest version
00:33:53 of Android running on it and once this
00:33:55 is done booting up it will also build
00:33:57 the project for Android and as you see
00:33:59 you can't even have both processes iOS
00:34:02 and Android up and running at the same
00:34:05 time as long as your system supports
00:34:07 dead and you're not facing performance
00:34:09 issues and therefore you can preview the
00:34:11 app on both devices at the same time and
00:34:13 that is also something I'll do
00:34:14 throughout the course so that we can
00:34:16 always see it on both types of operating
00:34:18 systems now here it's still booting up
00:34:21 but soon enough it should be done and
00:34:23 should be starting the Android build
00:34:25 process now as with iOS that first run
00:34:29 of the build process can take a bit
00:34:30 longer
00:34:31 subsequent rebuilds will be much faster
00:34:34 now it's done building here and it's now
00:34:37 installing it on the emulator and
00:34:39 therefore there it will start
00:34:42 momentarily
00:34:44 here it is and thereafter you'll also
00:34:47 have the application running on your
00:34:49 Android emulator this starting
00:34:51 application here at least now this is
00:34:55 nothing too fancy but you can navigate
00:34:57 around here on the right you got your
00:34:58 physical buttons by the way the back
00:35:00 button the home button and the task
00:35:01 switcher and feel free to play around
00:35:04 with it a bit not too fancy obviously
00:35:07 will do way more in this course but this
00:35:09 is our finished setup regarding building
00:35:12 the app and seeing the app now for
00:35:14 working on the code we did install
00:35:16 whistles do you code if you remember so
00:35:18 start this application now and this
00:35:21 should look something like this you
00:35:23 might have an extra sidebar when you
00:35:24 launch it for the first time but in the
00:35:27 end it should look something like this
00:35:28 and you can open a folder here or from
00:35:31 file open folder and there you want to
00:35:34 open that folder you just created with
00:35:36 d2 native script CLI so in my case that
00:35:39 is the NS ng course folder here now if
00:35:43 you hit open here you open your project
00:35:46 in Visual Studio code and this is now
00:35:49 the setup we'll use for the rest of the
00:35:51 course this is now how we will work on
00:35:53 our code here in the source folder
00:35:55 mainly dad is where all the typescript
00:35:57 and angular code will live now just a
00:36:00 couple of extensions you should have
00:36:02 here to get a similar view to what I
00:36:04 have here and a similar behavior you can
00:36:07 go to view extensions here or use that
00:36:09 shortcut to open the extensions menu and
00:36:11 there one thing which is totally
00:36:14 optional our material icons you can
00:36:17 search for material icon and then
00:36:19 install the material icon theme I
00:36:21 already have it installed and that just
00:36:23 changes some file icons but if you want
00:36:26 to have the same file icons as I do well
00:36:28 you can install this not optional but
00:36:31 absolutely recommend it is the native

00:36:33 script extension which I also already
00:36:36 have installed but you should install
00:36:37 this it will help you with debugging and
00:36:40 also give you better Auto completion and
00:36:42 general IDE support and for angular
00:36:45 development I recommend using the
00:36:47 angular essentials package this one here
00:36:51 but John Papa I also got this installed
00:36:54 already this comprises a couple of
00:36:56 extensions which help with a
00:36:58 development and simply make debt easier
00:37:01 now with these free extensions installed
00:37:03 you can go back to that Explorer view
00:37:07 here and then you got everything set up
00:37:09 as I do in case you don't have that the
00:37:12 dark look and you like to have it you
00:37:14 can hit command shift P and simply go to
00:37:17 color theme and choose the dark
00:37:19 blaspheme here and that is the theme I'm
00:37:21 using but with that we're all set to
00:37:24 continue in the next lecture we'll do
00:37:26 the setup on Windows and you can
00:37:28 therefore skip that if you're not using
00:37:29 Windows and then we're pretty much done
00:37:32 to get started writing some code
00:37:38 so now that we set everything up on Mac
00:37:41 let's all do it on Windows obviously you
00:37:43 can skip this window if you're not
00:37:45 developing on Windows so on Windows we
00:37:48 also want to install node.js and we do
00:37:51 that from node.js ORAC just as we did it
00:37:54 on a Mac of course generally the
00:37:56 installation process for dad will be
00:37:58 exactly the same so basically on noce
00:38:01 historic we download the LTS version
00:38:03 this one and after its downloaded you
00:38:06 simply walk through dead node.js
00:38:07 installer to install it on your system
00:38:10 and you can basically just follow
00:38:12 through all these paths and it installed
00:38:15 thereafter now once that is installed we
00:38:20 finished the first step here and we can
00:38:22 confirm that it is installed by starting
00:38:25 your a normal command prompt and their
00:38:27 type note and if this does not throw an
00:38:30 error it succeeded and press ctrl C
00:38:33 thereafter twice to exit out of this
00:38:35 note input mode which we won't need here
00:38:36 now we can continue with our setup so
00:38:39 the next step now is that we install the
00:38:41 native script C line windows T with the
00:38:43 NPM install – G native script command so
00:38:46 NPM install – G native script is to
00:38:50 command and this will now install this
00:38:51 native script seal I globally on our
00:38:54 machine so that we can then create
00:38:56 projects anywhere on our machine now
00:39:00 let's wait for that to finish when
00:39:02 prompted for whether you want to share
00:39:05 statistics about your usage you can
00:39:07 choose wherever you want to do that or
00:39:09 not you can also enable command line
00:39:11 completion on certain terminals by
00:39:13 pressing yes there when asked and you
00:39:17 can also here opt into a newsletter
00:39:21 basically and you can just hit enter
00:39:23 without entering anything to not do that
00:39:26 now with that the CLI is installed and
00:39:29 as a next step we now could use the
00:39:33 playground app on our device and use the
00:39:37 cloud playground but we'll now dive into
00:39:39 the full setup for Windows now as with
00:39:43 Mac OS in case you watch that video to
00:39:45 you if you're facing any issues during
00:39:47 that setup check that advanced setup
00:39:49 windows link here we
00:39:51 will list all the setup steps one by one
00:39:54 and you can follow through these here
00:39:56 mostly with copy and paste if you want
00:39:59 to do that manually
00:40:00 now hopefully and as a default you
00:40:04 should not need to go through that
00:40:06 though because you can use this script
00:40:09 prepared by the native script team which
00:40:12 will set up everything for you
00:40:14 automatically so you can clip click that
00:40:16 copy button here and then go back to
00:40:20 your command prompt but not your normal
00:40:22 one but instead open your windows menu
00:40:26 and then right-click on your command
00:40:28 prompt and choose run as administrator
00:40:31 now with that command prompt here opened
00:40:33 an administrator mode paste in that
00:40:36 command you can copy here and hit enter
00:40:40 and this will now download this script
00:40:44 from this address you are seeing here
00:40:46 for you and execute it for you and it
00:40:48 will ask you a couple of questions
00:40:49 whilst it does that now as you see this
00:40:52 first question is basically something we

00:40:54 have to answer it yes since it is
00:40:55 required for the rest of the script so
00:40:57 let's enter why it hit and hit enter and
00:40:59 now this will download a bunch of stuff
00:41:01 and stahl it and we'll walk you through
00:41:03 several steps that you need to go
00:41:05 through to make sure that you can
00:41:07 basically start developing with native
00:41:09 script and native apps in general on
00:41:12 your device now the next question is
00:41:15 where ever you want to install Google
00:41:16 Chrome now this will be required for
00:41:18 some debugging so you should have it
00:41:21 installed I already do so I will type
00:41:23 and Forno here because I got it already
00:41:25 I want to have the Java development kit
00:41:28 we need that so let's choose yes there
00:41:30 and it will automatically install that
00:41:32 kit in the right version which is
00:41:34 version 8 as of now now I may ask
00:41:37 whether I want to run another script
00:41:38 here and I will choose yes here since it
00:41:41 is also required to run and this will
00:41:44 now download T JDK and install that on
00:41:47 my machine as well now I'm getting asked
00:41:50 if I want install the Android SDK and
00:41:52 basically asked for all these questions
00:41:54 I'll choose yes here because we
00:41:55 definitely need that to develop Android
00:41:57 apps by the way be aware that some of
00:42:00 these downloads are pretty big and
00:42:01 therefore can take a while as can the
00:42:03 subsequent installation steps
00:42:05 after now this step can take very long
00:42:10 because it's installing a lot of stuff
00:42:11 so just let's wait for that to finish
00:42:15 now after this very long taking step I'm
00:42:18 asked if I want to install the Android
00:42:21 emulator and I will choose yes there
00:42:23 because we'll need that you create
00:42:26 virtual Android devices on which we can
00:42:28 test our application we can also test on
00:42:31 a real Android device but you might not
00:42:34 have one to begin with maybe you don't
00:42:36 want to use it for that or you do want
00:42:38 to use it and do you do have one but you
00:42:40 also want to test on different devices
00:42:43 smaller ones bigger ones older ones so
00:42:46 having an emulator makes a lot of sense
00:42:49 and this is now getting a set up for us
00:42:51 here now in between if you're getting
00:42:54 this failed to install hexam in silent
00:42:57 mode hacks em that is hardware
00:42:58 acceleration for the emulator and if
00:43:00 that fails as it does for me
00:43:02 you should get an installer when they
00:43:04 open up which you can now use to install
00:43:06 that hardware acceleration thing and
00:43:09 that is simply required to well make
00:43:11 your emulator more performant now let's
00:43:14 press any key to continue
00:43:16 and with dead we should be done now as
00:43:19 it says here this script has modified
00:43:21 your environment you need to log off and
00:43:23 log back on for changes to take effect
00:43:25 now I will do that but before we do that
00:43:28 lets actually also Google for Android
00:43:31 studio and download that because we
00:43:34 haven't installed that through that
00:43:35 script this is the official IDE provided
00:43:38 by Google for developing Android
00:43:40 applications and we will not use that
00:43:42 IDE in this course we'll use a different
00:43:45 one which is faster and actually better
00:43:47 for native script development but we
00:43:50 should still download and install that
00:43:52 because it will make certain things like
00:43:54 debugging or mainly launching emulators
00:43:57 and so on much easier so agree here and
00:44:00 download Android studio for Windows and
00:44:02 that is quite a big download it's one
00:44:04 gigabyte almost so let's now wait for a
00:44:07 dad to finish and walk through dad
00:44:08 installer together too before we then
00:44:11 log off and restart our system for all
00:44:14 changes to have an effect
00:44:15 now with the download finished execute
00:44:18 the downloaded file
00:44:19 and this should fire up an installer for
00:44:22 Android studio and in that installer
00:44:25 let's go through it now here regarding
00:44:28 these components we could install it but
00:44:31 we should already have that so let's
00:44:32 just install Android studio you can pick
00:44:34 any location you want of course and hit
00:44:37 install here and now this again can take
00:44:40 a while but it will now install that IDE
00:44:42 and all the related tools on your system
00:44:46 and now with this finished you don't
00:44:50 have to start it you can just finish

00:44:52 like this and now i will restart my
00:44:54 system basically and then continue with
00:44:56 the rest of the setup and create our
00:44:58 first project with all these installed
00:45:00 tools here so I did restart my system
00:45:04 now and we walked through the
00:45:06 installation step with the script here
00:45:08 if you faced any issues try to step by
00:45:10 step guide you find your tube and now
00:45:13 with that all setup we can verify our
00:45:15 setup with the command mentioned here
00:45:17 with TNS doctor so let's now run this
00:45:21 command in the command prompt anywhere
00:45:24 on your machine TNS doctor and this
00:45:28 shirt now give you hopefully the
00:45:30 information that everything is set up
00:45:32 correctly so let's gather the
00:45:34 information here and that is looking
00:45:36 good you should see a bunch of green
00:45:38 checkmarks here if you don't see what
00:45:41 went wrong there and try the manual
00:45:44 steps I mentioned before here to make
00:45:46 sure you do add all these components
00:45:48 which are essentially required here now
00:45:51 with everything set up correctly we can
00:45:53 continue and we can now create our first
00:45:56 simple project just as we did it in the
00:45:58 Mac OS and Linux setup in the last video
00:46:01 now and for this we can actually go up
00:46:05 in the docs and here under seal I basics
00:46:08 you can learn how to create a project
00:46:10 but it's actually really simple what you
00:46:14 can do here is you can navigate into a
00:46:17 folder where you want to create your
00:46:19 project and that's really important
00:46:20 choose a folder where you want to have
00:46:22 your development projects you can
00:46:25 navigate around with the CD command you
00:46:26 can switch the folder with the drive
00:46:28 name and then I : so here I'll stay on C
00:46:31 and I will simply do that on the day
00:46:33 but you might of course have your
00:46:35 dedicated development folder and in the
00:46:37 place where you want to create your
00:46:38 project run T&S create and this will
00:46:41 give you an interactive wizard for
00:46:44 creating your project so first of all
00:46:45 you should choose your name and I will
00:46:47 name this NS ng for a native script
00:46:51 angular course then you are prompted for
00:46:55 which style of native script you want to
00:46:58 use and this is a native script an
00:46:59 angular course so we'll pick angular
00:47:01 here and we'll go with T hallo world
00:47:03 setup there and simply hit enter and now
00:47:06 this behind-the-scenes will create a new
00:47:08 folder for us in my case here on the
00:47:10 desktop since I chose that as my place
00:47:13 for running the TNS create command and
00:47:16 this folder will have our full native
00:47:19 script project inside of it now with
00:47:22 that all finished here we see some
00:47:25 commands you could run for while
00:47:27 launching our project but will not use
00:47:29 this preview app instead I will go in
00:47:32 there and I will use a different command
00:47:34 I will run TNS run Android – – bundle
00:47:38 now – – bundle might not be required in
00:47:41 the future anymore right now you should
00:47:43 run this to have additional
00:47:44 optimizations being used with this
00:47:47 command being executed it should try to
00:47:49 automatically launch an emulator an
00:47:52 Android emulator on your system in case
00:47:55 you have no connected Android device or
00:47:58 running Android emulator now important
00:48:02 iOS development is not possible on
00:48:04 Windows so you can't run an iOS emulator
00:48:08 here that will not work that is simply
00:48:10 not supported by Apple unfortunately now
00:48:13 here it did launch the emulator and now
00:48:15 it's building the app in the background
00:48:16 this starting app we get and once it's
00:48:18 done building it will automatically
00:48:20 launch it on that emulator here now that
00:48:23 first launch can take a while by the way
00:48:25 because it does a lot of initial setup
00:48:27 during that first launch subsequent
00:48:29 launches will be faster now here it
00:48:31 built the project successfully and then
00:48:33 launches it after installing it on the
00:48:35 device by the way if your firewall
00:48:38 should be asking you for access during
00:48:40 all that launching definitely granted to
00:48:42 it and here we got our first native
00:48:45 script app running on and
00:48:47 emulator and that is of course awesome
00:48:50 and a great first step here now
00:48:53 obviously we don't just want to see it
00:48:54 run we also want to be able to edit the

00:48:56 code so as a last step of this video
00:48:59 we'll set up our development environment
00:49:01 to make sure that we have all the setup
00:49:04 we need to well work on our app for that
00:49:07 I can only recommend using visual studio
00:49:08 code which is a free IDE for which an
00:49:11 official native script plug-in exists
00:49:13 which makes working with native script
00:49:15 really simple and fun now you can
00:49:18 download that from code visual studio
00:49:20 comm you can use it for all platforms
00:49:23 and once that download finished just as
00:49:27 always you simply walk through the
00:49:29 Installer that gives you pretty
00:49:32 straightforward there nothing special to
00:49:34 setup install it anywhere you want and
00:49:37 with it installed we can launch it right
00:49:39 away and now here in Visual Studio code
00:49:42 um I will actually not use that side bar
00:49:45 you can play around with these settings
00:49:47 and make sure it appears in the way you
00:49:49 want it to appear you like that to look
00:49:52 I will basically just open a folder here
00:49:56 you can also of course open a folder
00:49:58 with file open folder and open that
00:50:01 folder which are just created which is
00:50:02 this NS ngi chords folder here select
00:50:06 the folder and now you have your project
00:50:07 in your editor here now these are all
00:50:12 the files and folders with which will
00:50:14 work now to get great IDE support and
00:50:17 exactly the look I will have throughout
00:50:19 the rest of this course
00:50:20 regarding the files is on you should go
00:50:22 to this extensions area here on left or
00:50:25 under view extensions or with that
00:50:28 shortcut and then the extensions here I
00:50:30 will be using the material I can theme
00:50:32 which is 100% optional but I like that
00:50:35 look a lot so I will install that the
00:50:37 material I can theme here now again you
00:50:39 don't need that for native script
00:50:41 development just to get the same look as
00:50:42 I do but what you should install is here
00:50:45 native script search for that and
00:50:48 install this official plugin which will
00:50:50 help you with debugging and also with
00:50:52 auto completion and general IDE support
00:50:55 for native script and with that
00:50:57 installed all the search for angular
00:50:59 essentials which is a general angular
00:51:02 extension or a package of extensions
00:51:05 actually this one which is all to
00:51:07 install to speed up your angular
00:51:08 development in case you don't have that
00:51:10 already now with all these extensions
00:51:12 installed you can now hit reload here to
00:51:15 have them all be enabled and now you can
00:51:18 continue here activate that material
00:51:21 icon theme here to change your icons to
00:51:23 the way you'll see them in my course
00:51:24 here and you're now ready to continue
00:51:28 ready to work on angular and native
00:51:31 script and build amazing apps so let's
00:51:33 move on
00:51:37 so we learned how to set up our
00:51:40 application how to create a new one and
00:51:42 we get the whole development environment
00:51:44 set up to start working on our native
00:51:47 script apps now you learned how to
00:51:49 launch your app on both Android and iOS
00:51:53 even simultaneously if your machine
00:51:55 supports it but what if you actually
00:51:57 want to use a different device than the
00:51:59 one it chose for you what if you want to
00:52:01 use a iPhone X or a different Android
00:52:05 device well you can quit the emulators
00:52:08 which it started for you and you can
00:52:10 manually choose different ones let's
00:52:12 start with iOS but don't quit the video
00:52:16 because I'll show Android in a second
00:52:17 queue and open Xcode on Mac OS you can't
00:52:22 do that on Windows but on Mac OS you can
00:52:24 there choose open another project and
00:52:27 then navigate into the project folder
00:52:31 you created so in my case that's DNS ng
00:52:35 course folder in that NS ng course
00:52:38 folder choose the platforms folder and
00:52:40 then iOS and that is the folder you want
00:52:42 to open now this opens Xcode with your
00:52:46 iOS app folder in your project folder
00:52:50 and that indeed is inside of your code
00:52:53 here that folder it is it opens that
00:52:56 folder in Xcode now we will not write
00:52:58 our code here but here you can actually
00:53:01 choose different emulators different
00:53:04 virtual devices and you can also start
00:53:07 your application from inside here by
00:53:09 hitting that play button and this will
00:53:11 now start the app here on this device

00:53:15 and even if you dare after quit this
00:53:18 process here it will keep the emulator
00:53:20 up and running or it should at least and
00:53:22 you can therefore continue to use that
00:53:24 emulator even if you then use the TNS
00:53:27 run iOS command again so now it's
00:53:30 starting my iOS emulator here as you can
00:53:35 see it's the iPhone X we have two knotch
00:53:38 at the top here and it boots our
00:53:40 application there as well here it is you
00:53:44 can also quit this process here it keeps
00:53:47 the emulator up and running and you can
00:53:50 then go to your kernel
00:53:51 and rerun the TNS run iOS a bundle
00:53:54 command – – bumble and now it will
00:53:56 automatically again search for emulators
00:53:58 find you're running one and use dad to
00:54:01 launch the app on it so that's a
00:54:03 convenient and easy way of switching the
00:54:05 emulator so let's quickly see if that
00:54:09 works it's searching for devices and it
00:54:13 did find my device here and therefore
00:54:15 now rebuilds the app and will then
00:54:17 launch it on that device as I mentioned
00:54:20 here it is getting installed and here it
00:54:24 is launching for us that's the same app
00:54:27 as before but now running on our iPhone
00:54:29 X so that is how you can use Xcode to
00:54:34 run your app on a different emulator
00:54:36 as a side note here when you click on
00:54:39 your project name you might want to fix
00:54:41 any team issues you see here I actually
00:54:44 got one and it should work without that
00:54:45 but if you're facing issues make sure
00:54:47 you choose a development team login with
00:54:50 your Apple ID and resolve any errors
00:54:53 that might show you here though
00:54:54 important you will not need a paid apple
00:54:57 developer account for building iPhone
00:54:59 apps right now
00:55:00 only when you later want to deploy them
00:55:01 so don't pay anything here just fix that
00:55:04 in case you get any errors related to
00:55:06 that now that is the iPhone what about
00:55:08 Android well we can start Android studio
00:55:11 because we did install it after all and
00:55:13 when this starts for the very first time
00:55:16 it might actually walk you through a
00:55:19 setup wizard I will use my previous
00:55:23 settings though because I already had it
00:55:26 installed and you don't need to install
00:55:27 anything in it wizard because all the
00:55:29 SDKs and emulators all that stuff was
00:55:32 already installed so you can basically
00:55:34 skip all of that or install the latest
00:55:37 versions and so on but in general you
00:55:39 shouldn't need to install anything there
00:55:41 now once that completed you should see
00:55:44 something like this or maybe the hole ID
00:55:46 you already open and forced you to
00:55:47 create a new project anyway you should
00:55:49 be able to use file open or here open an
00:55:52 existing Android studio project and then
00:55:55 just as with Xcode go into the project
00:55:58 folder of the Nazca project into
00:56:00 platforms and there now choose the
00:56:02 Android folder and this will now
00:56:05 that project inside of Android studio
00:56:07 now just as with Xcode will not do any
00:56:10 development here that's not the plan but
00:56:13 just as with Xcode we are able to launch
00:56:16 our Android project why Xcode and we can
00:56:21 also set up a different emulator in here
00:56:23 now let's wait for this initialization
00:56:25 process to finish here real quick
00:56:27 because you'll not be able to do
00:56:29 anything before that is done you can
00:56:32 ignore any warnings you might be getting
00:56:33 here once this is done you can go to
00:56:35 tools AVD manager with just a manager
00:56:38 for setting up emulators in the end and
00:56:40 open that tool and here I already got a
00:56:44 bunch of virtual devices you can add a
00:56:46 new one with this plus button in the
00:56:48 bottom left corner and there you can
00:56:51 configure any virtual device you want
00:56:53 based on any pluie print you want let's
00:56:55 say a pixel – here for example click
00:56:58 Next then choose an Android version I'll
00:57:03 actually download the latest 128 here
00:57:06 even but you can take the default one it
00:57:10 selects and definitely use that in case
00:57:11 you're facing any problems during
00:57:14 development for me it will quickly
00:57:16 download that SDK version in general
00:57:19 using these cutting-edge versions so the
00:57:22 versions which are not stable or final
00:57:25 yet which is not recommended because
00:57:27 this one as you can see is recommended
00:57:29 you should take these especially facing

00:57:32 issues using the cutting-edge ones the
00:57:34 latest ones can definitely lead to
00:57:36 issues which you can then easily solve
00:57:38 by falling back to an emulator which
00:57:40 uses the stable Android API level
00:57:47 now you can experiment with these
00:57:49 settings and generally configure your
00:57:51 virtual device just as you want it and
00:57:53 then finish this and launch it with this
00:57:55 play button here now this launch is just
00:57:57 the emulator not the app yet now here it
00:58:01 is and now you can again go back to your
00:58:05 terminal and rerun TNS run Android
00:58:08 bundle it will again search for an
00:58:10 emulator but since you now have one up
00:58:12 and running and that is exactly the one
00:58:14 you launch therefore you configure in
00:58:16 the way you want it we'll take that
00:58:18 emulator and build the app and install
00:58:20 the app on this emulator so here it
00:58:23 already started that build process
00:58:27 and here is the app running on our
00:58:30 custom emulator so that is how you can
00:58:34 switch emulators you can also connect
00:58:36 your real devices and quit any emulators
00:58:38 to force the run process to TNS run
00:58:41 process to build the app and ship it to
00:58:43 your real device and test it there you
00:58:45 just need to make sure that when you
00:58:47 connect a real iPhone you trust your
00:58:50 computer when asked on the iPhone and
00:58:52 for an Android device when you connect
00:58:54 it you need to enable USB debugging more
00:58:57 information can be found in the lecture
00:58:59 after this one so with that let's
00:59:02 continue and in the next section let's
00:59:04 finally get our hands dirty and write
00:59:06 some code
00:59:11 now maybe you also want to run your
00:59:14 project on a real phone and not just on
00:59:16 a simulator now for that let me show you
00:59:19 how this works and for iOS you should
00:59:23 open your platform folder in your
00:59:26 project with Xcode basically what I
00:59:28 already showed you in the last video for
00:59:30 the emulators now there select your
00:59:32 project here in the left corner top left
00:59:35 corner and under general choose a team
00:59:38 and if you don't have one add an account
00:59:40 you need an Apple ID for that and you
00:59:42 also will need to sign up for an Apple
00:59:45 Developer account there is a paid and a
00:59:47 free version and for development the
00:59:49 free version is enough only for
00:59:51 deploying your app later down this
00:59:53 course you'll need a paid version so
00:59:55 here I will just choose the team I
00:59:57 already have which I can select there
00:59:59 and if you see any warnings or errors
01:00:02 down there next to provisioning profile
01:00:04 or signing certificate simply read them
01:00:08 and do as they tell you typically these
01:00:10 are steps like you need to agree to some
01:00:12 updated Terms of Use or here next to
01:00:16 signing certificate you might need to
01:00:18 add your iPhone now for this to add make
01:00:22 sure you connect your iPhone to your Mac
01:00:24 if you never did this before for
01:00:26 development and on your iPhone you
01:00:29 should then be prompted whether you want
01:00:32 you trust this computer or not and of
01:00:35 course you should choose yes there
01:00:37 please note this is only required if you
01:00:40 connected the first time to this Mac
01:00:41 subsequent connect should not ask you
01:00:44 again
01:00:45 now once your phone is connected and
01:00:47 this part here in the middle is resolved
01:00:50 without errors so you got a team
01:00:51 connected you got an Apple Developer
01:00:53 account you can choose your phone here
01:00:55 from this drop-down typically at the top
01:00:57 here is my iPhone and you should be able
01:00:59 to find your stare too now you can run
01:01:02 your app here with this play button and
01:01:05 alternatively of course you can still in
01:01:08 your project run TNS run iOS – – bundle
01:01:13 and if you have no running iOS emulator
01:01:16 and shut it down if you do have one this
01:01:19 should now automatically recognize your
01:01:21 iPhone and then build the app for that
01:01:25 and for this you will need to have this
01:01:26 development team thing resolved
01:01:28 otherwise this will not work so if
01:01:30 you've got any errors here regarding
01:01:32 your development team building for a
01:01:34 real device is not possible building for
01:01:36 an emulator is but not for a real device
01:01:41 and now with all that setup you should
01:01:44 have the app running on your device so

01:01:46 this is a live stream capturing from my
01:01:48 iPhone and this is the app running there
01:01:51 after adding this important setup here
01:01:54 in Xcode for the provisioning profile
01:01:57 and the signing certificate thereafter
01:01:59 you should be able to run it with TNS
01:02:01 run iOS dash dash bundle and now it's up
01:02:04 to you whether you want to develop on an
01:02:06 emulator or a real device typically an
01:02:09 emulator is is faster and you don't need
01:02:11 to have your device around all the time
01:02:14 and I will use an emulator for the rest
01:02:15 of the course but occasionally testing
01:02:18 the app on a real device makes a lot of
01:02:20 sense of course now running the app on
01:02:22 an iPhone is nice but what about Android
01:02:24 well for Android it's even simpler than
01:02:27 for iOS you don't need to worry about
01:02:29 any certificates or signing there for
01:02:33 Android just make sure that you connect
01:02:35 your Android phone to your machine with
01:02:38 a USB cable Wireless will not work and
01:02:42 turn on USB debugging in your developer
01:02:45 options on your device now where do you
01:02:48 find these developer options though in
01:02:50 your options towards the bottom there
01:02:53 should be your about phone section and
01:02:56 this is now a no-joke in that section
01:03:00 tap your build number seven times and
01:03:04 you'll see some help pop-up come up at
01:03:06 some point once you tap the Det often
01:03:08 enter your PIN
01:03:11 and you're now enabled as a developer on
01:03:15 your phone and you should have these
01:03:16 developer options available now any
01:03:19 developer options you should now turn on
01:03:26 USB debugging down there and with the
01:03:30 turned on and your device connected to
01:03:32 your machine in your project folder in a
01:03:35 terminal or a command prompt you can run
01:03:38 TNS run Android – – bundle just make
01:03:41 sure you don't have any emulators up and
01:03:44 running or your app might get installed
01:03:46 there but with no emulators up and
01:03:48 running and just your phone connected
01:03:50 this should now build the Android app
01:03:52 and ship it on to your Android phone
01:03:57 so let's wait for this build process to
01:04:00 finish here and here the app starts on
01:04:03 my phone and this is now the app running
01:04:05 on my Android device so this is how you
01:04:08 can run the app on both Android and
01:04:09 iPhone devices as I mentioned for
01:04:12 development I will use the emulators
01:04:14 here also because that is easier to
01:04:17 record for me but also because it can be
01:04:19 faster and you can run it there on
01:04:21 devices which you might not own but
01:04:23 occasionally having a look at your app
01:04:26 running on a real device obviously is
01:04:28 important to see if everything is
01:04:30 working correctly there too
01:04:36 now there is one thing about the project
01:04:39 setup that can actually be confusing
01:04:42 which is why I want to talk about it you
01:04:44 might be seeing a lot of JavaScript
01:04:46 files in your project like the app
01:04:48 routing module javascript file the app
01:04:51 component javascript file and if you
01:04:54 look into them this is clearly not the
01:04:56 code will work on and indeed we won't
01:04:58 the typescript setup just works such
01:05:02 that there is a extra build step so to
01:05:05 say which compiles your typescript code
01:05:08 to JavaScript code which is why you see
01:05:10 these extra files here now you don't see
01:05:13 this in a regular angular project
01:05:15 because the angular CLI does that behind
01:05:18 the scenes there here it happens well in
01:05:20 front of the scenes so to say you can
01:05:23 just ignore these javascript files you
01:05:25 can even delete them they will be
01:05:27 recreated automatically but you can also
01:05:30 just leave them be if you're using
01:05:31 source control there is no need to check
01:05:34 them in you can well as I said you can
01:05:37 or them treat them as if they were in
01:05:39 here you'll see them throughout the
01:05:40 course and therefore it looks like we'll
01:05:42 work with a lot of files
01:05:44 well actually keep in mind that for
01:05:47 every TS file there is an extra J's file
01:05:49 in which will never work
01:05:55 now with the project set up for this
01:05:59 course
01:05:59 let's now finally dive into native
01:06:02 script into its core basics and into how
01:06:05 we work with native script how we can
01:06:07 build native apps with native script and
01:06:10 angular and in this module we will dive

01:06:12 into the fundamentals you need to know
01:06:15 you need to be aware of the basics of
01:06:17 native script precisely we'll dive into
01:06:21 how the native script app actually
01:06:23 starts and kind of works behind the
01:06:26 scenes and with debt I specifically mean
01:06:28 how the angular app which is kind of
01:06:32 combined with native script starts and
01:06:34 works will thereafter have a look at the
01:06:38 core UI elements we can use to build our
01:06:41 user interface with native script
01:06:43 because as you will see will not use
01:06:46 HTML for that but something which is
01:06:48 very similar well then have a look at
01:06:51 how we can build our user interfaces
01:06:53 regarding the positioning of the items
01:06:56 on them so how we can make sure that
01:06:58 items are positioned correctly on our
01:07:01 app screens and we'll dive into a
01:07:03 concept called layouts for that and I
01:07:07 will introduce you to the different
01:07:08 layouts native script supports and how
01:07:11 we use these now it is of course nice if
01:07:14 we then have elements on the screen and
01:07:17 they are positioned correctly but we
01:07:19 also need to know how we can style them
01:07:21 to make them look good have the right
01:07:23 colors and so on and therefore styling
01:07:26 native script elements is another
01:07:27 important aspect we'll dive into in this
01:07:30 module and last but not least there will
01:07:33 be errors or there will be things which
01:07:36 you want to double check in your
01:07:38 applications and therefore we'll have a
01:07:40 look at debugging native script apps in
01:07:42 this module too so lots of ground to
01:07:45 cover let's dive in
01:07:51 this is the project we created in the
01:07:53 last course section and I haven't
01:07:56 changed anything there except for the
01:07:58 get ignore file which I add because I'll
01:08:00 use git for versioning by the way in
01:08:03 case you want to have that file you find
01:08:05 it attached to this lecture now I want
01:08:07 to spin up my virtual devices again and
01:08:10 I want to build and run my app for them
01:08:13 and I could do this in the terminal as I
01:08:15 did in the last section and it will
01:08:17 actually but I will use the terminal
01:08:19 which is integrated into Visual Studio
01:08:21 code and you can open that with the
01:08:24 terminal or here under terminal new
01:08:27 terminal and this will open that
01:08:29 terminal portion here at the bottom of
01:08:32 your screen and that will be your normal
01:08:34 system command prompt or terminal just
01:08:37 integrated into this IDE and already
01:08:39 navigated into this project folder so
01:08:42 any command you run here will be run in
01:08:45 the scope of this project now in there I
01:08:48 want to build my app for Android and run
01:08:51 it on an Android emulator and therefore
01:08:53 just as before we can run TNS run
01:08:56 Android – – bundle and of course I want
01:09:00 to do the same for iOS so in a new
01:09:02 terminal window which you can open here
01:09:04 with the plus I will run TNS run iOS – –
01:09:08 bundle and now I got two terminal
01:09:11 windows open here and I will keep them
01:09:15 both open and the processes in there
01:09:17 running because as I already mentioned
01:09:18 in the last section you should keep
01:09:21 these TNS run commands running as they
01:09:26 will watch your source code and
01:09:27 automatically rebuild and reinstall your
01:09:30 app whenever your code changes which of
01:09:34 course speeds up your development flow
01:09:36 so here the iOS emulator already opened
01:09:40 up and here I also got the Android
01:09:45 emulator which already loaded the app
01:09:47 even so these are the two applications
01:09:51 or the two emulators I will use for
01:09:52 testing here and I do have them both up
01:09:55 and running in my integrated terminal
01:09:57 windows here and that is basically it
01:10:00 for now now with that we can continue
01:10:03 working on the code but
01:10:05 first of all I want to explore how the
01:10:07 application actually starts and with
01:10:10 that I mean what happens in angular
01:10:12 because you might be aware of how an
01:10:15 angular application basically works that
01:10:18 you do embed a certain route element in
01:10:21 your index.html file and then you add
01:10:24 that your app module and angular
01:10:27 therefore bootstraps itself into that
01:10:30 place in the index.html file but we got
01:10:33 no index.html file here though we do
01:10:37 have a module so how does this work that
01:10:40 is what we'll explore in the next

01:10:42 lecture
01:10:46 so how does the angular native script
01:10:49 app actually start now it is important
01:10:53 to keep in mind that behind the scenes
01:10:55 native script essentially builds a real
01:10:58 native app a real native app package
01:11:01 which gets shipped to the device to the
01:11:03 emulator here and gets installed and
01:11:06 executed there and this native package
01:11:09 contains a lot of native code so Android
01:11:12 Java code for Android and Swift
01:11:15 objective-c code for iOS your
01:11:18 application logic the angular code you
01:11:22 write basically gets hosted in that
01:11:25 native package and gets executed there
01:11:27 on a JavaScript runtime check the first
01:11:30 module of this course again if you want
01:11:32 to learn more about these internals and
01:11:34 what's happening behind the scenes still
01:11:36 the question is how is our angular app
01:11:39 booted up then well we got this main T
01:11:42 as file in your source folder here and
01:11:44 that main TS file is your core entry
01:11:48 point for the application and that is
01:11:51 the same for Android for web projects
01:11:53 too if you remember now in here we have
01:11:56 code that actually also looks similar to
01:11:59 what you would see in an angular 4 web
01:12:01 project we do import something but we
01:12:03 don't import this from at angular
01:12:06 platform browser as we would do for
01:12:09 angular web project but we do import
01:12:11 this platform native script dynamic from
01:12:14 native script angular slash platform so
01:12:17 this is clearly coming from the native
01:12:19 script ecosystem from a package
01:12:21 distributed by the native script team we
01:12:25 then import our app module and at the
01:12:27 bottom we do call disco euro where we do
01:12:30 execute this code and again this looks
01:12:32 similar to what you would see in an
01:12:34 angular 4 web project but we are using
01:12:37 this bootstrap module method provided by
01:12:41 the object returned by platform native
01:12:43 script dynamic so essentially what we're
01:12:45 doing here is we are executing some
01:12:48 bootstrapping code provided by native
01:12:51 script and behind the scenes this will
01:12:53 actually mount our angular application
01:12:57 and the view is created there into
01:13:00 native app you could say or in our
01:13:02 native app it starts executing our
01:13:04 angular code it starts loading the right
01:13:07 user interfaces and starts rendering
01:13:09 them to the screen and all that heavy
01:13:11 lifting off communicating between the
01:13:14 native code and the native elements
01:13:16 which we create in our user interfaces
01:13:18 and our angular application logic that
01:13:21 heavy lifting is handled by native
01:13:23 script and therefore native script needs
01:13:25 to do that set up and that mounting
01:13:27 because it needs to establish all these
01:13:29 connections and so on behind the scenes
01:13:31 in a nutshell what we do though is we do
01:13:34 load our app module to start our app
01:13:38 just as we do it in a web app so let's
01:13:40 have a look at this app module then
01:13:42 which we find in this app dot module TS
01:13:44 file in the source app folder now in
01:13:48 there again we see a lot of code that
01:13:50 looks familiar to us most importantly we
01:13:52 got this exported app module with the at
01:13:55 ng module decorator and I do expect that
01:13:58 you have the basic angular knowledge to
01:14:00 understand what this exactly is and how
01:14:03 that works definitely dive in the
01:14:05 refresher module in this course if your
01:14:08 last time you worked with angular was a
01:14:11 couple of months ago so in the end this
01:14:13 is how we would create our app module in
01:14:16 angular and angular for web I should say
01:14:18 too we then do you have this bootstrap
01:14:22 array here where we define the root
01:14:24 component of our application just as we
01:14:27 do it in angular for web and this is a
01:14:29 normal angular component basically as I
01:14:32 will show you in a second in imports we
01:14:35 didn't see the first important
01:14:37 difference though we're not importing
01:14:39 the browser module here as we would do
01:14:42 in an angular for web project but
01:14:44 instead we import the native script
01:14:46 module and that is a module imported
01:14:49 from the native script angular package
01:14:51 so essentially again this is a package
01:14:54 at dependency imported from a package
01:14:57 distributed by the native script team
01:14:59 this again does setup a lot of crucial
01:15:02 stuff behind the scenes that allows our

01:15:05 application to run and allows our
01:15:07 angular code to function in the context
01:15:10 of this native app which has this
01:15:12 communicate
01:15:13 going on between native views real
01:15:16 native UI elements as you will learn
01:15:18 throughout this module and our
01:15:20 JavaScript angler logic now the app
01:15:23 routing module sets up the routing for
01:15:26 this application here and there again if
01:15:29 we dive into this we see that we use the
01:15:32 angular routing logic we register routes
01:15:34 just as we would do it in an angular 4
01:15:37 web project again with the exception
01:15:39 that we use specific modules the native
01:15:43 script or router module instead of the
01:15:45 default angular router module which we
01:15:48 would use in a web project and that is
01:15:51 related to how navigation works in a
01:15:53 native app it works differently than in
01:15:55 a web app and we'll dive deeply into
01:15:57 navigation and our different options in
01:15:59 a separate module in this course but
01:16:02 back to the app module for now we then
01:16:04 declare a bunch of components nothing
01:16:06 special here we got no providers and
01:16:08 then we get this interesting schema
01:16:10 thing here and this interesting schema
01:16:13 thing here is related to how we actually
01:16:15 create our templates our views of our
01:16:18 components and that is what I'll dive
01:16:20 into in the next lecture for this
01:16:23 lecture I want you to take away that the
01:16:25 general flow of starting your app is
01:16:27 similar to an angular for web app we got
01:16:30 the main TS file where we bootstrap the
01:16:32 app module where we have a regular
01:16:34 angular module but that the important
01:16:37 difference is to an angular for web app
01:16:39 are basically how you load the things
01:16:44 that you use certain packages provided
01:16:46 by native script like this one here or
01:16:48 the native script module to wire up your
01:16:51 angular logic and your angular app to
01:16:54 the native app which gets handled and
01:16:56 created by a native script behind the
01:16:58 scenes with dead let's explore how we
01:17:00 build our views and why this schema here
01:17:02 is important
01:17:07 we learned that our angular app
01:17:10 basically gets loaded and mounted by
01:17:12 native script with some specific code
01:17:15 that is provided by native script and
01:17:16 that therefore we have no index.html
01:17:19 file because the loading is done well by
01:17:21 native script behind the scenes and the
01:17:23 mounting into our views into what we see
01:17:25 on the screen is also handled by native
01:17:28 script and it does connect our angular
01:17:30 logic to our reduce speaking of these
01:17:33 views let's have a look at our app
01:17:35 component here this is a regular angular
01:17:38 component with the component decorator a
01:17:41 selector template URL and the only
01:17:43 special thing is this module ID here
01:17:45 well that is required by native script
01:17:48 and the native script build process you
01:17:50 could say to essentially connect your
01:17:53 templates and your angular logic
01:17:55 correctly and bundle everything
01:17:56 correctly so every component needs to
01:17:59 have this module ID and it always is
01:18:01 module ID which has a value of modulite
01:18:05 e and that essentially is a globally
01:18:07 available object injected by the native
01:18:10 script build process you could say
01:18:11 besides that it's a regular angular
01:18:13 component but it is interesting to look
01:18:17 at the component HTML file please note
01:18:20 that it is a file ending with dot HTML
01:18:23 but actually if we look into this file
01:18:25 we find no HTML in there well here we
01:18:29 got the page router outlet and please
01:18:32 note that this is not the normal router
01:18:34 outlet but again a specific directive
01:18:36 provided by a native script because
01:18:38 regarding routing we always use the
01:18:40 native script router module to cope for
01:18:43 how routing works and how navigation
01:18:45 works in native apps it's different it's
01:18:48 a stack based navigation different to
01:18:50 the web but more on that later but if we
01:18:52 have a look at another component like
01:18:54 here our item component this item detail
01:18:57 component to be precise if we have a
01:18:59 look at this HTML code then we see that
01:19:02 there is no HTML in there even though
01:19:04 the file ends with dot HTML well it ends
01:19:08 with dot HTML to basically be close to
01:19:11 how we would build an angular for web

01:19:13 project but this is not HTML this is
01:19:16 just XML and what we were using here are
01:19:18 a certain native script elements
01:19:21 which well native script provides to us
01:19:23 and which will be translated to their
01:19:26 native equivalents so the equivalents we
01:19:29 would use if we would create our app
01:19:31 with just Android and Java or just
01:19:34 Objective C and Swift
01:19:36 now what exactly do I mean with it and
01:19:39 what is generally up with this view here
01:19:42 how does a view in native could work in
01:19:45 native script we create our user
01:19:47 interfaces with components and so-called
01:19:49 layouts and components does not really
01:19:52 just mean angular components it also
01:19:55 includes these built-in elements you saw
01:19:58 a second ago so imagine this is what we
01:20:01 see in on the screen of our native
01:20:03 device now we could build this in the
01:20:06 web cube in native script as I mentioned
01:20:10 we have two important portions we have
01:20:11 to layout in part where we use built-in
01:20:15 layouts to control how the elements on
01:20:18 this screen are positioned and
01:20:20 distributed this would be an example for
01:20:24 a layout we have a row here where we
01:20:26 essentially controlled that bananas this
01:20:28 text here is on the far left and this
01:20:31 badge with the value of one is on the
01:20:34 far right the whole page content here is
01:20:38 all the wrapped in a layout you could
01:20:40 say and here we basically control that
01:20:42 this input field with the button next to
01:20:44 it is on the top of the page then we
01:20:47 have our rows of items and so on now
01:20:50 that positioning related part is
01:20:54 controlled with layout elements provided
01:20:57 by native script the input and output of
01:21:00 data is controlled with components you
01:21:02 could say so things like this button
01:21:04 here but also this badge so basically
01:21:07 the parts of the UI with which the user
01:21:10 interacts or which outputs information
01:21:13 to the user these parts are the
01:21:16 components or also the UI widgets or
01:21:19 elements provided by a native script and
01:21:22 you can also build your own angular
01:21:24 components on these layouts and built-in
01:21:27 components and if we go back to our HTML
01:21:32 code here we got a couple of layout
01:21:34 elements in there
01:21:35 indeed the flexbox layout here and then
01:21:38 this label here would be an example for
01:21:40 a UI widget provided by native script
01:21:43 and a label basically is your way or
01:21:47 your possibility for outputting text in
01:21:50 a native script application and in the
01:21:53 official native script Doc's if you go
01:21:55 to native script angular and click on UI
01:21:57 widgets you can actually find a list of
01:22:00 the UI widgets or elements or components
01:22:03 whatever you want to call them that are
01:22:04 built into native script and there you
01:22:07 see we got a bunch of them but it's not
01:22:09 that many as you maybe would have
01:22:10 expected but it turns out that with this
01:22:13 set of UI widgets we can basically build
01:22:16 any UI we want and as we do it here for
01:22:19 example in this starting setup you can
01:22:21 build your own angular components by
01:22:24 mixing and matching these built-in
01:22:26 widgets so here we get a component that
01:22:28 is one element of a list essentially
01:22:32 which in turn uses layouts and labels to
01:22:35 output text and position these different
01:22:37 text snippets correctly and speaking of
01:22:40 layouts you might have already seen this
01:22:42 layouts part here well there you see the
01:22:44 available layout elements here called
01:22:47 layout containers but I'll dive deeply
01:22:49 into them throughout this module so no
01:22:51 need to do this right now now what's the
01:22:53 idea behind these core widgets elements
01:22:58 or components as we might call them in
01:23:00 native script well let's have a look at
01:23:03 how we build user interfaces on the web
01:23:05 with HTML and then it really becomes
01:23:08 clear that there we use one element a
01:23:11 button for example and this HTML tag
01:23:14 which we use is the same no matter if
01:23:16 the web page gets loaded on Firefox or
01:23:18 Chrome or if it gets loaded on a Mac or
01:23:21 a Windows machine and the reason for
01:23:22 data is that hTML is standardized and
01:23:25 all browser's adhere to that now it's
01:23:28 different for native apps when we build
01:23:30 an app with native script then we have
01:23:33 to target Android and iOS and these are
01:23:35 independent platforms which have no user

01:23:38 interface standard they have their own
01:23:40 programming languages and they have
01:23:42 their own available user interface
01:23:44 elements therefore so where we use a
01:23:46 button on the web and it works every
01:23:48 on native script we kind of want to use
01:23:51 a globally available button and this is
01:23:53 how a button element would look like in
01:23:55 a script please notice the capital B all
01:23:57 the built-in widgets start with capital
01:23:59 characters and this gets translated to
01:24:03 the native equivalents so – for example
01:24:05 a widget dot view dot button that is the
01:24:07 element or the namespace of the element
01:24:11 in Android and a UI button on iOS and
01:24:14 the important part to keep in mind here
01:24:16 is that your user interfaces your
01:24:19 component templates really are compiled
01:24:22 qts native elements by native script you
01:24:26 don't have HTML wrapped in a native app
01:24:28 or anything like that you get compiled
01:24:31 user interfaces and therefore you need
01:24:33 one element with which you can work in
01:24:35 your native script code because you
01:24:37 don't want to write different interfaces
01:24:39 for the different platforms
01:24:40 that would defeat the purpose of using a
01:24:43 cross-platform solution like native
01:24:45 script but you want to get that native
01:24:47 output and therefore a native script
01:24:48 dusty compilation and therefore native
01:24:51 script needs to give you a list of
01:24:52 elements it knows to compile it knows
01:24:55 how to compile them and you can check
01:24:57 the official Doc's which I just showed
01:24:59 you to find a list of the available
01:25:01 elements regarding the web I'll dive
01:25:04 into this a little bit later on how we
01:25:06 can alter build a web page with our
01:25:09 native script project so here are the
01:25:11 official Doc's if you for example I have
01:25:13 a look at this button widget you not
01:25:15 only find instructions on how to use it
01:25:17 if you scroll down you also find to
01:25:20 which native components this gets
01:25:23 compiled and that is what I just showed
01:25:25 you on the slide so that is why we use
01:25:27 HTML because we use the native script
01:25:29 elements so that native script knows how
01:25:32 to compile them to the native
01:25:34 equivalents when it builds the apps for
01:25:37 Android and iOS and there was a lot of
01:25:40 talking about this but it is the
01:25:42 foundation of your native script app and
01:25:44 it is so important to understand this to
01:25:47 build user interfaces and to understand
01:25:49 what's going on behind the scenes here
01:25:56 now with that out of the way let's
01:25:59 finally write some code and for that
01:26:01 I'll delete that item folder I'll also
01:26:04 delete the app routing file because will
01:26:06 not use routing for now and in the app
01:26:08 module we therefore can delete the
01:26:12 declarations of items component and item
01:26:14 detail component the import of app
01:26:16 routing module here because I deleted
01:26:18 that and also the typescript import
01:26:21 statements here at the top let's get rid
01:26:24 of them since I deleted all these files
01:26:27 now we can get started and now to come
01:26:32 back to that no error schema by the way
01:26:34 we need this to be able to use all these
01:26:37 native script elements in our HTML files
01:26:40 otherwise angular would basically throw
01:26:42 an error because we're not using angular
01:26:46 components or normal HTML elements and
01:26:49 this basically disables angular's
01:26:52 template checks now with that let's
01:26:55 build our own component and also use
01:26:59 some native script elements now in this
01:27:02 course we want to build an app where we
01:27:04 can manage our personal monthly
01:27:07 challenge like take a walk every day and
01:27:10 to get started with that I will create a
01:27:13 new folder here to build my first own
01:27:15 component and I'll name this challenges
01:27:18 and in there I'll build a new subfolder
01:27:23 current challenge and why these two
01:27:25 folders because later we'll add more and
01:27:27 more components and I want to keep them
01:27:29 organized so in there I'll add my
01:27:31 current challenge dot component dot TS
01:27:35 file and my current challenge dot
01:27:39 component dot HTML file these two pieces
01:27:42 which should make up my component for
01:27:45 now and also a current challenge dot
01:27:48 component dot CSS file so that we can
01:27:51 add styling now let's start in the types
01:27:54 could file in the current challenge
01:27:55 component typescript file there we

01:27:57 create a component by exporting a class
01:28:00 which we named current challenge
01:28:02 component just as we would do it in an
01:28:04 angular for a web app and just in a
01:28:06 normal angular app and I don't really
01:28:09 like
01:28:09 differentiation because we have a normal
01:28:11 angular app here after all we can add at
01:28:15 component decorator or we have to add it
01:28:17 actually to tell angular how to well
01:28:20 what to do with this class and how to
01:28:22 build that component how to connect
01:28:24 template and logic a native script will
01:28:28 help us with that since the template
01:28:30 gets compiled to a native template so we
01:28:32 should add a selector here so that we
01:28:34 can embed this as an element and your
01:28:37 selector doesn't start with a capital
01:28:38 character like two built-in elements
01:28:40 instead you would name this how you do
01:28:43 indeed name it for any angular app you
01:28:45 can add your own prefix could be an S
01:28:47 could be app I'll go with NS and then
01:28:50 your component name so here NS current
01:28:53 challenge makes a lot of sense I think
01:28:55 next I want to let angular know where my
01:28:58 template lives so I will add the
01:29:00 template URL property here and point at
01:29:03 my current – challenge dot component or
01:29:07 HTML file and for the Styles I'll add
01:29:10 style URLs and here this takes an array
01:29:13 where I also point at current challenge
01:29:16 component dot CSS here
01:29:19 now there's one extra thing which I
01:29:21 mentioned in the last lecture every
01:29:23 angular component needs to have that
01:29:26 module ID property which has a value of
01:29:29 module ID that is required for native
01:29:32 script to be able to build your app
01:29:34 correctly now to be able to use this
01:29:37 component we need to declare it in an
01:29:39 angular module and I'll do it here in
01:29:42 the app module I will declare my current
01:29:44 challenge component here and I use the
01:29:47 auto import functionality of my IDE you
01:29:49 need to make sure that this import is
01:29:51 added where we import current challenge
01:29:53 component from and then the path to the
01:29:55 file slash dot slash challenges slash
01:29:58 current challenge slash current
01:30:00 challenge dot component without dot TS
01:30:03 at the end that has to be omitted it is
01:30:05 added automatically by the build process
01:30:08 so with that we declared it we can now
01:30:12 use it and let's now use it by using
01:30:15 such a layout and I'll dive into all the
01:30:18 weight of layouts in a second and let's
01:30:20 of course also make sure that
01:30:22 you have some other output or input
01:30:25 elements in there so I will add a stack
01:30:28 layout here which is amongst the simple
01:30:30 slay outs you can use and by default the
01:30:32 stack layout simply organizes the
01:30:34 elements you put inside of it from top
01:30:36 to bottom now let's say we want to be
01:30:40 able to set a current challenge and then
01:30:43 simply output our challenge name now
01:30:46 let's start by outputting the name with
01:30:48 a label and that is important you can't
01:30:50 type challenge name like take a walk
01:30:54 every day like this because there is no
01:30:57 implicit text element in native script
01:31:00 so just outputting text without adding
01:31:03 it to an element doesn't work instead if
01:31:05 you want output text you will use a
01:31:07 label and that label then has a text
01:31:10 property so text doesn't go between the
01:31:12 opening and closing tag here but into
01:31:14 that text property where you can now
01:31:16 have take a walk every day now if we
01:31:21 want to see that in action let's
01:31:23 actually just go to the app component
01:31:25 and replace page router outlet with our
01:31:28 own NS current challenge here and we
01:31:31 include our own components just as we
01:31:33 include them in a web app for it is to
01:31:36 work we also have to wrap it here into a
01:31:39 layout like a stack layout because you
01:31:41 always have to have such a layout as
01:31:43 your root component and now after saving
01:31:46 this the application should rebuild
01:31:48 thanks to these processes TNS run
01:31:51 Android and TNS run iOS still running
01:31:53 and it will now reload the app on our
01:31:58 emulators as soon as it's done building
01:32:00 and it should output our new user
01:32:04 interface and here it is take a walk
01:32:06 everyday on both emulators a little bit
01:32:09 hard to see on Android because of the
01:32:10 default style Android applies pretty

01:32:12 easy to see here on iOS I guess so this
01:32:15 is how we can build our own angular
01:32:16 components nothing too fancy about this
01:32:18 and more importantly this is how we use
01:32:21 these built-in UI widgets and layouts
01:32:23 now I mentioned that I want to be able
01:32:25 to set my own text here basically so
01:32:29 let's work on that in the next lecture
01:32:36 now that we saw that we can build normal
01:32:38 angular components and that we work with
01:32:41 these built-in widgets let's use
01:32:42 Morissette widgets
01:32:43 I want to be able to set that text on my
01:32:45 own and for this we can add a text field
01:32:48 widget here and this will allow us to
01:32:50 input something and in case you're
01:32:51 wondering how I know this don't forget
01:32:53 that there is this documentation and
01:32:55 there you can simply click through them
01:32:57 and see what they do it's not that many
01:32:59 and you will see there's a text field
01:33:01 widget so the text field which it allows
01:33:06 us to enter something if I save this and
01:33:08 let it rebuild we can see this real
01:33:11 quick
01:33:12 here it is really is to see on Android
01:33:15 because it's underlined by default it's
01:33:17 not on iOS it is there you can type here
01:33:20 but it's not so easy to see I will dive
01:33:22 into styling later this is how we can
01:33:26 enter text but of course we're also
01:33:28 interested in while getting access to
01:33:30 that text and you get access to this
01:33:33 text we can actually use a technique we
01:33:36 also use an angular for web we can use
01:33:38 two-way binding so we can use ng model
01:33:41 here with this syntax and again that is
01:33:45 something you should know from normal
01:33:47 angular and we can bind this to a
01:33:50 property of our component class here
01:33:52 like challenge description by default
01:33:58 let's say that's an empty string and now
01:34:00 we can bind this here in our template by
01:34:02 simply pointing at challenge description
01:34:05 here just like that now on these
01:34:09 elements we can also set some attributes
01:34:11 like we set the text attributes here for
01:34:13 example a text field supports a hint
01:34:16 attribute and again if you want to know
01:34:18 which attributes are supported for one
01:34:20 year fishel docks here might be helpful
01:34:22 here you see some examples but if you
01:34:24 want to see everything you can always
01:34:26 scroll down to that class definition
01:34:28 here and have a look at that now that's
01:34:31 more technical to read but here if you
01:34:33 click on the text view for example you
01:34:36 see a list of all the properties this
01:34:38 has and you can essentially set all
01:34:40 these properties as attributes on your
01:34:43 XML element and for example here you
01:34:46 also see two hint and you can click on
01:34:48 that and get a short
01:34:50 description on what you can do with that
01:34:52 so dad is the deep dive the docks here a
01:34:55 great first place at this course of
01:34:57 course tries to teach you as much about
01:34:59 this as possible so here we could enter
01:35:01 challenge title to give a hint about
01:35:04 what this text field wants as an input
01:35:07 and with dad if we let this update again
01:35:12 we see challenge Tyler here on both okay
01:35:16 so we get this and we're binding to the
01:35:17 challenge description property now of
01:35:20 course we now when I use that property
01:35:22 value to which we're binding here and to
01:35:25 use it let's add a button here and on
01:35:29 that button let's say set challenge
01:35:33 because we now want to set our challenge
01:35:35 to whatever we entered here and
01:35:36 obviously we'll get more sophisticated
01:35:37 than that throughout the course now
01:35:40 let's try a first way of setting this by
01:35:42 binding the text here with property
01:35:44 bindings indicated by the square
01:35:45 brackets which is how you can set a
01:35:47 dynamic value to this attribute and you
01:35:49 can do this with any attribute you could
01:35:51 also bind D hint here dynamically and
01:35:54 there I want to set this to that
01:35:56 challenge description property which I'm
01:35:58 binding to you with ng mall here well if
01:36:01 I now save this we wouldn't even need
01:36:03 the button for this by the way if I now
01:36:04 save this you will see that as this
01:36:07 reloads if I type here we see the button
01:36:11 without a text because I have that it
01:36:12 any but we also see there's no output
01:36:15 below that and the reason for that is
01:36:17 that for ng model to work we actually

01:36:20 just as an angular for web need to
01:36:22 import an extra module here in our app
01:36:26 module and that would be the native
01:36:28 script forums module now we need to
01:36:32 import that and we do import that we do
01:36:36 import the native script forms module
01:36:37 from and actually it's already hinted
01:36:40 here from native script angular slash
01:36:45 forms so this now imports native could
01:36:49 forms module and this unlocks the usage
01:36:52 of ng module in our component here
01:36:55 so with that import added in the app
01:36:58 module we can wait for this to reload
01:37:01 and you will now actually see that as I
01:37:05 type here output gets added at the
01:37:08 bottom this works so now we got this
01:37:11 output working but we added this button
01:37:14 I want to use that button to output my
01:37:16 content and for this we can use
01:37:20 something which we also know from
01:37:21 angular for web we can use event binding
01:37:23 with normal parentheses
01:37:26 now on the web you would listen to click
01:37:27 this does not exist on a native script
01:37:30 element there you have tap instead and
01:37:32 just as before the official Doc's are of
01:37:35 help if you want to find all available
01:37:38 events you can click on gestures here
01:37:40 and that gives you an overview over the
01:37:43 gestures the user input events basically
01:37:46 which native script supports here they
01:37:49 are and here you find examples on how to
01:37:51 listen to them for example a double tap
01:37:53 here or also a long press well we are
01:37:57 using a normal tap here and we can now
01:38:00 bind us to a method which should get
01:38:02 executed or have some inline code here
01:38:05 that should be executed so here we could
01:38:08 execute on set challenged name is up to
01:38:11 you copy that and add a method off that
01:38:16 name here
01:38:17 and now in that method we can define
01:38:18 which logic we want to have in here to
01:38:21 set our challenge and here I'll simply
01:38:25 add a current challenge property which
01:38:26 is empty by default and I will then set
01:38:29 this current challenge equal to
01:38:32 challenge description so to what the
01:38:33 user entered here in onset challenge and
01:38:37 now the last thing we need to do is we
01:38:40 need to use current challenge and bind
01:38:42 this to our text here because now with
01:38:45 two properties which are set upon a tap
01:38:47 here we make sure that we have no life
01:38:49 output here in the label but only after
01:38:51 we confirmed on the button now on the
01:38:54 button it also doesn't hurt to set a
01:38:56 text attribute which it supports to have
01:38:58 some text on the button which should be
01:39:01 set challenge because a little mistake
01:39:04 here on my side of course set challenge
01:39:06 like this doesn't work I did mention
01:39:08 that there is no implicit text widget
01:39:10 it's easy to forget this if you work on
01:39:13 the web for a lot but on native script
01:39:16 you add all output text always on
01:39:19 properties of your widgets so that's
01:39:22 also why I left this error in there it
01:39:23 is a common error you need to set the
01:39:26 text attribute here so with that if it
01:39:29 now reloads now we see the button here
01:39:32 and now if I add take a walk every day
01:39:35 here only when I click this button it
01:39:39 occurs down
01:39:39 there take a walk every day on iOS it
01:39:45 works the same on iOS of course so what
01:39:48 you can clearly see here is that you
01:39:51 still use these general angular features
01:39:53 like property binding or event binding
01:39:56 or two-way binding just not string
01:39:59 interpolation because you have no
01:40:01 implicit text you could output here
01:40:02 right that's not supported but you use
01:40:04 these other elements just as you use
01:40:06 them in angular you have the general
01:40:08 flow of data as you can set it up at an
01:40:11 angular web app but we are using this
01:40:13 special widgets and by the way this
01:40:15 should be a button with a capital P it
01:40:17 worked with a lowercase B too but best
01:40:20 practice is to use capital characters to
01:40:22 make it really clear that this is not
01:40:24 HTML and with that we get our first very
01:40:28 basic user interface built of course not
01:40:31 that beautiful though so let's dive into
01:40:33 styling next before we thereafter have a
01:40:36 deeper look and all the built-in layouts
01:40:38 that are supported
01:40:43 so we can set our current challenge here
01:40:48 this is the challenge but beautiful is

01:40:52 different I'd say so let's learn how we
01:40:55 can actually style in native script and
01:40:58 as always and I'm just mentioning this
01:41:01 to make you sure that you can do as much
01:41:02 as possible on your own in your own
01:41:04 projects too as always the official
01:41:07 Doc's are of help here you can check
01:41:10 this styling part here to learn more
01:41:13 about how styling works in native script
01:41:15 and which possibilities you have there
01:41:18 because the good thing is you can use
01:41:20 CSS with the same rules you use on the
01:41:24 web but actually not all properties are
01:41:27 supported but only this list of
01:41:29 supported properties which you find here
01:41:31 and you should check this regularly if
01:41:33 you're working on native script because
01:41:35 this list is always up to date and new
01:41:37 properties are getting added all the
01:41:39 time and you have a supported list of
01:41:41 selectors you can use so you can use
01:41:44 things like the type selector a class
01:41:46 selector and so on but for example
01:41:48 regarding pseudo selectors only a bunch
01:41:50 of pseudo selectors are supported it's
01:41:52 actually not just highlighted as it says
01:41:54 here they're also is disabled but you
01:41:56 don't have hover for example because you
01:41:59 can't really hover on native apps so
01:42:02 this is how styling works we use a sub
01:42:06 selection of CSS you could say and we
01:42:10 can use our CSS files for the components
01:42:15 just as we do it on an angular app you
01:42:17 can also set inline styles though so for
01:42:20 example on my label here I could set a
01:42:23 font size important you have attributes
01:42:26 which are in camel case lower case
01:42:29 starting character every character of a
01:42:31 word inside the word then starts with a
01:42:34 capital character you could set this to
01:42:37 let's say 20 all's important here for
01:42:39 units you don't have pixels or Ram you
01:42:44 have just a number and these will
01:42:45 automatically be device-independent
01:42:47 pixels so adjust it to the resolution of
01:42:50 the device the only alternative are
01:42:52 percentages but here I want to use an
01:42:54 absolute size and we can set in line
01:42:58 like this and asked us for loads if I
01:43:03 add my challenge here you see it's a bit
01:43:06 bigger than before because the default
01:43:08 size was not 20
01:43:10 you can also set inline styles with the
01:43:13 style tag here just as you would do it
01:43:16 on the web
01:43:17 now with the CSS property font size
01:43:19 which is supported if you check your
01:43:21 little Doc's which you again set not two
01:43:23 pixels but also to a unit-less
01:43:26 value here and this will have the same
01:43:29 effect as before let's now try it on iOS
01:43:34 this works here it is bigger than before
01:43:38 and in a lot of occasions setting inline
01:43:42 styles is okay or might be easier to
01:43:44 understand for other developers working
01:43:47 on your code but for more complex
01:43:48 stylings or reusable stylings you want
01:43:51 to use these CSS files now important the
01:43:54 CSS file of a component sets up stalls
01:43:57 which are then scoped to that component
01:43:59 so whichever CSS rules you adhere only
01:44:03 apply to elements in this component so
01:44:05 if I for example style my stack layout
01:44:09 here to have a border color of red and a
01:44:16 border width of 5 if I do that here in
01:44:19 my current challenge component you will
01:44:22 see that ass's updates I do have my red
01:44:27 border and you don't need to set the
01:44:30 type of order to solve it I do have my
01:44:33 red border around this stack layout but
01:44:36 remember that an app component we also
01:44:39 had a stack layout around the overall
01:44:41 page you could say and there is no red
01:44:43 border around Det
01:44:45 because your styles are scoped to your
01:44:47 component Everett than the component CSS
01:44:50 files on the other hand you can set up
01:44:53 global styles in the app CSS file if you
01:44:55 want to do that here by the way we are
01:44:57 importing a default theme more about
01:44:59 theming in a separate module but here I
01:45:02 could Staal my stack layout to have a
01:45:05 border color of green and a border width
01:45:09 of
01:45:11 eight for example now if I do that here
01:45:14 in app CSS you will see that Aster's
01:45:17 reloads we do at that green border here
01:45:21 around the overall page which is T is
01:45:23 stack layout we have here an app
01:45:25 component but please note we're not

01:45:27 adding this in the app component CSS
01:45:29 file so this is not scope to app
01:45:31 component
01:45:32 it's just overwritten for the current
01:45:34 challenge stack layout because we have
01:45:38 separate a separate rule here if I would
01:45:42 actually comment out this rule here in
01:45:44 the current challenge component CSS file
01:45:46 you will see that both stack layouts
01:45:49 will have the green border because that
01:45:51 green border rule is set up in the app
01:45:54 CSS file which is our global CSS file
01:45:58 here you can see it so any CSS code set
01:46:02 up an app CSS it's applied application
01:46:05 wide which can be very useful for
01:46:07 setting up some general styling whereas
01:46:09 here you can style what only should
01:46:11 apply in a given component now with
01:46:14 these basics out of the way let's dive
01:46:16 into styling and let's make our simple
01:46:18 user interface here a little bit more
01:46:21 pretty in the next lecture
01:46:27 so now that we understood how styling
01:46:29 generally works and that it's awesome
01:46:32 let's actually prove the styling here
01:46:34 and I want to have a mix of app wide
01:46:37 styles for example for the button in the
01:46:39 text field where I want to have a
01:46:41 general yeah you could call it theme in
01:46:43 my app and component specific styles for
01:46:47 the text here for example for my current
01:46:49 challenge so let's start with that
01:46:52 current challenge text here I got this
01:46:55 label and I could select it with the
01:46:58 label type so it could simply style
01:47:00 label here or just as in web sees as we
01:47:04 can add an ID and select by that with
01:47:07 the hashtag selector or add a class and
01:47:09 select by this so here I will give this
01:47:12 a class of title and in our CSS file I
01:47:15 can then add a title class selector here
01:47:19 and here I want to now set a font size
01:47:22 of let's say 26 and I want to align the
01:47:25 text in the center which I can do a text
01:47:27 align Center and again that is something
01:47:29 you know from the web both properties
01:47:31 are available in the web here the unit
01:47:33 is different because we have no UNIX
01:47:36 units like pixel here but just a number
01:47:39 but that is it now let's also add a root
01:47:42 color and for that I want to pick some
01:47:47 purplish color maybe maybe here in this
01:47:51 area yeah I like that tone and let's
01:47:54 give it a font weight of bold now with
01:47:59 these four properties added which are
01:48:02 all support that you can of course check
01:48:04 the official docs as does I have Roo
01:48:08 loads we can set our challenge here and
01:48:13 that looks a lot better than it did
01:48:16 before now let's also add some distance
01:48:19 between our text here and the button by
01:48:21 adding a margin and justice on the web
01:48:24 you can set a general margin with the
01:48:26 shorthand notation you know from the web
01:48:28 or you said something like margin top
01:48:31 and there we could set this to 10 for
01:48:35 example again device-independent pixels
01:48:37 if we save this now
01:48:40 we can take a walk here on iOS and we
01:48:43 see there is some distance between the
01:48:45 button and our text okay perfect so this
01:48:48 is the text is this good for now now let
01:48:51 me also set some global stalls and as I
01:48:55 mentioned there I wanna style the button
01:48:58 and I want a stalled text field so our
01:49:03 input element which we have here now
01:49:08 let's say we start with the button you
01:49:10 can absolutely have different styles for
01:49:12 iOS and Android and it will dive into
01:49:15 how you set up different stalls in that
01:49:18 styling and theming module a little bit
01:49:19 later where we dive deeper into
01:49:21 everything you can do with styling and
01:49:23 so on for now I will set one style for
01:49:25 both platforms
01:49:26 by going to the button and there I'll
01:49:28 set a background of this same purple I
01:49:33 used before here so let me copy that hex
01:49:36 code I'll set a border width and you
01:49:44 need to set that to make sure that you
01:49:46 really get a nice-looking button in the
01:49:49 end otherwise you might end up with a
01:49:50 button where the background is not
01:49:52 applied because it doesn't have a border
01:49:53 that is because of how the compilation
01:49:57 to native widgets works so I'll set up
01:49:59 border width of 1 and a border color of
01:50:02 that well same color and a text color of
01:50:06 white let's say now let me save that and
01:50:10 let's see if that looks something like I

01:50:14 want it to look yeah doesn't look too
01:50:17 shabby certainly or Android a little bit
01:50:20 of improvement is needed here on iOS but
01:50:23 I like the direction to which we're
01:50:24 heading now I don't want to have a
01:50:26 button which spans to full width off the
01:50:28 page and in general we can control this
01:50:31 with the layout that surrounds it but we
01:50:33 can also set a width property and for
01:50:36 example we could say that the button
01:50:38 should have with off let's say 100 now
01:50:41 this is not really what you want to have
01:50:43 as a global setting because that means
01:50:45 today if you have longer texts in your
01:50:47 buttons then they will get cut off so in
01:50:50 reality you would want to have our
01:50:52 percentage of let's say
01:50:53 100% and then control the width of the
01:50:56 button with the surrounding layout yeah
01:50:59 here we can actually see what I meant
01:51:00 it's getting cut off doesn't really look
01:51:02 pretty so what I will do here for now is
01:51:05 all increase this to 400 which should be
01:51:08 enough space and I'll add some padding
01:51:10 here and I want to have padding top and
01:51:12 bottom off let's say five and left and
01:51:15 right 10 and if we now save this we
01:51:18 should have a prettier button in the
01:51:20 application yeah this looks better a
01:51:23 little bit too wide now so maybe 250 and
01:51:26 I also want to have rounded corners
01:51:28 which we can set with border radius
01:51:31 which is also supported by native script
01:51:32 so you see it supports a lot of core CSS
01:51:35 properties and I'll set this to 30% here
01:51:38 so you could also set an absolute value
01:51:41 but I want to use a percentage value and
01:51:43 now we should get a nice button with
01:51:46 rounded corners
01:51:49 yeah I like that style now last change
01:51:52 is that I want to add a margin top and
01:51:55 bottom off let's say 5 and 0 left and
01:51:58 right by default and I'll change the
01:52:01 selector from button which should start
01:52:03 with the capital B by the way was just
01:52:05 Auto formatted by my IDE you can used
01:52:08 with a lowercase B 2 as you saw but I
01:52:11 will change this to a class selector for
01:52:13 dot button so that I can actually
01:52:15 control which buttons should get this
01:52:17 default style and which buttons not
01:52:18 because maybe I don't want to have this
01:52:20 default cell for every single button
01:52:22 element on the page so here we'll add
01:52:24 this class BTN which I just set up
01:52:26 globally so that this button will get
01:52:29 this style which is a setup here in app
01:52:31 CSS and with that that looks quite
01:52:34 decent
01:52:40 now the button is set up I now want you
01:52:43 to practice styling a little bit by also
01:52:46 styling that text field now doesn't look
01:52:49 too bad like this but we can certainly
01:52:51 improve it a little bit now simply play
01:52:54 around and dive into the official docks
01:52:56 and see which rules are available there
01:52:58 these up or dead CSS properties here and
01:53:01 feel free to style the way you want I
01:53:04 will style it in a way where I will set
01:53:07 this border at the bottom on both
01:53:09 platforms so I will add it as a rule and
01:53:12 I will color it in the same way I
01:53:13 colored this buttons are using that same
01:53:15 purplish color that is something I will
01:53:18 set and I will probably add some spacing
01:53:21 on the top and bottom of it but feel
01:53:23 free to use different styles this is
01:53:25 what I will use in a solution and
01:53:27 definitely compare your approach to my
01:53:29 solution video to see how I solve this
01:53:32 especially in case you get stuck or
01:53:34 you're not sure how you can target the
01:53:36 text field or how you do apply these
01:53:38 properties though it really just works
01:53:40 as we did it here so good luck with that
01:53:47 were you successful I will now work on
01:53:50 that text field and just as before I
01:53:53 will actually set this up with a class
01:53:55 which I then can add to any text field
01:53:57 which should get these styles and I will
01:54:00 have a class off form control here but
01:54:03 you can use any night class and you want
01:54:05 you could name this input whatever you
01:54:07 want now there I want to have a border
01:54:11 bottom color as I mentioned of this
01:54:14 purplish style here and a border bottom
01:54:18 width of two maybe so that we can
01:54:20 clearly see this border now I also want
01:54:24 to add a margin top and bottom off let's
01:54:27 say five and zero left and right and

01:54:32 didn't mention this in the tasks but I
01:54:36 also decided to set a font size here and
01:54:39 I'll set a font size of 20 of course
01:54:43 this is optional if you didn't do this
01:54:44 no problem at all I didn't mention it
01:54:46 now let's have a look at how this looks
01:54:49 like and for this we of course need to
01:54:51 add this class to this text field here
01:54:53 so there let's add class attribute and
01:54:56 set this to form control which is the
01:54:58 class name I chose and after saving this
01:55:02 it should automatically recompile and
01:55:04 restart the application so that we see
01:55:07 this style in action here it is now it
01:55:10 still takes the full width just as the
01:55:13 button this is actually default for all
01:55:15 these UI widgets they take to full width
01:55:17 and you will soon learn how to control
01:55:19 this with layouts for now let's accept
01:55:22 it as it is but this does look quite
01:55:24 nice now I want to have some padding
01:55:28 which I do have by default on Android
01:55:30 but not on iOS so let me actually go
01:55:33 back to app CSS and let's add a padding
01:55:36 here and the padding could be maybe
01:55:39 eight pixels top and bottom and four
01:55:42 pixels left and right we'll have to play
01:55:44 around with that a little bit to see how
01:55:47 that works yeah that looks quite good so
01:55:50 now we have the same style on both
01:55:52 platforms here and that already is it
01:55:55 this looks nice as it is and that
01:55:58 concludes our first exploration of the
01:56:01 Eiling world native script offers to us
01:56:04 now it's time to dive into the layouts
01:56:06 so that we got more control and more
01:56:09 power over how we can lay our elements
01:56:13 out on the screen and we can actually do
01:56:16 more than just top to bottom as we're
01:56:18 currently doing
01:56:22 enough styling for now let's dive into
01:56:25 layouts as mentioned before layouts is
01:56:28 really just a term for these core UI
01:56:31 elements native script offers you which
01:56:33 you wrap around your Averell ament's
01:56:35 like the stack layout we used which
01:56:37 control how the children inside the
01:56:40 layout are laid out on the page how they
01:56:43 are distributed how they are positioned
01:56:45 and there are four core layout elements
01:56:48 you need to know in native script
01:56:50 because you'll use these a lot and these
01:56:52 four typically cover everything you
01:56:55 would want to do there also are two
01:56:57 additional ones stock layout and rap
01:56:59 layout and I will not dive deeply into
01:57:01 them in this course because in my
01:57:02 experience you don't really use them
01:57:04 that often
01:57:05 of course you find explanations on all
01:57:07 of these in your facial docks now one
01:57:10 important note right away layouts can
01:57:13 also be nested into each other and that
01:57:15 is important because you could think
01:57:17 that a stack layout is there to hold
01:57:19 buttons and text fields and labels and
01:57:22 it is but a stack layout could also hold
01:57:25 an average stack layout and implicitly
01:57:27 we are already doing this in our demo
01:57:29 app here we built thus far because we
01:57:32 had a stack layout in the app component
01:57:34 HTML file and then also in our custom
01:57:37 angular component the current challenge
01:57:39 component which you as an app component
01:57:41 but before we dive too much into nesting
01:57:44 what do these four core layouts actually
01:57:47 do how do they differ a stacked layout
01:57:50 is pretty easy to grasp I guess it's
01:57:53 there to position items next to each
01:57:55 other or on top of each other vertically
01:57:57 or horizontally so you can achieve
01:57:59 layouts like this where elements are
01:58:01 sitting on top of each other or next to
01:58:03 each other and this little preview
01:58:05 picture here actually would be achieved
01:58:07 by already nesting stack layouts because
01:58:10 you would have an overall stack layout
01:58:12 which has a stack layout with the free
01:58:14 rows which has then to our stack layouts
01:58:17 with the free columns you could say
01:58:18 speaking of rows and columns if you want
01:58:21 to build such a gritty interface you
01:58:24 could also explore the grid layout which
01:58:26 allows you to position items in well a
01:58:28 grid of rows and columns with which you
01:58:31 can achieve very flexible layouts like
01:58:33 this one and I'll of course give you
01:58:35 example
01:58:36 and show you how to use these layouts in
01:58:38 detail over the next lectures now when

01:58:42 you don't need a full grid but you want
01:58:44 to position elements in one dimension so
01:58:47 in a row or in a column then you can
01:58:49 always use the flexbox layout which
01:58:51 follows these CSS flexbox specification
01:58:54 you might know from web development and
01:58:58 there you can do things like distribute
01:59:00 items in a row to have a lot of space
01:59:03 between them or have them sit very close
01:59:05 to each other things like that now
01:59:08 sometimes you don't want to position
01:59:10 items relative to each other or in a
01:59:13 grid but on like a coordinate system and
01:59:16 here the absolute layout can help you it
01:59:18 positions elements absolutely using
01:59:21 coordinates and with that you can have
01:59:23 overlapping elements and anything like
01:59:25 that so let's explore these layouts then
01:59:28 one by one over the next lectures
01:59:34 I want to start with the stack layout
01:59:36 which we already saw in action
01:59:38 now the stacked layout has two forums
01:59:42 you can set it up to have an orientation
01:59:44 of vertical which is to default actually
01:59:46 and therefore does need to be set
01:59:48 separately or orientation horizontal now
01:59:52 in the vertical orientation elements are
01:59:55 simply added top to bottom on top of
01:59:58 each other here and that is all to what
02:00:00 we used in our demo app where we had the
02:00:02 text input at the top then the button
02:00:05 then the label with horizontal you
02:00:08 guessed it items sit next to Java in a
02:00:11 row now you cannot just configure the
02:00:14 layout element you can also configure
02:00:17 the children in such a layout and that
02:00:20 is now not limited to stack layout for
02:00:22 this specific property here you can set
02:00:25 horizontal and vertical alignment to
02:00:27 control how child elements lay
02:00:30 themselves out or position themselves in
02:00:32 the layout container again horizontal
02:00:34 and vertical alignment can not just be
02:00:37 used in a stack layout but you often use
02:00:41 them there because other layouts like
02:00:42 flexbox layout for example have
02:00:44 different means of positioning children
02:00:46 but more on that when we reach that
02:00:48 layout so let's actually see it in
02:00:51 action then I guess we already do is see
02:00:54 it in action in our app of course but I
02:00:56 want to see it in more action and for
02:00:58 this I'll create a new component now
02:01:01 here we'll also explore something new we
02:01:03 can use the angular seal I to create a
02:01:06 component and for that you should just
02:01:08 make sure that you have the angular CLI
02:01:10 installed you can get it on seal i dot
02:01:13 angular dot IO by simply running this
02:01:16 command here npm install – g– angular
02:01:19 CLI you don't need the other ones just
02:01:20 this one and this will install the
02:01:23 angular c-like globally on your machine
02:01:24 and with that you can run commands with
02:01:27 the ng command and in the angular
02:01:30 project which this turns out to be at
02:01:32 least partly you can run ng generate
02:01:36 component or a shorter form ng g c to
02:01:41 create a new component automatically and
02:01:43 then you can just enter a name and here
02:01:47 all named as layouts or to be precise I
02:01:50 want to create a folder named layouts
02:01:52 and in there I want to have my stack
02:01:54 layout so by running ng GC layouts slash
02:01:58 stack a new stack component will be
02:02:01 created in a layouts folder now this
02:02:03 command takes a while in a native script
02:02:05 project so I will fast forward to this
02:02:07 being finished might be faster at the
02:02:10 point of time you're viewing this and
02:02:11 let's dive into this component once it's
02:02:13 done so it is done and in layouts I got
02:02:16 my stack layout here by the way will
02:02:19 later delete this folder it's here for
02:02:21 practicing and we get a component
02:02:23 created with that module IDE and
02:02:25 basically a very basic initialization
02:02:28 here now in that stack layout let's
02:02:30 practice it using it and let's add a
02:02:33 stack layout as we did before and in
02:02:36 there I want to have a label with the
02:02:39 text off just maybe item 1 any text you
02:02:42 want now one item alone is boring let's
02:02:45 add more items so I'll add two and three
02:02:48 here as well now to make sure we can see
02:02:51 them in a CSS file
02:02:53 I will style my label and keep in mind
02:02:55 that is scoped to this component so only
02:02:58 labels in this component will receive
02:02:59 that styling and I will add a background

02:03:02 color or could add background color but
02:03:05 also just background works of let's say
02:03:08 red and then a width of 50 and a height
02:03:10 of 50 so that we can see this now
02:03:14 actually may let's make it even easier
02:03:15 to see them by giving these labels IDs
02:03:18 by one and so on so that we can target
02:03:21 them separately and give them different
02:03:23 colors I guess I free so now back in the
02:03:27 CSS file with these IDs added I want to
02:03:29 have width and height be equal on all
02:03:32 labels but I will target hash tag I 1
02:03:35 for the element with ID 1 and give that
02:03:37 background one and then the other one
02:03:40 here I'd you will get a background of
02:03:42 let's say blue and I three will get a
02:03:45 background off anything you want I'll
02:03:48 take orange now with that set up let me
02:03:51 save that and let's go back into app
02:03:54 component HTML and I will comment out my
02:03:58 demo app and for now I will sum
02:04:01 we use the NS stack component now by
02:04:05 running the ng generate command this
02:04:07 received a selector by default and it
02:04:09 was also added to the app module to
02:04:12 declarations they're automatically here
02:04:14 it is the stack component so that is why
02:04:17 I can start using it immediately and if
02:04:20 I now save that keep in mind my TNS run
02:04:23 processes are still running this app
02:04:26 will reload and will not see the text
02:04:28 field anymore because I commented that
02:04:29 out but instead we see the stack layout
02:04:33 in action or well what's yo if important
02:04:37 as I mentioned we would have wrapped
02:04:39 this in a stack layout here because you
02:04:42 need to have a route layout around your
02:04:45 well topmost component which happens to
02:04:48 be this one here so let's try this again
02:04:50 after wrapping it in stack layout here
02:04:53 in app component HTML and now as this
02:04:56 restarts here we see the result these
02:05:00 free elements are positioned on top of
02:05:03 each other as you can clearly see
02:05:04 vertically because the default is
02:05:07 orientation vertical now let's explore
02:05:11 the horizontal case by going back to our
02:05:15 stack component HTML file and there we
02:05:18 can set orientation horizontal now again
02:05:23 it was set to vertical by default if we
02:05:27 do that you see now they're positioned
02:05:30 left to right now let's make it a bit
02:05:34 easier to see that stack layout here by
02:05:37 going to Det CSS file and I'll add a new
02:05:40 rule here the stack layout selector and
02:05:44 there I want to select my well stack
02:05:47 layout which wraps these elements and
02:05:49 I'll give it a border color of green
02:05:54 we're not using that down there no and a
02:05:57 border width of 5 so that we can clearly
02:06:00 see that and I'll also give it a padding
02:06:02 of 10 so there there is some distance
02:06:05 between that border and the elements
02:06:06 inside of it now as this reloads we will
02:06:09 clearly see the stack layout there it is
02:06:12 and of course you also see they're all
02:06:14 poor
02:06:15 to the left we're just a default they
02:06:17 simply start at left
02:06:18 now you can't override this with
02:06:20 horizontal alignment which has showed on
02:06:22 the slide because Dad only positions an
02:06:25 individual label now to show you these
02:06:28 child properties which I mentioned let
02:06:31 me give this stack layout and height
02:06:34 here which is not just the height of the
02:06:36 children but more than that let's say of
02:06:38 300 if I give it that height you will
02:06:41 see that the green border expands to the
02:06:43 bottom of course and you see that by
02:06:47 default all the labels are centered
02:06:50 vertically in there now we can't control
02:06:54 the horizontal alignment off the items
02:06:56 because well if we would try to Center
02:06:59 item 1 horizontally here well item Q and
02:07:03 free logically come after it though we
02:07:05 don't say anything about their
02:07:07 positioning so you can't push item 1
02:07:09 well beyond item free basically by
02:07:12 trying to Center it horizontally but
02:07:15 vertically it's a different thing we can
02:07:17 position each item separately vertically
02:07:20 and we can easily do so by going to our
02:07:23 labels let's say label 2 and giving this
02:07:26 a vertical alignment of top and as the
02:07:32 name suggests disposition set at the top
02:07:34 alternatives would be bottom and stretch
02:07:37 now bottom should be really clear
02:07:39 stretch will actually make the elements
02:07:41 stretch out from top to bottom so it

02:07:44 will ensure that the element is actually
02:07:45 higher than it would be by default so
02:07:48 here you see the top positioning and
02:07:50 only item 2 is now pushed to the top now
02:07:53 if you want to see the horizontal
02:07:54 alignment in action then we have to
02:07:58 change the orientation back to word it
02:08:01 which was default if you remember and
02:08:03 then let's add horizontal alignment off
02:08:08 right here on the first label and for
02:08:12 horizontal alignment you can choose
02:08:14 between left center right and also
02:08:17 stretch now as this reloads you see if
02:08:21 the vertical alignment of the blue item
02:08:24 has no effect anymore for the same
02:08:26 reason as previously d horas on
02:08:28 alignment on the red item would have
02:08:30 have no effect we can't push this to the
02:08:32 top because that's the place of the red
02:08:33 block but this is pushed all the way to
02:08:36 the right because of horizontal
02:08:38 alignment right now this can be a bit
02:08:42 hard to understand when you first dive
02:08:45 into this as always dive into the
02:08:48 official docks and their layouts layout
02:08:50 containers and then dive into the layout
02:08:53 container you want to play around with
02:08:54 like stack layout here to learn more
02:08:56 about it and learn more about the
02:08:58 configurations you can set up there and
02:08:59 what you can do with it they're actually
02:09:01 also using that trick of using colored
02:09:03 labels to make it really easy to see
02:09:05 what gets positioned where now there's
02:09:08 the stack layout already though it's
02:09:10 basically all you need to know about it
02:09:12 and it's a great choice if you simply
02:09:14 want to position items well after each
02:09:16 other as we did previously in our demo
02:09:18 app here with a text field a button and
02:09:20 the output or next to each other
02:09:27 now the stack layout is pretty nice but
02:09:29 it's also pretty simple which is
02:09:31 generally good in a lot of cases it
02:09:33 offers all we need but sometimes you
02:09:35 need more control over how the elements
02:09:39 in your layout are distributed if there
02:09:41 should be more space between them and so
02:09:44 on and that is where the flexbox layout
02:09:46 can help you and if you know the Flex
02:09:49 box for web specification attached you
02:09:51 find some useful links regarding that
02:09:53 keep in mind these links are for web
02:09:55 development not native development if
02:09:57 you know that then using the Flex box
02:09:59 lab will be really easy just as with the
02:10:03 stack layout there are two important
02:10:06 core ways of using flexbox layout you
02:10:09 can set a so-called flex direction which
02:10:11 is Evol row or column and the default
02:10:14 would be row now their elements are
02:10:17 distributed like this you could say
02:10:18 that's not the default that there is
02:10:20 some space between but that space here
02:10:23 really highlights where flexbox differs
02:10:25 to the stack layout on the stack layout
02:10:28 elements would come after each other and
02:10:30 you could use some positioning with
02:10:32 horizontal and vertical alignment but
02:10:34 you were pretty restricted there with
02:10:36 the flexbox layout you got a lot of
02:10:38 properties you can set both in CSS and
02:10:42 directly on the element to control how
02:10:44 the child elements are laid out and how
02:10:47 they are distributed in the layout
02:10:49 container and you can do that both for
02:10:51 Rho and of course for a column and here
02:10:54 would be an example for where there is
02:10:56 no space between them or not so much but
02:10:58 where they are all pushed to the start
02:11:01 of the layout container now there are
02:11:02 tons of positioning possibilities and
02:11:04 we'll dive into a lot of them here but
02:11:07 as always always dive into the official
02:11:10 docks and their into the flexbox layout
02:11:12 to learn all about it because there are
02:11:14 so many combinations it's impossible to
02:11:17 show them all here and playing around
02:11:18 with it really is the best way of
02:11:20 mastering it nonetheless let's now dive
02:11:23 in and let's see what we can do with it
02:11:25 I'll create a new component for that
02:11:26 with ng GC also in the layouts folder
02:11:30 but this will now be flexbox because
02:11:32 will now play around of the flexbox
02:11:34 layout and let's wait for this to finish
02:11:37 here it is finished and let's go into
02:11:39 that newly created flex
02:11:41 component and in there I'll add my
02:11:44 flexbox layout opening and closing tag

02:11:48 and I will repeat the setup I had in my
02:11:52 stack layout so I'll quickly copy these
02:11:55 free labels with their IDs and dad text
02:11:58 and added here and I'll also copy the
02:12:01 CSS code I had for in a stack layout and
02:12:04 added here with the difference that I of
02:12:08 course will style my flexbox layout here
02:12:12 and not my stack layout that should be a
02:12:15 capital L Auto formatting here overrides
02:12:17 this all the time so now with that I got
02:12:21 that added we can now use it in our app
02:12:23 component instead of that stack layout
02:12:26 here I'll now use NS flexbox here it is
02:12:31 and let's now save this and therefore
02:12:33 reload the app on these devices there it
02:12:37 is and here we can see how flexbox works
02:12:41 by the way we can also see that there's
02:12:43 a tiny difference between iOS and
02:12:45 Android the text in these boxes is
02:12:49 centered vertically by default on iOS
02:12:53 and on the top on Android you can change
02:12:56 this with different CSS rules check the
02:12:58 CSS talks it's not related to the layout
02:13:01 the layout here the flexbox layout is
02:13:03 responsible for distributing these boxes
02:13:07 by the way in case you're wondering
02:13:09 where this extra spacer is coming from
02:13:11 on iOS that is basically some space
02:13:13 reserved for the main navigation bar
02:13:16 which we don't have here by default we
02:13:19 can see that the behavior is the same
02:13:20 regarding the fact that it seems to be
02:13:23 left to right and all the elements
02:13:25 stretch top to bottom because the
02:13:28 default for the flexbox layout is
02:13:30 actually a flex direction of Rho and you
02:13:35 can set this here just as all your other
02:13:37 properties I'm about to show you you can
02:13:39 set it here on this layout or in the CSS
02:13:42 code there it would be flex – direction
02:13:45 though so whatever is camelcase
02:13:48 on the as a property becomes caleb case
02:13:52 here so with a dash between the words
02:13:54 and this is as I mentioned row by
02:13:57 default now you can also change this to
02:14:02 column and it will not change it in here
02:14:05 but actually here because I think that's
02:14:07 a bit easier to see right now so I can
02:14:10 set Flex direction to column here all my
02:14:14 flexbox layout now let's see how this
02:14:16 changes things you probably can guess it
02:14:18 already what will happen column of
02:14:20 course now distributes the items
02:14:22 vertically from top to bottom as a
02:14:24 default now there although is row
02:14:28 reverse and column reverse and that
02:14:32 keeps it vertically or horizontally so
02:14:35 column stays vertical row stays
02:14:37 horizontal but reverse make sure that we
02:14:40 start at the bottom and please note that
02:14:42 it didn't push the items down to the
02:14:44 bottom but it also changed their order
02:14:47 item one is now at the bottom then item
02:14:49 Q so it really starts at the bottom it's
02:14:51 not just pushed down and the items still
02:14:54 start from top to bottom the items
02:14:56 themselves are ordered to start from top
02:14:59 to bottom that is what reverse does here
02:15:02 now I will go back to my normal column
02:15:05 here because the interesting part is not
02:15:08 just how we can push our items around or
02:15:11 where we start and if we position them
02:15:14 top to bottom or left to right we can
02:15:17 also control how the items themselves
02:15:18 are distributed within the available
02:15:21 space the available space is our green
02:15:23 box here right now they're all sitting
02:15:25 on top of each other right at the start
02:15:27 that is also what we could achieve with
02:15:29 our stack layout now what we can do here
02:15:33 is we can add justify content as a
02:15:36 property here or also with a dash and a
02:15:39 lowercase C as a CSS property and the
02:15:42 default here is flex start so if I set
02:15:46 this if I set this to flex start here on
02:15:49 the flexbox layout then you will see
02:15:51 that nothing changes in our output
02:15:53 because as I mentioned it is the default
02:15:55 so dad lets them start at the start of
02:15:58 your so called main axis and for column
02:16:01 the main axis is from top to bottom for
02:16:04 a column reverse the main axis would be
02:16:06 bottom to top and for row the main
02:16:08 is left to right so main axis is an
02:16:11 important curb you should keep in mind
02:16:12 it's top to bottom four column left to
02:16:15 right four row the opposite of the main
02:16:17 axis so four column the opposite is left
02:16:22 to right
02:16:22 it's called cross axis so main axis four

02:16:25 column top to bottom cross axis four
02:16:28 column left to right for Flex direction
02:16:31 row main axis is left to right cross
02:16:34 axis is top to bottom and justify
02:16:37 content defines how elements are
02:16:40 positioned along that main axis in Flex
02:16:43 start make sure they sit at the start of
02:16:45 the main axis flex and on the other hand
02:16:48 make sure that they are pushed to the
02:16:50 end of the main axis so if dad reloads
02:16:53 we will see that all the items are now
02:16:55 at the bottom of our green box but
02:16:57 important they keep the order
02:16:59 unlike column reverse it's not the red
02:17:02 box at the bottom instead they still are
02:17:05 ordered top to bottom but they just are
02:17:07 pushed to the end of the layout
02:17:09 container
02:17:10 now besides flex start and flex end we
02:17:13 also have Center and that is great if
02:17:15 you want a well center the items in the
02:17:18 box so now you can see all three items
02:17:21 are absolutely centered in the green box
02:17:24 sometimes you also want to have some
02:17:26 space between these items and you can do
02:17:28 that easily with Flex box to unjustified
02:17:31 content you can set space between and
02:17:34 this ensures that we have the first
02:17:37 element right at the start of the
02:17:38 container the last element right at the
02:17:42 bottom or at row right at the end of the
02:17:44 container I should say and then some
02:17:45 space in between and that space you see
02:17:48 between the green border and the first
02:17:50 and last element that simply is our
02:17:53 padding on the flexbox layout otherwise
02:17:56 if I remove that there will be no space
02:17:58 there so really first element sits right
02:18:01 at the start of the Flex box last
02:18:03 element sits right at the end and then
02:18:05 we got an equal amount of space between
02:18:07 all the items in our container here it
02:18:11 is now sometimes you don't want to have
02:18:13 this distribution but you want to have
02:18:16 some space around all elements now this
02:18:19 adds the available free space
02:18:22 around all elements so now we get an
02:18:25 equal amount of space before this
02:18:27 element and after this element and then
02:18:29 before this element and after the blue
02:18:31 element and then before the orange
02:18:33 element and after the orange element and
02:18:36 this already shows the power of the
02:18:38 flexbox layout we can do a lot with it
02:18:41 and we really are
02:18:42 well flexible regarding our positioning
02:18:45 when using it so far I talked about
02:18:49 positioning along the main axis and
02:18:51 remember we have a flex direction of
02:18:53 column here so the main axis is top to
02:18:55 bottom what about the cross axis though
02:18:58 we can position items along the cross
02:19:01 axis by setting a line items here now
02:19:05 aligned items and I just split this a
02:19:08 cross multiply ins to make it easier to
02:19:09 read a line items takes generally
02:19:12 comparable values to justify content but
02:19:15 not exactly the same ones the default
02:19:18 here is actually stretch and that is
02:19:20 what since it's the default is currently
02:19:22 getting applied this is what's
02:19:24 responsible for all the items taking the
02:19:26 full width of the container again
02:19:28 remember a line items controls
02:19:31 positioning along the cross axis so
02:19:34 since we have a flex direction of top to
02:19:36 bottom the cross axis is left to right
02:19:38 so stretch ensures they take the fall
02:19:41 with left to right but we don't just
02:19:44 have stretch of course we can also set
02:19:47 this to flex start for example and if we
02:19:49 do so then all the items will be pushed
02:19:52 to the start of the cross axis taking
02:19:55 only the width they are set to use so
02:19:58 here you see they're all moved to the
02:20:00 very left just as we have flex start we
02:20:04 of course all have flex and to move all
02:20:07 the items to the end of our cross axis
02:20:11 here they are and unsurprisingly we also
02:20:14 have center here we have no space around
02:20:18 or space between though because how
02:20:20 would that work each item only moves in
02:20:22 its own cross axis row you could say
02:20:25 here but now they're all centered along
02:20:27 the cross axis now always keep in mind
02:20:30 this uses a flex direction of column as
02:20:33 I switch this to row things start to
02:20:36 become
02:20:36 interesting because now that you access
02:20:38 change and now the main axis is left

02:20:40 right and the cross access is top to
02:20:42 bottom and therefore it's now centered
02:20:45 like this and if I for example set
02:20:49 aligned items here to flex start then
02:20:52 the items will not be pushed to the left
02:20:54 but now the cross access since the Flex
02:20:57 direction is Rho the cross access is top
02:21:00 to bottom so all the items with Flex
02:21:02 start on the illini items property are
02:21:04 pushed to the top so you can really have
02:21:07 a lot of combinations here and that
02:21:09 we're only the important properties on
02:21:12 the flexbox layout container if we have
02:21:16 a look at the official docks we see we
02:21:19 also have another property there flex
02:21:21 wrap and then a bunch of properties on
02:21:25 the children though the two I show you
02:21:27 here are really the most important flex
02:21:30 wrap it's interesting too though
02:21:32 flexwrap allows you to control whether
02:21:35 the elements automatically jump into a
02:21:37 new line when they exceeds the space of
02:21:40 the container or if they instead should
02:21:43 shrink in their size if I set this to no
02:21:46 wrap which is one valid value then we
02:21:48 can see in effect when I decrease the
02:21:51 width of my flexbox layout here because
02:21:54 we currently have Rho so the width is
02:21:56 important for distributing them across
02:21:58 the main axis left to right
02:21:59 so with your should be let's say 120
02:22:02 keep in mind that every label has a
02:22:05 width of 50 so free labels which is the
02:22:07 amount we have certainly have more width
02:22:10 than our container here so let's see
02:22:12 what the result is if I set the width to
02:22:15 120 you can see they're all squeezed in
02:22:19 there
02:22:19 so certainly each item shrank in size
02:22:22 it's not having a width of 50 pixels
02:22:25 anymore so flex box actually decrease
02:22:28 the width off the labels it overrode
02:22:30 this rule you could say because we've
02:22:33 set this to no wrap we're not allowing
02:22:35 items to wrap they're not allowed to
02:22:37 overflow either and therefore they
02:22:39 shrink in size we can change this by
02:22:43 setting it to wrap if we do allow
02:22:45 wrapping well then you will see that
02:22:47 each item keeps its width or height
02:22:50 depending on what your main access is
02:22:51 and simply chumps into a new line or
02:22:54 column again depending on what your main
02:22:57 access is so now we have this result
02:22:59 here might look a bit strange but keep
02:23:01 in mind we have that spacing here
02:23:03 because of the space around rule we set
02:23:05 so flexwrap can be interesting to you
02:23:08 when you have a scenario where you want
02:23:10 to have multiple items in one in the
02:23:12 same line and you either must have them
02:23:15 in the line so then you should set it to
02:23:16 no rep or you are okay with items
02:23:19 jumping into a new line or I'm always
02:23:22 saying line but of course line could
02:23:24 also mean column because line is only
02:23:26 correct if we have a flex direction of
02:23:28 row if we have a flex direction of
02:23:29 column we're talking of the space in a
02:23:31 column of course so that was flexwrap
02:23:35 now regarding the child properties I'll
02:23:38 not go through all of them definitely
02:23:40 feel free to explore and play around
02:23:41 with these properties on your own for
02:23:44 example you can even change the order of
02:23:45 elements here flex grow and shrink are
02:23:48 important for controlling which items
02:23:51 should shrink and by how much if they
02:23:53 need to shrink because of not enough
02:23:56 space being available as we just had a
02:23:58 look at it and the line self can be
02:24:00 interesting if you have an item that
02:24:02 should be aligned differently on the
02:24:04 cross axis than your items like here the
02:24:07 default is flex a start but let's say
02:24:10 the last item here should I actually
02:24:12 have Flex end now I will remove my
02:24:16 Whittier again so that we can see this a
02:24:17 bit clearer on the flexbox layout and
02:24:20 now if I set align self to Flex end for
02:24:23 the last label only as this reloads we
02:24:27 can indeed see that that last label
02:24:29 indeed deviates from the behavior of the
02:24:31 other labels so a lot of possibilities
02:24:34 there
02:24:34 you saw the most common properties and
02:24:37 how you use them in this lecture but as
02:24:39 I mentioned feel free to play around
02:24:41 with them to get a feeling for what you
02:24:43 can do there and what you can achieve

02:24:45 here
02:24:46 [Music]

You may also like