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

[Music] so what is native script native script is a set of tools you could say which we use to build real mobile apps for Android and iOS we use technologies for that which we typically use to build web apps with that I mean typescript XML and CSS now we don't use typescript of course to build web apps we use JavaScript but typescript is just a super set to that it's compiled down to JavaScript and angular for example uses typescript heavily and we don't use XML to build web apps but HTML and that's a tiny difference XML is basically HTML you could say here in native script apps we'll use different elements will not use default HTML elements simply because native script does not wrap a web app and put it into a native app but it really compiles it's down to native code so a button placed in your native script template will be a widget button on Android and a UI button on iOS so really the native elements you could use when you build the apps with these native languages and that gives you the best possible performance but other than that it's just the same text sack and native script does not only give us a tool to create such a project and bundle and build it and run it and package it up it also gives us a way of interacting between our JavaScript code our angular code specifically and the mobile platform it gives us a bridge so to say which is a code base running in every applet which is included in every app that basically translates certain commands we write in angular and therefore in JavaScript in the end into commands the native platforms understand for example for switching a page loading a new tab or getting the user location now and whilst we have all of that and therefore have a way of tapping into native api's like using the camera and so on we can do that by using technologies we know we could use vanilla JavaScript or types for that but never script all the supports angular and view and we will use angular in this course now angular normally uses HTML templates to build a web app as you know and that is the part where we will now use XML instead but for all the logic so for the non HTML and partly CSS part of the app we will write all the angular code as we know it will use services we'll use a property binding all the features you know from angular we will use them here and that of course is amazing because that allows us to use our existing knowledge to get a new kind of app out of it so what exactly is happening under the hood of NATO script then well we write our app code and we do that with angular in this course and our goal of course is to get these native mobile apps for iOS and Android now as I mentioned we could write the code in JavaScript or typescript or an angular or in view but we'll use angular in this course but this flexibility already is great to have because it means certain concepts that you'll learn about native script can be reused even if you would use a different framework at a later point of time now native script of course provides your way of getting from your angular code to this native mobile app and therefore it offers us certain core modules which we can import into your app so here I'm really talking about modules written in typescript partly or written in an angular so to say which we import into our typescript code into our angular app queue directly access certain device features from inside our typescript code from inside our angular code word to interact with our user interfaces which use these native widget XML code as I mentioned so we get these tools to well use features we can't use on the web in our angular code and still write normal angular code with that we can also install certain plugins which could be developed by the native script team or by the community and these have to be installed in addition they're not baked into the core of native script but this still is a great part of native script it's highly extensible we can get a lot of value out of it and there is almost no problem we can't solve now and in the end there is this runtime which is embedded into every app which is important for talking to the native api's for doing things like getting the user location using GPS and so on this is basically the code which wraps everything together which you will not see and which you will not write on your own but which is there which ensures that in the end your angular code which doesn't know too much about the platform it's running on runs fine on both Android and I yes well and in the end having a codebase isn't any good we also get the native script CLI which we used to create new projects to test them to run a development server which automatically loads the app on our connected device and reloads it whenever we change our code and which also in the end allows us to package our wrap up and get an apk or an IPA file to deploy it on to Android and iOS and by the end of the course you will learn how to ship your app to the App Store's now what is angular to be honest you should be able to answer that question because it really is a prerequisite of this course I do have an angle a refresher module in this course which you should take to get on the same page as I am basically or to refresh these basics about angular but I will not explain every single concept angular has or offers or how it works so if you feel like I'm moving too fast through angular stuff in this course if I'm writing angular code too fast for you really pick up a dedicated angular course like my complete guide here on udemy for example simply because this is not an angular course it's a native script with angular course and if I teach both then this course would have 60 hours and would be well basically not suited for anyone because it would not be teaching native script and F and not be teaching angular in depth so I rather focus on native script here and give you a brief refresher on angular but I rely on you being able to follow along in all the angular related code so therefore just as a quick refresher angular is a JavaScript framework which we use to build highly interactive and reactive web applications typically or web application user interfaces mostly it uses typescript which is a superset to JavaScript which in the end compiles down to JavaScript but which makes development with JavaScript a bit easier we use it to create single page applications typically in the web which are applications that don't need to reload the page on every click but rather fetch data behind the scenes and rerender what we see on the screen with javascript and therefore we basically use tools like angular to build web applications that are very close to the behavior of native mobile applications hence it makes sense that we also use angular to well create real mobile applications with the help of native script let's get our hands dirty let's start with native script actually before we leave this first introductory module now for that you can visit native script auric which is the official web page of native script and always a great place to dive deeper to go into the official Docs to look up a concept which I only touch on may be or which you need for your next app and on that page if you click on the docs you can basically choose your flavor of native script and we're going with native script with angular in this course and there if you click on getting started you will actually find detailed instructions on how to get started and in the third module of this course so the first module after the angular refresher I will walk you through a full setup on your local machine in depth so you don't need to do that right now instead what you can do is you can go to developers here and then click on playground and that's really cool because that is a interactive playground interactive development environment you could say running in the browser and there you can choose your language and we'll go with angular here and now you get this bar code here this QR code and you can download the native script playground app for your Android or iOS device and scan this code to see the app you're building here in the web browser live on your real device which is amazing now the downside of this is basically this playground app is a wrapper which only has a limited set of features it supports which you can use in here which is actually quite broad but not everything we might want and therefore we will use a different set up for the rest of this course but to get started this is great so make sure to download this playground app and then scan this code now once you scanned this QR code you might be prompted to download the preview app on the App Store and if that should be the case make sure to do that and thereafter it should open the preview app and open that starting app on your Android or iOS device and here it is running on my device now the cool thing is that you can now build that project here in that web editor so here on the left you see your simplified angular project with the app folder with a routing module with some components and you will notice that that basically looks like an angular for the web project one important difference can be found in the components what you see here is this XML code I was talking about because these elements like these labels are really compiled down to their native equivalents so to a label on Android or a label on iOS so that you get a real native user interface and not that HTML user face wrapped into some webview and therefore now if you change something here let's say here on home I say this is amazing and I also add a button which I can do by dragging and dropping it here into my interface and I say tap me we can really build a nice little first app here and as I said the amount of features you can use here is a bit limited because the preview app is essentially a native app wrapping your well demo app here and therefore you can only use features and able to buy that preview app which is a lot for example accessing the device camera should be possible but some things might not be possible and you probably want to learn how to develop locally on your machine anyways so this is a great way to well play around it is called playground after all but for a real full development environment we'll dive into this in section free so right after the angular refresher but here let's say we want to change this this is amazing text up here when we tap that button so I'll call this on change the what we could do is we could go into our home component and they're all named us on change because I renamed it in the template too and then we have a property here which is my label text which is by default this is amazing and when we tap this button well then just as we do it in angular for web app we say this label text and you see you even get some auto completion here this was tapped and this is some code we can execute here in the typescript file then in HTML we now can just bind this with property bindings so using a default angular feature here on this first label we can bind this to the label text so to the property which we define in home component and this is all just angular logic here the only difference really is that we don't use HTML here but other than that we use property binding we use event binding down there with the tap the tap of course also is an event we don't know from the web so these are the tiny differences you will learn about in this course but other than that it's just angular and now once you're done you can hit save here and it should restart the app automatically on your preview app and there you will see that now you have this button and if you tap it this topmost text here changed this was tap text so that is a great way and I can only encourage you to play around with that here play around with some of these widgets until you feel like you have had enough and then you can continue and in the next module we'll actually have a refresher on angular and thereafter we'll have a full set up on our local machine and I will teach you native script step by step so you don't need to understand everything that's going on and this template here right now that's just a tiny example to show you how quick and easy it can be to get started and feel free to follow along here in the playground right at the beginning of the course if you prefer that but definitely also explore the local setup I will teach you because there you can use everything and you can build and ship your apps without any issues so with that let's see what else is in the course before we dive right into our local setup and learn native script from scratch so now that we had a look at our first native script app let's see what else is in the course we're almost done getting started in the next module you will get that angular refresher I was talking about and this is an optional module definitely skip it if you already know angular and you feel like you need no refresher it's purely optional the module after that will be the first real module of this course where we dive into the NATO's core basics how it generally works and where we also set it up locally on our machine there after we'll have a look at navigation and native script so how we can go back and forth how we can add tabs how we can add a side drawer so all that fun stuff thereafter we'll have a look at styling and theming so how we can make our app look good how we can add different colored buttons implement our own general theme and the app and so on right before we then dive into forms and user input which is of course a crucial part of most apps so you will learn how to use angle or form stare how to validate forms and how to use that user input you're getting there after we'll have a look at managing state so how we can work with all the data we gather and we have in the app right before we then have a look at HTTP interactions which basically means how can we also communicate with a back-end server to store our data there or to fetch it from there now a related concept then is authentication because we certainly also want to protect our data we want to protect our app and user authentication is something you need in a lot of apps therefore in this course you will also learn how you would implement that in a native script app we're nearing the end of this course and therefore will then publish our app to the App Store's and you will learn how that publishing process works now thereafter we'll have a look at code sharing and see how we can actually use that native app code we wrote throughout this course to adjust it such that we get a web app out of this as well so that's a tiny bonus you could say but still not a short module actually quite long because that is a pretty cool native script and not something to look it over whilst you of course do use native script to build native apps being able to then not just build native apps but build web apps as well is of course an amazing asset and an amazing feature offered by native script with angular and therefore in this module we will have a look at how you can use one code base to get free apps Android iOS and the web well and thereafter I will basically give you some next steps you could look into you round up the scores and you will have learned a lot about native script so right before we get started with the refresher and then with the first real content modules it's important that you also know how to get the most out of the course because whilst it might look trivial just watch the videos right it actually isn't and I want to ensure that you're getting as much value for your money as possible so obviously you want to watch the videos it's a video on the mont course watching the videos also means that you should watch them at your speed so feel free to slow me down or speed me up with the udemy video player controls if I'm going too fast or too slow pause the videos and occasionally go back to older videos that is okay that's a normal process of learning you will not understand everything at the first time and then it's absolutely fine to go back to an older lecture to reiterate a certain concept or to go through a certain sequence of concepts again but watching the videos isn't everything you also want to code along at least that is what I recommend if you code along if you pause the video and write some code on your own and then see how I implement this this really makes you a programmer you need to get your hands dirty you need to code on your own there are a few assignments of this course and I recommend that you do these as well but other than the assignments definitely just code along and all the normal code you write because the whole course is one assignment if you want to look at it like this so take this opportunity and code along and whilst you're coding along you will face errors that's a normal process during development I face errors all the time as well and your first step should always be to try and fix them on your own Google the error message or as a quick starter read the error message some error messages are quite understandable so read the error message google it if you don't understand it because you will find many threats on Stack Overflow and blog posts which might discuss this exact error and how to solve it also download and compare my code which is attached to many lectures throughout the course and always to the last lecture of every module because by comparing your code to mine you will be able to find out where your code differs and what could be causing the problem now this really is a crucial part and it's often overlooked you got resources like Google and Stack Overflow so you use them because if you're able to fix your own errors then you've made a huge step forward you need to be able to solve problems as a programmer now also use the official Docs I will point at them a couple of times throughout this course and that's not because I'm too lazy to teach you the concepts I will teach them but there's so much more than what I can teach and there might be variations of certain concepts or extra configurations you can set up for certain objects we might be using so you will basically have ways of using certain things differently than I use them in the course or in your next app you might need a certain tool or a certain module which I didn't use here and the official Docs are then a great place to learn about all the features exposed by native script now and last but not least there is the Q&A section and the Q&A section should not be your oh I got an error I don't even look at it I asked a question place to go that's not the idea behind it the idea behind the Q&A section is that you ask if you absolutely are stuck and you can't find any solution anywhere or if something is unclear or if you want to pass back some feedback and also don't just ask in their answer help your fellow students because if you're forced to think about a problem and solve it you of course also get way better at programming and I guess that ultimately is your goal when you're taking a course like this right so these are my hints on how you get the most out of this course and with that let's just get started let's dive into the optional angular refresher before we then have a detailed look at native script so let's now set up a real development environment as we will use it for the rest of this course on Mac OS and also on Linux the steps are pretty much the same now for that you can dive into the official box here under the angular Doc's getting started see lies setup and will basically walk through all these steps where the first step is to install node.js now no js' is required because the built tool uses it behind the scenes and we will also use its package manager npm with which it ships now on node.js or you can download no chess and there make sure to pick the LTS version 10.15 and only if you're facing issues with death try the latest version so this is pretty straightforward clicking the error gives you a default downloader which you can install and for which you can walk thereafter and this will now install node and also NPM that package manager which will also use on your system simply walk through that and wait for it is set up to finish once it is finished we can continue with the next step off the set up already now the next step is to install the native script CLI and there we will already use that NPM command which no J's unlocked for us for dad open your normal terminal or a bash and in there you can simply run npm install - g native script but this might fail and if it fails due to a permission error at sudo in front of this you're then prompted to enter your password but after entering this it should install native script so d native script CLI it's globally on your system successfully now don't worry if you're getting an error in between as long as it finishes successfully without an error so without quitting with an error which you can see by the fact that it shows you what it installed here and mentions something like updated a number of packages if it finishes like this it was successful and you can continue now to continue we will not use the playground app but instead will now use the full setup to setup the full development environment we need on Mac OS now if you're facing any shoes during the next step definitely dive into the advanced setup guide for mac OS or linux and there you will find a step by step guide of all the steps you need to execute and you can do a lot of copy and pasting here to set up all the things you need on your environment on your machine to develop iOS and Android apps there now will not use this as a default though because the native script team gives us utility scripts which you find here that you can run which will do all these setup steps for you so only if Dad fails try it manually so choose your system here I'm using Mac OS and copy that here and then simply execute this in your normal terminal now important before you hit Enter make sure to add sudo in front of this to give it the right access permissions and not get any permission denied errors you might be required to enter your password again now this will ask you a couple of questions and the first one is whether you have Xcode installed Xcode is the ited native app development IDE offered by Apple for building iOS apps and you need to have that installed the script can't install it for you instead you can install it from the normal app store so make sure to open that app store and search for Xcode there and install it in case you don't have it installed yet I do but if you don't have it yet install it here it is free so thereafter in the terminal type yes here and if you type no it will quit so you need to have that installed now thereafter you need to agree here you can scroll down by hitting space and then simply type agree and now you'll be asked a couple of other questions basically you should answer all of them with Y which stands for yes like for example if you need homebrew now all these different tools which are getting installed are different pieces of software that in the end all work together behind the scenes for installing all the penalties you need for your development and then for the development itself so for building your application for the different platforms so for Android and iOS for optimizing these apps and so on that is what we need this setup for now it will take a while this whole setup will take a while and I will fast forward whenever to whenever I'm getting ass again like here if we need chrome I don't need it because I have it already if you don't please add it because it will help us with debugging at some point I will choose n4 now here because though because I have it now I want to install the Java development kit version 8 and the worsen 8 is important if you have version 10 still install version 8 you need that now if I want to install Android SDK is the next question I will and I will type a here to answer yes for all subsequent questions as well so that I'm not prompted every time and now it will install a bunch of stuff and this can take very long so I will now simply skip to the point where this is finished but don't worry if this takes a couple of minutes this is totally normal it downloads a lot of things and installs all these things so let me now fast forward to when I'm done now I'm now ask whoever I want to install the Android emulator system image I will choose yes and the same for hardware acceleration now we need dad to spin up Foreman Android emulators because obviously on Mac OS thankfully we can do both iOS and Android development on Windows and Linux only Android development is possible so you still need to the Android setup there but not Xcode ends on now I'm getting asked whether I want to create an Android emulator and I'll choose yes here too though you could do that through Android studio as well and now with that we're done here now we can execute this command to make sure all these changes which were done behind the scenes have an effect in the terminal as well and the next step is that we should run T and s dr. you also find that step and your official Doc's here under verify it D setup this will now analyze your system and highlight any issues that might still exist if any and therefore tell you if you are ready to bold your first native script project now you should see a bunch of green check marks here if you don't go back to the installation and have a look at this advanced setup guide for Mac OS or Linux and walk through that to make sure that you don't miss step or that you can manually fix any step that is marked here now one thing I will also do is I will install the Android studio which is the official development IDE for Android apps theoretically we don't need that will not use it for writing code but this will make launching emulators easier so I will simply agree here and then download Android studio for Mac here which is quite a big download but once this is done I will walk through the installer here to to install Android studio on this system again because it will help me launch an emulator thereafter and gives us a nice user interface for doing so and whilst as its downloading we can already install the IDE we will actually use for dad you can search for Visual Studio code that is a free IDE which you can install from code that Visual Studio comm which has great native script support and is generally a great development environment and therefore will use that you can simply download it here and then walk through the installer that gives you it's a straightforward installer installing that ID on your system now I already have that so I will not walk through it in detail here but you'll simply install it and we'll launch it later so you don't need to launch it right now we'll launch it later but this will then help us work with native script and write our code now the download did finish here so let me now run this installer and go through it on Mac OS it's really simple you just drag that into your Applications folder and we'll use Android studio a little bit later where I will show you how you can configure different emulators there again you wouldn't need it the script we executed gave us everything to launch an emulator automatically and so on but this will give us a graphical user interface for configuring different emulators as well now with all that setup finished we can go back to the command line here and navigate into a folder with the CD command where you want to create your native script projects where you want to store all the code files and so on now I navigate it into such a folder here and then you can simply run TNS create which is a command that is now available which uses the native script seal eye and first you have to choose a name I will use NS ng course here because it's a native script angular course I guess and you're then asked what style of native script you want to use now it's a native script angular course so we'll choose angular here and let's go with that starting HelloWorld template you could use different templates but we'll add all these fancy features manually so that sounds like a good template to start now this will generate a new native script project for you create all these files you need and store them in a folder in that location you picked here and once it is done it will also show us the command we could execute to run this so here we are now we can navigate into that created folder and will not use TNS preview you could and you would get a barcode you can scan to use your preview app but I will use TNS run and now here on Mac OS you can choose between iOS or Android both should wear work on Linux and Windows you will only be able to work with Android so I will run an iOS simulator here and I will add - - bundle and the future this might not be required anymore but right now whilst it will work without that this gives you additional optimizations and is therefore recommended now this will search for a running iOS emulator or for a connected iOS device and if it doesn't find one it should spin up a new emulator for you so a new virtual device on your machine automatically once it did that it will actually build this demo project which is a fully functional basic project you get out of the box and run it on that emulator so that you have something to play around with right from the start now this can take a while um as you see it's still searching because this hasn't booted up yet and once this has finished booting it will start the build process now important the first time you run this this can take longer subsequent build processes will be faster now important you want to keep that TNS run iOS or Android process running as long as you are working on the code because it will watch your code and automatically detect changes you saved and then read the the project and reinstall it on the device for you which speeds up your development experience so keep that process running as long as you're working on the code thereafter once you're done you can hit ctrl C to quit that process and that's the same on Windows by the way now here it's done building and it's installing the app on the device here you can see it getting installed here it starts and this is our first little demo app which we can use which we get out of the box nothing too fancy but it works and that is the app we'll build up on now for completeness sake let me open a new terminal window the old one is still running in a separate window the old process but now here navigated into that same folder I'll run Tina's Android - - bundle - also search for running Android emulators or connected devices and if nan are found a new emulator will be spun up here and then it will also build the project for Android and install it on that emulator so here it is launching an emulator for me and the emulator it's launching for you might be a different one and this is one I used before because I already had Android studio installed so don't worry if yours looks a bit different in the end it will be an Android emulator with the latest version of Android running on it and once this is done booting up it will also build the project for Android and as you see you can't even have both processes iOS and Android up and running at the same time as long as your system supports dead and you're not facing performance issues and therefore you can preview the app on both devices at the same time and that is also something I'll do throughout the course so that we can always see it on both types of operating systems now here it's still booting up but soon enough it should be done and should be starting the Android build process now as with iOS that first run of the build process can take a bit longer subsequent rebuilds will be much faster now it's done building here and it's now installing it on the emulator and therefore there it will start momentarily here it is and thereafter you'll also have the application running on your Android emulator this starting application here at least now this is nothing too fancy but you can navigate around here on the right you got your physical buttons by the way the back button the home button and the task switcher and feel free to play around with it a bit not too fancy obviously will do way more in this course but this is our finished setup regarding building the app and seeing the app now for working on the code we did install whistles do you code if you remember so start this application now and this should look something like this you might have an extra sidebar when you launch it for the first time but in the end it should look something like this and you can open a folder here or from file open folder and there you want to open that folder you just created with d2 native script CLI so in my case that is the NS ng course folder here now if you hit open here you open your project in Visual Studio code and this is now the setup we'll use for the rest of the course this is now how we will work on our code here in the source folder mainly dad is where all the typescript and angular code will live now just a couple of extensions you should have here to get a similar view to what I have here and a similar behavior you can go to view extensions here or use that shortcut to open the extensions menu and there one thing which is totally optional our material icons you can search for material icon and then install the material icon theme I already have it installed and that just changes some file icons but if you want to have the same file icons as I do well you can install this not optional but absolutely recommend it is the native script extension which I also already have installed but you should install this it will help you with debugging and also give you better Auto completion and general IDE support and for angular development I recommend using the angular essentials package this one here but John Papa I also got this installed already this comprises a couple of extensions which help with a development and simply make debt easier now with these free extensions installed you can go back to that Explorer view here and then you got everything set up as I do in case you don't have that the dark look and you like to have it you can hit command shift P and simply go to color theme and choose the dark blaspheme here and that is the theme I'm using but with that we're all set to continue in the next lecture we'll do the setup on Windows and you can therefore skip that if you're not using Windows and then we're pretty much done to get started writing some code so now that we set everything up on Mac let's all do it on Windows obviously you can skip this window if you're not developing on Windows so on Windows we also want to install node.js and we do that from node.js ORAC just as we did it on a Mac of course generally the installation process for dad will be exactly the same so basically on noce historic we download the LTS version this one and after its downloaded you simply walk through dead node.js installer to install it on your system and you can basically just follow through all these paths and it installed thereafter now once that is installed we finished the first step here and we can confirm that it is installed by starting your a normal command prompt and their type note and if this does not throw an error it succeeded and press ctrl C thereafter twice to exit out of this note input mode which we won't need here now we can continue with our setup so the next step now is that we install the native script C line windows T with the NPM install - G native script command so NPM install - G native script is to command and this will now install this native script seal I globally on our machine so that we can then create projects anywhere on our machine now let's wait for that to finish when prompted for whether you want to share statistics about your usage you can choose wherever you want to do that or not you can also enable command line completion on certain terminals by pressing yes there when asked and you can also here opt into a newsletter basically and you can just hit enter without entering anything to not do that now with that the CLI is installed and as a next step we now could use the playground app on our device and use the cloud playground but we'll now dive into the full setup for Windows now as with Mac OS in case you watch that video to you if you're facing any issues during that setup check that advanced setup windows link here we will list all the setup steps one by one and you can follow through these here mostly with copy and paste if you want to do that manually now hopefully and as a default you should not need to go through that though because you can use this script prepared by the native script team which will set up everything for you automatically so you can clip click that copy button here and then go back to your command prompt but not your normal one but instead open your windows menu and then right-click on your command prompt and choose run as administrator now with that command prompt here opened an administrator mode paste in that command you can copy here and hit enter and this will now download this script from this address you are seeing here for you and execute it for you and it will ask you a couple of questions whilst it does that now as you see this first question is basically something we have to answer it yes since it is required for the rest of the script so let's enter why it hit and hit enter and now this will download a bunch of stuff and stahl it and we'll walk you through several steps that you need to go through to make sure that you can basically start developing with native script and native apps in general on your device now the next question is where ever you want to install Google Chrome now this will be required for some debugging so you should have it installed I already do so I will type and Forno here because I got it already I want to have the Java development kit we need that so let's choose yes there and it will automatically install that kit in the right version which is version 8 as of now now I may ask whether I want to run another script here and I will choose yes here since it is also required to run and this will now download T JDK and install that on my machine as well now I'm getting asked if I want install the Android SDK and basically asked for all these questions I'll choose yes here because we definitely need that to develop Android apps by the way be aware that some of these downloads are pretty big and therefore can take a while as can the subsequent installation steps after now this step can take very long because it's installing a lot of stuff so just let's wait for that to finish now after this very long taking step I'm asked if I want to install the Android emulator and I will choose yes there because we'll need that you create virtual Android devices on which we can test our application we can also test on a real Android device but you might not have one to begin with maybe you don't want to use it for that or you do want to use it and do you do have one but you also want to test on different devices smaller ones bigger ones older ones so having an emulator makes a lot of sense and this is now getting a set up for us here now in between if you're getting this failed to install hexam in silent mode hacks em that is hardware acceleration for the emulator and if that fails as it does for me you should get an installer when they open up which you can now use to install that hardware acceleration thing and that is simply required to well make your emulator more performant now let's press any key to continue and with dead we should be done now as it says here this script has modified your environment you need to log off and log back on for changes to take effect now I will do that but before we do that lets actually also Google for Android studio and download that because we haven't installed that through that script this is the official IDE provided by Google for developing Android applications and we will not use that IDE in this course we'll use a different one which is faster and actually better for native script development but we should still download and install that because it will make certain things like debugging or mainly launching emulators and so on much easier so agree here and download Android studio for Windows and that is quite a big download it's one gigabyte almost so let's now wait for a dad to finish and walk through dad installer together too before we then log off and restart our system for all changes to have an effect now with the download finished execute the downloaded file and this should fire up an installer for Android studio and in that installer let's go through it now here regarding these components we could install it but we should already have that so let's just install Android studio you can pick any location you want of course and hit install here and now this again can take a while but it will now install that IDE and all the related tools on your system and now with this finished you don't have to start it you can just finish like this and now i will restart my system basically and then continue with the rest of the setup and create our first project with all these installed tools here so I did restart my system now and we walked through the installation step with the script here if you faced any issues try to step by step guide you find your tube and now with that all setup we can verify our setup with the command mentioned here with TNS doctor so let's now run this command in the command prompt anywhere on your machine TNS doctor and this shirt now give you hopefully the information that everything is set up correctly so let's gather the information here and that is looking good you should see a bunch of green checkmarks here if you don't see what went wrong there and try the manual steps I mentioned before here to make sure you do add all these components which are essentially required here now with everything set up correctly we can continue and we can now create our first simple project just as we did it in the Mac OS and Linux setup in the last video now and for this we can actually go up in the docs and here under seal I basics you can learn how to create a project but it's actually really simple what you can do here is you can navigate into a folder where you want to create your project and that's really important choose a folder where you want to have your development projects you can navigate around with the CD command you can switch the folder with the drive name and then I : so here I'll stay on C and I will simply do that on the day but you might of course have your dedicated development folder and in the place where you want to create your project run T&S create and this will give you an interactive wizard for creating your project so first of all you should choose your name and I will name this NS ng for a native script angular course then you are prompted for which style of native script you want to use and this is a native script an angular course so we'll pick angular here and we'll go with T hallo world setup there and simply hit enter and now this behind-the-scenes will create a new folder for us in my case here on the desktop since I chose that as my place for running the TNS create command and this folder will have our full native script project inside of it now with that all finished here we see some commands you could run for while launching our project but will not use this preview app instead I will go in there and I will use a different command I will run TNS run Android - - bundle now - - bundle might not be required in the future anymore right now you should run this to have additional optimizations being used with this command being executed it should try to automatically launch an emulator an Android emulator on your system in case you have no connected Android device or running Android emulator now important iOS development is not possible on Windows so you can't run an iOS emulator here that will not work that is simply not supported by Apple unfortunately now here it did launch the emulator and now it's building the app in the background this starting app we get and once it's done building it will automatically launch it on that emulator here now that first launch can take a while by the way because it does a lot of initial setup during that first launch subsequent launches will be faster now here it built the project successfully and then launches it after installing it on the device by the way if your firewall should be asking you for access during all that launching definitely granted to it and here we got our first native script app running on and emulator and that is of course awesome and a great first step here now obviously we don't just want to see it run we also want to be able to edit the code so as a last step of this video we'll set up our development environment to make sure that we have all the setup we need to well work on our app for that I can only recommend using visual studio code which is a free IDE for which an official native script plug-in exists which makes working with native script really simple and fun now you can download that from code visual studio comm you can use it for all platforms and once that download finished just as always you simply walk through the Installer that gives you pretty straightforward there nothing special to setup install it anywhere you want and with it installed we can launch it right away and now here in Visual Studio code um I will actually not use that side bar you can play around with these settings and make sure it appears in the way you want it to appear you like that to look I will basically just open a folder here you can also of course open a folder with file open folder and open that folder which are just created which is this NS ngi chords folder here select the folder and now you have your project in your editor here now these are all the files and folders with which will work now to get great IDE support and exactly the look I will have throughout the rest of this course regarding the files is on you should go to this extensions area here on left or under view extensions or with that shortcut and then the extensions here I will be using the material I can theme which is 100% optional but I like that look a lot so I will install that the material I can theme here now again you don't need that for native script development just to get the same look as I do but what you should install is here native script search for that and install this official plugin which will help you with debugging and also with auto completion and general IDE support for native script and with that installed all the search for angular essentials which is a general angular extension or a package of extensions actually this one which is all to install to speed up your angular development in case you don't have that already now with all these extensions installed you can now hit reload here to have them all be enabled and now you can continue here activate that material icon theme here to change your icons to the way you'll see them in my course here and you're now ready to continue ready to work on angular and native script and build amazing apps so let's move on so we learned how to set up our application how to create a new one and we get the whole development environment set up to start working on our native script apps now you learned how to launch your app on both Android and iOS even simultaneously if your machine supports it but what if you actually want to use a different device than the one it chose for you what if you want to use a iPhone X or a different Android device well you can quit the emulators which it started for you and you can manually choose different ones let's start with iOS but don't quit the video because I'll show Android in a second queue and open Xcode on Mac OS you can't do that on Windows but on Mac OS you can there choose open another project and then navigate into the project folder you created so in my case that's DNS ng course folder in that NS ng course folder choose the platforms folder and then iOS and that is the folder you want to open now this opens Xcode with your iOS app folder in your project folder and that indeed is inside of your code here that folder it is it opens that folder in Xcode now we will not write our code here but here you can actually choose different emulators different virtual devices and you can also start your application from inside here by hitting that play button and this will now start the app here on this device and even if you dare after quit this process here it will keep the emulator up and running or it should at least and you can therefore continue to use that emulator even if you then use the TNS run iOS command again so now it's starting my iOS emulator here as you can see it's the iPhone X we have two knotch at the top here and it boots our application there as well here it is you can also quit this process here it keeps the emulator up and running and you can then go to your kernel and rerun the TNS run iOS a bundle command - - bumble and now it will automatically again search for emulators find you're running one and use dad to launch the app on it so that's a convenient and easy way of switching the emulator so let's quickly see if that works it's searching for devices and it did find my device here and therefore now rebuilds the app and will then launch it on that device as I mentioned here it is getting installed and here it is launching for us that's the same app as before but now running on our iPhone X so that is how you can use Xcode to run your app on a different emulator as a side note here when you click on your project name you might want to fix any team issues you see here I actually got one and it should work without that but if you're facing issues make sure you choose a development team login with your Apple ID and resolve any errors that might show you here though important you will not need a paid apple developer account for building iPhone apps right now only when you later want to deploy them so don't pay anything here just fix that in case you get any errors related to that now that is the iPhone what about Android well we can start Android studio because we did install it after all and when this starts for the very first time it might actually walk you through a setup wizard I will use my previous settings though because I already had it installed and you don't need to install anything in it wizard because all the SDKs and emulators all that stuff was already installed so you can basically skip all of that or install the latest versions and so on but in general you shouldn't need to install anything there now once that completed you should see something like this or maybe the hole ID you already open and forced you to create a new project anyway you should be able to use file open or here open an existing Android studio project and then just as with Xcode go into the project folder of the Nazca project into platforms and there now choose the Android folder and this will now that project inside of Android studio now just as with Xcode will not do any development here that's not the plan but just as with Xcode we are able to launch our Android project why Xcode and we can also set up a different emulator in here now let's wait for this initialization process to finish here real quick because you'll not be able to do anything before that is done you can ignore any warnings you might be getting here once this is done you can go to tools AVD manager with just a manager for setting up emulators in the end and open that tool and here I already got a bunch of virtual devices you can add a new one with this plus button in the bottom left corner and there you can configure any virtual device you want based on any pluie print you want let's say a pixel - here for example click Next then choose an Android version I'll actually download the latest 128 here even but you can take the default one it selects and definitely use that in case you're facing any problems during development for me it will quickly download that SDK version in general using these cutting-edge versions so the versions which are not stable or final yet which is not recommended because this one as you can see is recommended you should take these especially facing issues using the cutting-edge ones the latest ones can definitely lead to issues which you can then easily solve by falling back to an emulator which uses the stable Android API level now you can experiment with these settings and generally configure your virtual device just as you want it and then finish this and launch it with this play button here now this launch is just the emulator not the app yet now here it is and now you can again go back to your terminal and rerun TNS run Android bundle it will again search for an emulator but since you now have one up and running and that is exactly the one you launch therefore you configure in the way you want it we'll take that emulator and build the app and install the app on this emulator so here it already started that build process and here is the app running on our custom emulator so that is how you can switch emulators you can also connect your real devices and quit any emulators to force the run process to TNS run process to build the app and ship it to your real device and test it there you just need to make sure that when you connect a real iPhone you trust your computer when asked on the iPhone and for an Android device when you connect it you need to enable USB debugging more information can be found in the lecture after this one so with that let's continue and in the next section let's finally get our hands dirty and write some code now maybe you also want to run your project on a real phone and not just on a simulator now for that let me show you how this works and for iOS you should open your platform folder in your project with Xcode basically what I already showed you in the last video for the emulators now there select your project here in the left corner top left corner and under general choose a team and if you don't have one add an account you need an Apple ID for that and you also will need to sign up for an Apple Developer account there is a paid and a free version and for development the free version is enough only for deploying your app later down this course you'll need a paid version so here I will just choose the team I already have which I can select there and if you see any warnings or errors down there next to provisioning profile or signing certificate simply read them and do as they tell you typically these are steps like you need to agree to some updated Terms of Use or here next to signing certificate you might need to add your iPhone now for this to add make sure you connect your iPhone to your Mac if you never did this before for development and on your iPhone you should then be prompted whether you want you trust this computer or not and of course you should choose yes there please note this is only required if you connected the first time to this Mac subsequent connect should not ask you again now once your phone is connected and this part here in the middle is resolved without errors so you got a team connected you got an Apple Developer account you can choose your phone here from this drop-down typically at the top here is my iPhone and you should be able to find your stare too now you can run your app here with this play button and alternatively of course you can still in your project run TNS run iOS - - bundle and if you have no running iOS emulator and shut it down if you do have one this should now automatically recognize your iPhone and then build the app for that and for this you will need to have this development team thing resolved otherwise this will not work so if you've got any errors here regarding your development team building for a real device is not possible building for an emulator is but not for a real device and now with all that setup you should have the app running on your device so this is a live stream capturing from my iPhone and this is the app running there after adding this important setup here in Xcode for the provisioning profile and the signing certificate thereafter you should be able to run it with TNS run iOS dash dash bundle and now it's up to you whether you want to develop on an emulator or a real device typically an emulator is is faster and you don't need to have your device around all the time and I will use an emulator for the rest of the course but occasionally testing the app on a real device makes a lot of sense of course now running the app on an iPhone is nice but what about Android well for Android it's even simpler than for iOS you don't need to worry about any certificates or signing there for Android just make sure that you connect your Android phone to your machine with a USB cable Wireless will not work and turn on USB debugging in your developer options on your device now where do you find these developer options though in your options towards the bottom there should be your about phone section and this is now a no-joke in that section tap your build number seven times and you'll see some help pop-up come up at some point once you tap the Det often enter your PIN and you're now enabled as a developer on your phone and you should have these developer options available now any developer options you should now turn on USB debugging down there and with the turned on and your device connected to your machine in your project folder in a terminal or a command prompt you can run TNS run Android - - bundle just make sure you don't have any emulators up and running or your app might get installed there but with no emulators up and running and just your phone connected this should now build the Android app and ship it on to your Android phone so let's wait for this build process to finish here and here the app starts on my phone and this is now the app running on my Android device so this is how you can run the app on both Android and iPhone devices as I mentioned for development I will use the emulators here also because that is easier to record for me but also because it can be faster and you can run it there on devices which you might not own but occasionally having a look at your app running on a real device obviously is important to see if everything is working correctly there too now there is one thing about the project setup that can actually be confusing which is why I want to talk about it you might be seeing a lot of JavaScript files in your project like the app routing module javascript file the app component javascript file and if you look into them this is clearly not the code will work on and indeed we won't the typescript setup just works such that there is a extra build step so to say which compiles your typescript code to JavaScript code which is why you see these extra files here now you don't see this in a regular angular project because the angular CLI does that behind the scenes there here it happens well in front of the scenes so to say you can just ignore these javascript files you can even delete them they will be recreated automatically but you can also just leave them be if you're using source control there is no need to check them in you can well as I said you can or them treat them as if they were in here you'll see them throughout the course and therefore it looks like we'll work with a lot of files well actually keep in mind that for every TS file there is an extra J's file in which will never work now with the project set up for this course let's now finally dive into native script into its core basics and into how we work with native script how we can build native apps with native script and angular and in this module we will dive into the fundamentals you need to know you need to be aware of the basics of native script precisely we'll dive into how the native script app actually starts and kind of works behind the scenes and with debt I specifically mean how the angular app which is kind of combined with native script starts and works will thereafter have a look at the core UI elements we can use to build our user interface with native script because as you will see will not use HTML for that but something which is very similar well then have a look at how we can build our user interfaces regarding the positioning of the items on them so how we can make sure that items are positioned correctly on our app screens and we'll dive into a concept called layouts for that and I will introduce you to the different layouts native script supports and how we use these now it is of course nice if we then have elements on the screen and they are positioned correctly but we also need to know how we can style them to make them look good have the right colors and so on and therefore styling native script elements is another important aspect we'll dive into in this module and last but not least there will be errors or there will be things which you want to double check in your applications and therefore we'll have a look at debugging native script apps in this module too so lots of ground to cover let's dive in this is the project we created in the last course section and I haven't changed anything there except for the get ignore file which I add because I'll use git for versioning by the way in case you want to have that file you find it attached to this lecture now I want to spin up my virtual devices again and I want to build and run my app for them and I could do this in the terminal as I did in the last section and it will actually but I will use the terminal which is integrated into Visual Studio code and you can open that with the terminal or here under terminal new terminal and this will open that terminal portion here at the bottom of your screen and that will be your normal system command prompt or terminal just integrated into this IDE and already navigated into this project folder so any command you run here will be run in the scope of this project now in there I want to build my app for Android and run it on an Android emulator and therefore just as before we can run TNS run Android - - bundle and of course I want to do the same for iOS so in a new terminal window which you can open here with the plus I will run TNS run iOS - - bundle and now I got two terminal windows open here and I will keep them both open and the processes in there running because as I already mentioned in the last section you should keep these TNS run commands running as they will watch your source code and automatically rebuild and reinstall your app whenever your code changes which of course speeds up your development flow so here the iOS emulator already opened up and here I also got the Android emulator which already loaded the app even so these are the two applications or the two emulators I will use for testing here and I do have them both up and running in my integrated terminal windows here and that is basically it for now now with that we can continue working on the code but first of all I want to explore how the application actually starts and with that I mean what happens in angular because you might be aware of how an angular application basically works that you do embed a certain route element in your index.html file and then you add that your app module and angular therefore bootstraps itself into that place in the index.html file but we got no index.html file here though we do have a module so how does this work that is what we'll explore in the next lecture so how does the angular native script app actually start now it is important to keep in mind that behind the scenes native script essentially builds a real native app a real native app package which gets shipped to the device to the emulator here and gets installed and executed there and this native package contains a lot of native code so Android Java code for Android and Swift objective-c code for iOS your application logic the angular code you write basically gets hosted in that native package and gets executed there on a JavaScript runtime check the first module of this course again if you want to learn more about these internals and what's happening behind the scenes still the question is how is our angular app booted up then well we got this main T as file in your source folder here and that main TS file is your core entry point for the application and that is the same for Android for web projects too if you remember now in here we have code that actually also looks similar to what you would see in an angular 4 web project we do import something but we don't import this from at angular platform browser as we would do for angular web project but we do import this platform native script dynamic from native script angular slash platform so this is clearly coming from the native script ecosystem from a package distributed by the native script team we then import our app module and at the bottom we do call disco euro where we do execute this code and again this looks similar to what you would see in an angular 4 web project but we are using this bootstrap module method provided by the object returned by platform native script dynamic so essentially what we're doing here is we are executing some bootstrapping code provided by native script and behind the scenes this will actually mount our angular application and the view is created there into native app you could say or in our native app it starts executing our angular code it starts loading the right user interfaces and starts rendering them to the screen and all that heavy lifting off communicating between the native code and the native elements which we create in our user interfaces and our angular application logic that heavy lifting is handled by native script and therefore native script needs to do that set up and that mounting because it needs to establish all these connections and so on behind the scenes in a nutshell what we do though is we do load our app module to start our app just as we do it in a web app so let's have a look at this app module then which we find in this app dot module TS file in the source app folder now in there again we see a lot of code that looks familiar to us most importantly we got this exported app module with the at ng module decorator and I do expect that you have the basic angular knowledge to understand what this exactly is and how that works definitely dive in the refresher module in this course if your last time you worked with angular was a couple of months ago so in the end this is how we would create our app module in angular and angular for web I should say too we then do you have this bootstrap array here where we define the root component of our application just as we do it in angular for web and this is a normal angular component basically as I will show you in a second in imports we didn't see the first important difference though we're not importing the browser module here as we would do in an angular for web project but instead we import the native script module and that is a module imported from the native script angular package so essentially again this is a package at dependency imported from a package distributed by the native script team this again does setup a lot of crucial stuff behind the scenes that allows our application to run and allows our angular code to function in the context of this native app which has this communicate going on between native views real native UI elements as you will learn throughout this module and our JavaScript angler logic now the app routing module sets up the routing for this application here and there again if we dive into this we see that we use the angular routing logic we register routes just as we would do it in an angular 4 web project again with the exception that we use specific modules the native script or router module instead of the default angular router module which we would use in a web project and that is related to how navigation works in a native app it works differently than in a web app and we'll dive deeply into navigation and our different options in a separate module in this course but back to the app module for now we then declare a bunch of components nothing special here we got no providers and then we get this interesting schema thing here and this interesting schema thing here is related to how we actually create our templates our views of our components and that is what I'll dive into in the next lecture for this lecture I want you to take away that the general flow of starting your app is similar to an angular for web app we got the main TS file where we bootstrap the app module where we have a regular angular module but that the important difference is to an angular for web app are basically how you load the things that you use certain packages provided by native script like this one here or the native script module to wire up your angular logic and your angular app to the native app which gets handled and created by a native script behind the scenes with dead let's explore how we build our views and why this schema here is important we learned that our angular app basically gets loaded and mounted by native script with some specific code that is provided by native script and that therefore we have no index.html file because the loading is done well by native script behind the scenes and the mounting into our views into what we see on the screen is also handled by native script and it does connect our angular logic to our reduce speaking of these views let's have a look at our app component here this is a regular angular component with the component decorator a selector template URL and the only special thing is this module ID here well that is required by native script and the native script build process you could say to essentially connect your templates and your angular logic correctly and bundle everything correctly so every component needs to have this module ID and it always is module ID which has a value of modulite e and that essentially is a globally available object injected by the native script build process you could say besides that it's a regular angular component but it is interesting to look at the component HTML file please note that it is a file ending with dot HTML but actually if we look into this file we find no HTML in there well here we got the page router outlet and please note that this is not the normal router outlet but again a specific directive provided by a native script because regarding routing we always use the native script router module to cope for how routing works and how navigation works in native apps it's different it's a stack based navigation different to the web but more on that later but if we have a look at another component like here our item component this item detail component to be precise if we have a look at this HTML code then we see that there is no HTML in there even though the file ends with dot HTML well it ends with dot HTML to basically be close to how we would build an angular for web project but this is not HTML this is just XML and what we were using here are a certain native script elements which well native script provides to us and which will be translated to their native equivalents so the equivalents we would use if we would create our app with just Android and Java or just Objective C and Swift now what exactly do I mean with it and what is generally up with this view here how does a view in native could work in native script we create our user interfaces with components and so-called layouts and components does not really just mean angular components it also includes these built-in elements you saw a second ago so imagine this is what we see in on the screen of our native device now we could build this in the web cube in native script as I mentioned we have two important portions we have to layout in part where we use built-in layouts to control how the elements on this screen are positioned and distributed this would be an example for a layout we have a row here where we essentially controlled that bananas this text here is on the far left and this badge with the value of one is on the far right the whole page content here is all the wrapped in a layout you could say and here we basically control that this input field with the button next to it is on the top of the page then we have our rows of items and so on now that positioning related part is controlled with layout elements provided by native script the input and output of data is controlled with components you could say so things like this button here but also this badge so basically the parts of the UI with which the user interacts or which outputs information to the user these parts are the components or also the UI widgets or elements provided by a native script and you can also build your own angular components on these layouts and built-in components and if we go back to our HTML code here we got a couple of layout elements in there indeed the flexbox layout here and then this label here would be an example for a UI widget provided by native script and a label basically is your way or your possibility for outputting text in a native script application and in the official native script Doc's if you go to native script angular and click on UI widgets you can actually find a list of the UI widgets or elements or components whatever you want to call them that are built into native script and there you see we got a bunch of them but it's not that many as you maybe would have expected but it turns out that with this set of UI widgets we can basically build any UI we want and as we do it here for example in this starting setup you can build your own angular components by mixing and matching these built-in widgets so here we get a component that is one element of a list essentially which in turn uses layouts and labels to output text and position these different text snippets correctly and speaking of layouts you might have already seen this layouts part here well there you see the available layout elements here called layout containers but I'll dive deeply into them throughout this module so no need to do this right now now what's the idea behind these core widgets elements or components as we might call them in native script well let's have a look at how we build user interfaces on the web with HTML and then it really becomes clear that there we use one element a button for example and this HTML tag which we use is the same no matter if the web page gets loaded on Firefox or Chrome or if it gets loaded on a Mac or a Windows machine and the reason for data is that hTML is standardized and all browser's adhere to that now it's different for native apps when we build an app with native script then we have to target Android and iOS and these are independent platforms which have no user interface standard they have their own programming languages and they have their own available user interface elements therefore so where we use a button on the web and it works every on native script we kind of want to use a globally available button and this is how a button element would look like in a script please notice the capital B all the built-in widgets start with capital characters and this gets translated to the native equivalents so - for example a widget dot view dot button that is the element or the namespace of the element in Android and a UI button on iOS and the important part to keep in mind here is that your user interfaces your component templates really are compiled qts native elements by native script you don't have HTML wrapped in a native app or anything like that you get compiled user interfaces and therefore you need one element with which you can work in your native script code because you don't want to write different interfaces for the different platforms that would defeat the purpose of using a cross-platform solution like native script but you want to get that native output and therefore a native script dusty compilation and therefore native script needs to give you a list of elements it knows to compile it knows how to compile them and you can check the official Doc's which I just showed you to find a list of the available elements regarding the web I'll dive into this a little bit later on how we can alter build a web page with our native script project so here are the official Doc's if you for example I have a look at this button widget you not only find instructions on how to use it if you scroll down you also find to which native components this gets compiled and that is what I just showed you on the slide so that is why we use HTML because we use the native script elements so that native script knows how to compile them to the native equivalents when it builds the apps for Android and iOS and there was a lot of talking about this but it is the foundation of your native script app and it is so important to understand this to build user interfaces and to understand what's going on behind the scenes here now with that out of the way let's finally write some code and for that I'll delete that item folder I'll also delete the app routing file because will not use routing for now and in the app module we therefore can delete the declarations of items component and item detail component the import of app routing module here because I deleted that and also the typescript import statements here at the top let's get rid of them since I deleted all these files now we can get started and now to come back to that no error schema by the way we need this to be able to use all these native script elements in our HTML files otherwise angular would basically throw an error because we're not using angular components or normal HTML elements and this basically disables angular's template checks now with that let's build our own component and also use some native script elements now in this course we want to build an app where we can manage our personal monthly challenge like take a walk every day and to get started with that I will create a new folder here to build my first own component and I'll name this challenges and in there I'll build a new subfolder current challenge and why these two folders because later we'll add more and more components and I want to keep them organized so in there I'll add my current challenge dot component dot TS file and my current challenge dot component dot HTML file these two pieces which should make up my component for now and also a current challenge dot component dot CSS file so that we can add styling now let's start in the types could file in the current challenge component typescript file there we create a component by exporting a class which we named current challenge component just as we would do it in an angular for a web app and just in a normal angular app and I don't really like differentiation because we have a normal angular app here after all we can add at component decorator or we have to add it actually to tell angular how to well what to do with this class and how to build that component how to connect template and logic a native script will help us with that since the template gets compiled to a native template so we should add a selector here so that we can embed this as an element and your selector doesn't start with a capital character like two built-in elements instead you would name this how you do indeed name it for any angular app you can add your own prefix could be an S could be app I'll go with NS and then your component name so here NS current challenge makes a lot of sense I think next I want to let angular know where my template lives so I will add the template URL property here and point at my current - challenge dot component or HTML file and for the Styles I'll add style URLs and here this takes an array where I also point at current challenge component dot CSS here now there's one extra thing which I mentioned in the last lecture every angular component needs to have that module ID property which has a value of module ID that is required for native script to be able to build your app correctly now to be able to use this component we need to declare it in an angular module and I'll do it here in the app module I will declare my current challenge component here and I use the auto import functionality of my IDE you need to make sure that this import is added where we import current challenge component from and then the path to the file slash dot slash challenges slash current challenge slash current challenge dot component without dot TS at the end that has to be omitted it is added automatically by the build process so with that we declared it we can now use it and let's now use it by using such a layout and I'll dive into all the weight of layouts in a second and let's of course also make sure that you have some other output or input elements in there so I will add a stack layout here which is amongst the simple slay outs you can use and by default the stack layout simply organizes the elements you put inside of it from top to bottom now let's say we want to be able to set a current challenge and then simply output our challenge name now let's start by outputting the name with a label and that is important you can't type challenge name like take a walk every day like this because there is no implicit text element in native script so just outputting text without adding it to an element doesn't work instead if you want output text you will use a label and that label then has a text property so text doesn't go between the opening and closing tag here but into that text property where you can now have take a walk every day now if we want to see that in action let's actually just go to the app component and replace page router outlet with our own NS current challenge here and we include our own components just as we include them in a web app for it is to work we also have to wrap it here into a layout like a stack layout because you always have to have such a layout as your root component and now after saving this the application should rebuild thanks to these processes TNS run Android and TNS run iOS still running and it will now reload the app on our emulators as soon as it's done building and it should output our new user interface and here it is take a walk everyday on both emulators a little bit hard to see on Android because of the default style Android applies pretty easy to see here on iOS I guess so this is how we can build our own angular components nothing too fancy about this and more importantly this is how we use these built-in UI widgets and layouts now I mentioned that I want to be able to set my own text here basically so let's work on that in the next lecture now that we saw that we can build normal angular components and that we work with these built-in widgets let's use Morissette widgets I want to be able to set that text on my own and for this we can add a text field widget here and this will allow us to input something and in case you're wondering how I know this don't forget that there is this documentation and there you can simply click through them and see what they do it's not that many and you will see there's a text field widget so the text field which it allows us to enter something if I save this and let it rebuild we can see this real quick here it is really is to see on Android because it's underlined by default it's not on iOS it is there you can type here but it's not so easy to see I will dive into styling later this is how we can enter text but of course we're also interested in while getting access to that text and you get access to this text we can actually use a technique we also use an angular for web we can use two-way binding so we can use ng model here with this syntax and again that is something you should know from normal angular and we can bind this to a property of our component class here like challenge description by default let's say that's an empty string and now we can bind this here in our template by simply pointing at challenge description here just like that now on these elements we can also set some attributes like we set the text attributes here for example a text field supports a hint attribute and again if you want to know which attributes are supported for one year fishel docks here might be helpful here you see some examples but if you want to see everything you can always scroll down to that class definition here and have a look at that now that's more technical to read but here if you click on the text view for example you see a list of all the properties this has and you can essentially set all these properties as attributes on your XML element and for example here you also see two hint and you can click on that and get a short description on what you can do with that so dad is the deep dive the docks here a great first place at this course of course tries to teach you as much about this as possible so here we could enter challenge title to give a hint about what this text field wants as an input and with dad if we let this update again we see challenge Tyler here on both okay so we get this and we're binding to the challenge description property now of course we now when I use that property value to which we're binding here and to use it let's add a button here and on that button let's say set challenge because we now want to set our challenge to whatever we entered here and obviously we'll get more sophisticated than that throughout the course now let's try a first way of setting this by binding the text here with property bindings indicated by the square brackets which is how you can set a dynamic value to this attribute and you can do this with any attribute you could also bind D hint here dynamically and there I want to set this to that challenge description property which I'm binding to you with ng mall here well if I now save this we wouldn't even need the button for this by the way if I now save this you will see that as this reloads if I type here we see the button without a text because I have that it any but we also see there's no output below that and the reason for that is that for ng model to work we actually just as an angular for web need to import an extra module here in our app module and that would be the native script forums module now we need to import that and we do import that we do import the native script forms module from and actually it's already hinted here from native script angular slash forms so this now imports native could forms module and this unlocks the usage of ng module in our component here so with that import added in the app module we can wait for this to reload and you will now actually see that as I type here output gets added at the bottom this works so now we got this output working but we added this button I want to use that button to output my content and for this we can use something which we also know from angular for web we can use event binding with normal parentheses now on the web you would listen to click this does not exist on a native script element there you have tap instead and just as before the official Doc's are of help if you want to find all available events you can click on gestures here and that gives you an overview over the gestures the user input events basically which native script supports here they are and here you find examples on how to listen to them for example a double tap here or also a long press well we are using a normal tap here and we can now bind us to a method which should get executed or have some inline code here that should be executed so here we could execute on set challenged name is up to you copy that and add a method off that name here and now in that method we can define which logic we want to have in here to set our challenge and here I'll simply add a current challenge property which is empty by default and I will then set this current challenge equal to challenge description so to what the user entered here in onset challenge and now the last thing we need to do is we need to use current challenge and bind this to our text here because now with two properties which are set upon a tap here we make sure that we have no life output here in the label but only after we confirmed on the button now on the button it also doesn't hurt to set a text attribute which it supports to have some text on the button which should be set challenge because a little mistake here on my side of course set challenge like this doesn't work I did mention that there is no implicit text widget it's easy to forget this if you work on the web for a lot but on native script you add all output text always on properties of your widgets so that's also why I left this error in there it is a common error you need to set the text attribute here so with that if it now reloads now we see the button here and now if I add take a walk every day here only when I click this button it occurs down there take a walk every day on iOS it works the same on iOS of course so what you can clearly see here is that you still use these general angular features like property binding or event binding or two-way binding just not string interpolation because you have no implicit text you could output here right that's not supported but you use these other elements just as you use them in angular you have the general flow of data as you can set it up at an angular web app but we are using this special widgets and by the way this should be a button with a capital P it worked with a lowercase B too but best practice is to use capital characters to make it really clear that this is not HTML and with that we get our first very basic user interface built of course not that beautiful though so let's dive into styling next before we thereafter have a deeper look and all the built-in layouts that are supported so we can set our current challenge here this is the challenge but beautiful is different I'd say so let's learn how we can actually style in native script and as always and I'm just mentioning this to make you sure that you can do as much as possible on your own in your own projects too as always the official Doc's are of help here you can check this styling part here to learn more about how styling works in native script and which possibilities you have there because the good thing is you can use CSS with the same rules you use on the web but actually not all properties are supported but only this list of supported properties which you find here and you should check this regularly if you're working on native script because this list is always up to date and new properties are getting added all the time and you have a supported list of selectors you can use so you can use things like the type selector a class selector and so on but for example regarding pseudo selectors only a bunch of pseudo selectors are supported it's actually not just highlighted as it says here they're also is disabled but you don't have hover for example because you can't really hover on native apps so this is how styling works we use a sub selection of CSS you could say and we can use our CSS files for the components just as we do it on an angular app you can also set inline styles though so for example on my label here I could set a font size important you have attributes which are in camel case lower case starting character every character of a word inside the word then starts with a capital character you could set this to let's say 20 all's important here for units you don't have pixels or Ram you have just a number and these will automatically be device-independent pixels so adjust it to the resolution of the device the only alternative are percentages but here I want to use an absolute size and we can set in line like this and asked us for loads if I add my challenge here you see it's a bit bigger than before because the default size was not 20 you can also set inline styles with the style tag here just as you would do it on the web now with the CSS property font size which is supported if you check your little Doc's which you again set not two pixels but also to a unit-less value here and this will have the same effect as before let's now try it on iOS this works here it is bigger than before and in a lot of occasions setting inline styles is okay or might be easier to understand for other developers working on your code but for more complex stylings or reusable stylings you want to use these CSS files now important the CSS file of a component sets up stalls which are then scoped to that component so whichever CSS rules you adhere only apply to elements in this component so if I for example style my stack layout here to have a border color of red and a border width of 5 if I do that here in my current challenge component you will see that ass's updates I do have my red border and you don't need to set the type of order to solve it I do have my red border around this stack layout but remember that an app component we also had a stack layout around the overall page you could say and there is no red border around Det because your styles are scoped to your component Everett than the component CSS files on the other hand you can set up global styles in the app CSS file if you want to do that here by the way we are importing a default theme more about theming in a separate module but here I could Staal my stack layout to have a border color of green and a border width of eight for example now if I do that here in app CSS you will see that Aster's reloads we do at that green border here around the overall page which is T is stack layout we have here an app component but please note we're not adding this in the app component CSS file so this is not scope to app component it's just overwritten for the current challenge stack layout because we have separate a separate rule here if I would actually comment out this rule here in the current challenge component CSS file you will see that both stack layouts will have the green border because that green border rule is set up in the app CSS file which is our global CSS file here you can see it so any CSS code set up an app CSS it's applied application wide which can be very useful for setting up some general styling whereas here you can style what only should apply in a given component now with these basics out of the way let's dive into styling and let's make our simple user interface here a little bit more pretty in the next lecture so now that we understood how styling generally works and that it's awesome let's actually prove the styling here and I want to have a mix of app wide styles for example for the button in the text field where I want to have a general yeah you could call it theme in my app and component specific styles for the text here for example for my current challenge so let's start with that current challenge text here I got this label and I could select it with the label type so it could simply style label here or just as in web sees as we can add an ID and select by that with the hashtag selector or add a class and select by this so here I will give this a class of title and in our CSS file I can then add a title class selector here and here I want to now set a font size of let's say 26 and I want to align the text in the center which I can do a text align Center and again that is something you know from the web both properties are available in the web here the unit is different because we have no UNIX units like pixel here but just a number but that is it now let's also add a root color and for that I want to pick some purplish color maybe maybe here in this area yeah I like that tone and let's give it a font weight of bold now with these four properties added which are all support that you can of course check the official docs as does I have Roo loads we can set our challenge here and that looks a lot better than it did before now let's also add some distance between our text here and the button by adding a margin and justice on the web you can set a general margin with the shorthand notation you know from the web or you said something like margin top and there we could set this to 10 for example again device-independent pixels if we save this now we can take a walk here on iOS and we see there is some distance between the button and our text okay perfect so this is the text is this good for now now let me also set some global stalls and as I mentioned there I wanna style the button and I want a stalled text field so our input element which we have here now let's say we start with the button you can absolutely have different styles for iOS and Android and it will dive into how you set up different stalls in that styling and theming module a little bit later where we dive deeper into everything you can do with styling and so on for now I will set one style for both platforms by going to the button and there I'll set a background of this same purple I used before here so let me copy that hex code I'll set a border width and you need to set that to make sure that you really get a nice-looking button in the end otherwise you might end up with a button where the background is not applied because it doesn't have a border that is because of how the compilation to native widgets works so I'll set up border width of 1 and a border color of that well same color and a text color of white let's say now let me save that and let's see if that looks something like I want it to look yeah doesn't look too shabby certainly or Android a little bit of improvement is needed here on iOS but I like the direction to which we're heading now I don't want to have a button which spans to full width off the page and in general we can control this with the layout that surrounds it but we can also set a width property and for example we could say that the button should have with off let's say 100 now this is not really what you want to have as a global setting because that means today if you have longer texts in your buttons then they will get cut off so in reality you would want to have our percentage of let's say 100% and then control the width of the button with the surrounding layout yeah here we can actually see what I meant it's getting cut off doesn't really look pretty so what I will do here for now is all increase this to 400 which should be enough space and I'll add some padding here and I want to have padding top and bottom off let's say five and left and right 10 and if we now save this we should have a prettier button in the application yeah this looks better a little bit too wide now so maybe 250 and I also want to have rounded corners which we can set with border radius which is also supported by native script so you see it supports a lot of core CSS properties and I'll set this to 30% here so you could also set an absolute value but I want to use a percentage value and now we should get a nice button with rounded corners yeah I like that style now last change is that I want to add a margin top and bottom off let's say 5 and 0 left and right by default and I'll change the selector from button which should start with the capital B by the way was just Auto formatted by my IDE you can used with a lowercase B 2 as you saw but I will change this to a class selector for dot button so that I can actually control which buttons should get this default style and which buttons not because maybe I don't want to have this default cell for every single button element on the page so here we'll add this class BTN which I just set up globally so that this button will get this style which is a setup here in app CSS and with that that looks quite decent now the button is set up I now want you to practice styling a little bit by also styling that text field now doesn't look too bad like this but we can certainly improve it a little bit now simply play around and dive into the official docks and see which rules are available there these up or dead CSS properties here and feel free to style the way you want I will style it in a way where I will set this border at the bottom on both platforms so I will add it as a rule and I will color it in the same way I colored this buttons are using that same purplish color that is something I will set and I will probably add some spacing on the top and bottom of it but feel free to use different styles this is what I will use in a solution and definitely compare your approach to my solution video to see how I solve this especially in case you get stuck or you're not sure how you can target the text field or how you do apply these properties though it really just works as we did it here so good luck with that were you successful I will now work on that text field and just as before I will actually set this up with a class which I then can add to any text field which should get these styles and I will have a class off form control here but you can use any night class and you want you could name this input whatever you want now there I want to have a border bottom color as I mentioned of this purplish style here and a border bottom width of two maybe so that we can clearly see this border now I also want to add a margin top and bottom off let's say five and zero left and right and didn't mention this in the tasks but I also decided to set a font size here and I'll set a font size of 20 of course this is optional if you didn't do this no problem at all I didn't mention it now let's have a look at how this looks like and for this we of course need to add this class to this text field here so there let's add class attribute and set this to form control which is the class name I chose and after saving this it should automatically recompile and restart the application so that we see this style in action here it is now it still takes the full width just as the button this is actually default for all these UI widgets they take to full width and you will soon learn how to control this with layouts for now let's accept it as it is but this does look quite nice now I want to have some padding which I do have by default on Android but not on iOS so let me actually go back to app CSS and let's add a padding here and the padding could be maybe eight pixels top and bottom and four pixels left and right we'll have to play around with that a little bit to see how that works yeah that looks quite good so now we have the same style on both platforms here and that already is it this looks nice as it is and that concludes our first exploration of the Eiling world native script offers to us now it's time to dive into the layouts so that we got more control and more power over how we can lay our elements out on the screen and we can actually do more than just top to bottom as we're currently doing enough styling for now let's dive into layouts as mentioned before layouts is really just a term for these core UI elements native script offers you which you wrap around your Averell ament's like the stack layout we used which control how the children inside the layout are laid out on the page how they are distributed how they are positioned and there are four core layout elements you need to know in native script because you'll use these a lot and these four typically cover everything you would want to do there also are two additional ones stock layout and rap layout and I will not dive deeply into them in this course because in my experience you don't really use them that often of course you find explanations on all of these in your facial docks now one important note right away layouts can also be nested into each other and that is important because you could think that a stack layout is there to hold buttons and text fields and labels and it is but a stack layout could also hold an average stack layout and implicitly we are already doing this in our demo app here we built thus far because we had a stack layout in the app component HTML file and then also in our custom angular component the current challenge component which you as an app component but before we dive too much into nesting what do these four core layouts actually do how do they differ a stacked layout is pretty easy to grasp I guess it's there to position items next to each other or on top of each other vertically or horizontally so you can achieve layouts like this where elements are sitting on top of each other or next to each other and this little preview picture here actually would be achieved by already nesting stack layouts because you would have an overall stack layout which has a stack layout with the free rows which has then to our stack layouts with the free columns you could say speaking of rows and columns if you want to build such a gritty interface you could also explore the grid layout which allows you to position items in well a grid of rows and columns with which you can achieve very flexible layouts like this one and I'll of course give you example and show you how to use these layouts in detail over the next lectures now when you don't need a full grid but you want to position elements in one dimension so in a row or in a column then you can always use the flexbox layout which follows these CSS flexbox specification you might know from web development and there you can do things like distribute items in a row to have a lot of space between them or have them sit very close to each other things like that now sometimes you don't want to position items relative to each other or in a grid but on like a coordinate system and here the absolute layout can help you it positions elements absolutely using coordinates and with that you can have overlapping elements and anything like that so let's explore these layouts then one by one over the next lectures I want to start with the stack layout which we already saw in action now the stacked layout has two forums you can set it up to have an orientation of vertical which is to default actually and therefore does need to be set separately or orientation horizontal now in the vertical orientation elements are simply added top to bottom on top of each other here and that is all to what we used in our demo app where we had the text input at the top then the button then the label with horizontal you guessed it items sit next to Java in a row now you cannot just configure the layout element you can also configure the children in such a layout and that is now not limited to stack layout for this specific property here you can set horizontal and vertical alignment to control how child elements lay themselves out or position themselves in the layout container again horizontal and vertical alignment can not just be used in a stack layout but you often use them there because other layouts like flexbox layout for example have different means of positioning children but more on that when we reach that layout so let's actually see it in action then I guess we already do is see it in action in our app of course but I want to see it in more action and for this I'll create a new component now here we'll also explore something new we can use the angular seal I to create a component and for that you should just make sure that you have the angular CLI installed you can get it on seal i dot angular dot IO by simply running this command here npm install - g-- angular CLI you don't need the other ones just this one and this will install the angular c-like globally on your machine and with that you can run commands with the ng command and in the angular project which this turns out to be at least partly you can run ng generate component or a shorter form ng g c to create a new component automatically and then you can just enter a name and here all named as layouts or to be precise I want to create a folder named layouts and in there I want to have my stack layout so by running ng GC layouts slash stack a new stack component will be created in a layouts folder now this command takes a while in a native script project so I will fast forward to this being finished might be faster at the point of time you're viewing this and let's dive into this component once it's done so it is done and in layouts I got my stack layout here by the way will later delete this folder it's here for practicing and we get a component created with that module IDE and basically a very basic initialization here now in that stack layout let's practice it using it and let's add a stack layout as we did before and in there I want to have a label with the text off just maybe item 1 any text you want now one item alone is boring let's add more items so I'll add two and three here as well now to make sure we can see them in a CSS file I will style my label and keep in mind that is scoped to this component so only labels in this component will receive that styling and I will add a background color or could add background color but also just background works of let's say red and then a width of 50 and a height of 50 so that we can see this now actually may let's make it even easier to see them by giving these labels IDs by one and so on so that we can target them separately and give them different colors I guess I free so now back in the CSS file with these IDs added I want to have width and height be equal on all labels but I will target hash tag I 1 for the element with ID 1 and give that background one and then the other one here I'd you will get a background of let's say blue and I three will get a background off anything you want I'll take orange now with that set up let me save that and let's go back into app component HTML and I will comment out my demo app and for now I will sum we use the NS stack component now by running the ng generate command this received a selector by default and it was also added to the app module to declarations they're automatically here it is the stack component so that is why I can start using it immediately and if I now save that keep in mind my TNS run processes are still running this app will reload and will not see the text field anymore because I commented that out but instead we see the stack layout in action or well what's yo if important as I mentioned we would have wrapped this in a stack layout here because you need to have a route layout around your well topmost component which happens to be this one here so let's try this again after wrapping it in stack layout here in app component HTML and now as this restarts here we see the result these free elements are positioned on top of each other as you can clearly see vertically because the default is orientation vertical now let's explore the horizontal case by going back to our stack component HTML file and there we can set orientation horizontal now again it was set to vertical by default if we do that you see now they're positioned left to right now let's make it a bit easier to see that stack layout here by going to Det CSS file and I'll add a new rule here the stack layout selector and there I want to select my well stack layout which wraps these elements and I'll give it a border color of green we're not using that down there no and a border width of 5 so that we can clearly see that and I'll also give it a padding of 10 so there there is some distance between that border and the elements inside of it now as this reloads we will clearly see the stack layout there it is and of course you also see they're all poor to the left we're just a default they simply start at left now you can't override this with horizontal alignment which has showed on the slide because Dad only positions an individual label now to show you these child properties which I mentioned let me give this stack layout and height here which is not just the height of the children but more than that let's say of 300 if I give it that height you will see that the green border expands to the bottom of course and you see that by default all the labels are centered vertically in there now we can't control the horizontal alignment off the items because well if we would try to Center item 1 horizontally here well item Q and free logically come after it though we don't say anything about their positioning so you can't push item 1 well beyond item free basically by trying to Center it horizontally but vertically it's a different thing we can position each item separately vertically and we can easily do so by going to our labels let's say label 2 and giving this a vertical alignment of top and as the name suggests disposition set at the top alternatives would be bottom and stretch now bottom should be really clear stretch will actually make the elements stretch out from top to bottom so it will ensure that the element is actually higher than it would be by default so here you see the top positioning and only item 2 is now pushed to the top now if you want to see the horizontal alignment in action then we have to change the orientation back to word it which was default if you remember and then let's add horizontal alignment off right here on the first label and for horizontal alignment you can choose between left center right and also stretch now as this reloads you see if the vertical alignment of the blue item has no effect anymore for the same reason as previously d horas on alignment on the red item would have have no effect we can't push this to the top because that's the place of the red block but this is pushed all the way to the right because of horizontal alignment right now this can be a bit hard to understand when you first dive into this as always dive into the official docks and their layouts layout containers and then dive into the layout container you want to play around with like stack layout here to learn more about it and learn more about the configurations you can set up there and what you can do with it they're actually also using that trick of using colored labels to make it really easy to see what gets positioned where now there's the stack layout already though it's basically all you need to know about it and it's a great choice if you simply want to position items well after each other as we did previously in our demo app here with a text field a button and the output or next to each other now the stack layout is pretty nice but it's also pretty simple which is generally good in a lot of cases it offers all we need but sometimes you need more control over how the elements in your layout are distributed if there should be more space between them and so on and that is where the flexbox layout can help you and if you know the Flex box for web specification attached you find some useful links regarding that keep in mind these links are for web development not native development if you know that then using the Flex box lab will be really easy just as with the stack layout there are two important core ways of using flexbox layout you can set a so-called flex direction which is Evol row or column and the default would be row now their elements are distributed like this you could say that's not the default that there is some space between but that space here really highlights where flexbox differs to the stack layout on the stack layout elements would come after each other and you could use some positioning with horizontal and vertical alignment but you were pretty restricted there with the flexbox layout you got a lot of properties you can set both in CSS and directly on the element to control how the child elements are laid out and how they are distributed in the layout container and you can do that both for Rho and of course for a column and here would be an example for where there is no space between them or not so much but where they are all pushed to the start of the layout container now there are tons of positioning possibilities and we'll dive into a lot of them here but as always always dive into the official docks and their into the flexbox layout to learn all about it because there are so many combinations it's impossible to show them all here and playing around with it really is the best way of mastering it nonetheless let's now dive in and let's see what we can do with it I'll create a new component for that with ng GC also in the layouts folder but this will now be flexbox because will now play around of the flexbox layout and let's wait for this to finish here it is finished and let's go into that newly created flex component and in there I'll add my flexbox layout opening and closing tag and I will repeat the setup I had in my stack layout so I'll quickly copy these free labels with their IDs and dad text and added here and I'll also copy the CSS code I had for in a stack layout and added here with the difference that I of course will style my flexbox layout here and not my stack layout that should be a capital L Auto formatting here overrides this all the time so now with that I got that added we can now use it in our app component instead of that stack layout here I'll now use NS flexbox here it is and let's now save this and therefore reload the app on these devices there it is and here we can see how flexbox works by the way we can also see that there's a tiny difference between iOS and Android the text in these boxes is centered vertically by default on iOS and on the top on Android you can change this with different CSS rules check the CSS talks it's not related to the layout the layout here the flexbox layout is responsible for distributing these boxes by the way in case you're wondering where this extra spacer is coming from on iOS that is basically some space reserved for the main navigation bar which we don't have here by default we can see that the behavior is the same regarding the fact that it seems to be left to right and all the elements stretch top to bottom because the default for the flexbox layout is actually a flex direction of Rho and you can set this here just as all your other properties I'm about to show you you can set it here on this layout or in the CSS code there it would be flex - direction though so whatever is camelcase on the as a property becomes caleb case here so with a dash between the words and this is as I mentioned row by default now you can also change this to column and it will not change it in here but actually here because I think that's a bit easier to see right now so I can set Flex direction to column here all my flexbox layout now let's see how this changes things you probably can guess it already what will happen column of course now distributes the items vertically from top to bottom as a default now there although is row reverse and column reverse and that keeps it vertically or horizontally so column stays vertical row stays horizontal but reverse make sure that we start at the bottom and please note that it didn't push the items down to the bottom but it also changed their order item one is now at the bottom then item Q so it really starts at the bottom it's not just pushed down and the items still start from top to bottom the items themselves are ordered to start from top to bottom that is what reverse does here now I will go back to my normal column here because the interesting part is not just how we can push our items around or where we start and if we position them top to bottom or left to right we can also control how the items themselves are distributed within the available space the available space is our green box here right now they're all sitting on top of each other right at the start that is also what we could achieve with our stack layout now what we can do here is we can add justify content as a property here or also with a dash and a lowercase C as a CSS property and the default here is flex start so if I set this if I set this to flex start here on the flexbox layout then you will see that nothing changes in our output because as I mentioned it is the default so dad lets them start at the start of your so called main axis and for column the main axis is from top to bottom for a column reverse the main axis would be bottom to top and for row the main is left to right so main axis is an important curb you should keep in mind it's top to bottom four column left to right four row the opposite of the main axis so four column the opposite is left to right it's called cross axis so main axis four column top to bottom cross axis four column left to right for Flex direction row main axis is left to right cross axis is top to bottom and justify content defines how elements are positioned along that main axis in Flex start make sure they sit at the start of the main axis flex and on the other hand make sure that they are pushed to the end of the main axis so if dad reloads we will see that all the items are now at the bottom of our green box but important they keep the order unlike column reverse it's not the red box at the bottom instead they still are ordered top to bottom but they just are pushed to the end of the layout container now besides flex start and flex end we also have Center and that is great if you want a well center the items in the box so now you can see all three items are absolutely centered in the green box sometimes you also want to have some space between these items and you can do that easily with Flex box to unjustified content you can set space between and this ensures that we have the first element right at the start of the container the last element right at the bottom or at row right at the end of the container I should say and then some space in between and that space you see between the green border and the first and last element that simply is our padding on the flexbox layout otherwise if I remove that there will be no space there so really first element sits right at the start of the Flex box last element sits right at the end and then we got an equal amount of space between all the items in our container here it is now sometimes you don't want to have this distribution but you want to have some space around all elements now this adds the available free space around all elements so now we get an equal amount of space before this element and after this element and then before this element and after the blue element and then before the orange element and after the orange element and this already shows the power of the flexbox layout we can do a lot with it and we really are well flexible regarding our positioning when using it so far I talked about positioning along the main axis and remember we have a flex direction of column here so the main axis is top to bottom what about the cross axis though we can position items along the cross axis by setting a line items here now aligned items and I just split this a cross multiply ins to make it easier to read a line items takes generally comparable values to justify content but not exactly the same ones the default here is actually stretch and that is what since it's the default is currently getting applied this is what's responsible for all the items taking the full width of the container again remember a line items controls positioning along the cross axis so since we have a flex direction of top to bottom the cross axis is left to right so stretch ensures they take the fall with left to right but we don't just have stretch of course we can also set this to flex start for example and if we do so then all the items will be pushed to the start of the cross axis taking only the width they are set to use so here you see they're all moved to the very left just as we have flex start we of course all have flex and to move all the items to the end of our cross axis here they are and unsurprisingly we also have center here we have no space around or space between though because how would that work each item only moves in its own cross axis row you could say here but now they're all centered along the cross axis now always keep in mind this uses a flex direction of column as I switch this to row things start to become interesting because now that you access change and now the main axis is left right and the cross access is top to bottom and therefore it's now centered like this and if I for example set aligned items here to flex start then the items will not be pushed to the left but now the cross access since the Flex direction is Rho the cross access is top to bottom so all the items with Flex start on the illini items property are pushed to the top so you can really have a lot of combinations here and that we're only the important properties on the flexbox layout container if we have a look at the official docks we see we also have another property there flex wrap and then a bunch of properties on the children though the two I show you here are really the most important flex wrap it's interesting too though flexwrap allows you to control whether the elements automatically jump into a new line when they exceeds the space of the container or if they instead should shrink in their size if I set this to no wrap which is one valid value then we can see in effect when I decrease the width of my flexbox layout here because we currently have Rho so the width is important for distributing them across the main axis left to right so with your should be let's say 120 keep in mind that every label has a width of 50 so free labels which is the amount we have certainly have more width than our container here so let's see what the result is if I set the width to 120 you can see they're all squeezed in there so certainly each item shrank in size it's not having a width of 50 pixels anymore so flex box actually decrease the width off the labels it overrode this rule you could say because we've set this to no wrap we're not allowing items to wrap they're not allowed to overflow either and therefore they shrink in size we can change this by setting it to wrap if we do allow wrapping well then you will see that each item keeps its width or height depending on what your main access is and simply chumps into a new line or column again depending on what your main access is so now we have this result here might look a bit strange but keep in mind we have that spacing here because of the space around rule we set so flexwrap can be interesting to you when you have a scenario where you want to have multiple items in one in the same line and you either must have them in the line so then you should set it to no rep or you are okay with items jumping into a new line or I'm always saying line but of course line could also mean column because line is only correct if we have a flex direction of row if we have a flex direction of column we're talking of the space in a column of course so that was flexwrap now regarding the child properties I'll not go through all of them definitely feel free to explore and play around with these properties on your own for example you can even change the order of elements here flex grow and shrink are important for controlling which items should shrink and by how much if they need to shrink because of not enough space being available as we just had a look at it and the line self can be interesting if you have an item that should be aligned differently on the cross axis than your items like here the default is flex a start but let's say the last item here should I actually have Flex end now I will remove my Whittier again so that we can see this a bit clearer on the flexbox layout and now if I set align self to Flex end for the last label only as this reloads we can indeed see that that last label indeed deviates from the behavior of the other labels so a lot of possibilities there you saw the most common properties and how you use them in this lecture but as I mentioned feel free to play around with them to get a feeling for what you can do there and what you can achieve here [Music]

Channel: Academind

Views: 114,186

Keywords: nativescript tutorial, nativescript course, nativescript crash course, nativescript ios, nativescript android, nativescript angular, nativescript, nativescript for beginners, nativescript tutorial for beginners

Id: DcCSq2Y9bow

Length: 144min 57sec (8697 seconds)

Published: Wed Jan 30 2019