Angular 5 Tutorial (complete) - Maximilian Schwarzmuller

[Music] welcome to this video great to have you here in this video you're going to learn all about the basics of angular 4 which in the end is just the latest version of angular 2 now this video is actually taken from my complete guide to angular a more than 16 hours long five-star rated udemy course where I deeply dive into angular 4 now if you feel like you want to learn more about angular after finishing this video you're of course invited to join this course you'll find a link for huge discount in the video description but even if you decide not to join this event you should walk you through the basics I'm just mentioning the course because from time to time I will say we will learn this later or you can find us attached to this lecture and both won't work here in this video I can't attach files to a YouTube video but you won't need to download anything everything you will need for this video is the project setup which I will explain in this video with that enjoy it and hopefully you'll learn a lot about angular welcome to my complete guide on angular is so great to have you on board in this course you're going to learn what angular is and how you can use it to build awesome front-end web applications with it very reactive web applications with great user experiences for that throughout this course you're going to learn all the individual building blocks which make up angular before we then also dive into the more advanced features and we're going to build a project throughout the course putting all these things you'll learn in theory kind of in which you practice throughout the course into the perspective of a real project so that you can see how you would apply them there and that you can see how you build up a real web applications with the things you learn here so with that I'd say let's dive into it and let's dive into the most important question first what is angular angler is a framework which allows you to create reactive single-page applications a nice sentence but what exactly does it mean a single-page application is an application like this the project we're going to bow throughout the course you can navigate around there and in the URL you can see that we seem to with a different pages but in the end our page never changes it's only one HTML file and a bunch of JavaScript code we got from the server and everything which you see here every change is rendered in the browser now why is that awesome because it gives the user a very reactive user experience javascript is much faster than having to reach out to a server for every page change and for every new piece of data you want to display and therefore this approach allows you to create web applications which look and feel almost like mobile applications very fast everything happens instantly and if you do need some data from a server you simply load it in the background so that the user never leaves this experience of having a reactive web application to use so every click I do here simply changes this one single page we're using this one HTML page and how is it done well JavaScript changes the Dom changes whatever is displayed here changes the HTML code during runtime so to say that is why you never see that refresh icon on the top left spin because we're only changing the currently loaded page and you can even see that if you inspect the source code of a page like this that is the HTML file and as you can see it doesn't seem to contain the content you are seeing on this page we only have one single HTML element which doesn't seem to be a built-in one a native one but that's angular doing its shop and throughout the course you're going to learn what exactly happens here and how angular does test job so that is what anger does for you it allows you to create very reactive single page applications re-rendering parts of the Dom to update the page but you might also have heard that there is angular 1 anger 2 and Engler 4 and what do all these versions mean well angler 1 was the first angular version it was released a couple of years ago and became very popular because it allowed us for almost the first time to create web applications like the ones shown in the last video to create these great user experiences with JavaScript angular 2 was a complete rewrite of angular 1 and was released in the last year it's an awesome framework and that's the future of angular but it doesn't have much in common with angular 1 so simply forget everything you know about angular 1 or if you haven't learned it already don't learn it at all angular 2 or just angular how it is called now is the future and it is that renaming of angular 2 to just angler which explains what angular 4 is it's simply the next version and version free was simply skipped queue to some internal reasons so that simply it's the next version of angular 2 you could say and therefore also the future of angular but unlike angular 2 was for angular 1 angle of 4 is not a complete rewrite of angular 2 and this whole course of course is updated to the latest angular version now that we learned what angular is let's mold our first angular application since this is the best way of finding out how it works now throughout this whole course I'm going to use the angular CLI command line interface this is simply a toolset which makes creating managing and building your angular applications very simple it quickly creates new angular projects and then you have some commands you can use to build that project for production and so on why do I use the CLI and not just import the angular framework in an existing index.html page because angular is a very futuristic framework and therefore it uses features like typescript which is a superset of JavaScript which needs to be compiled before it runs in the browser so it has some extra steps we have to take into account during development and doing that manually can really be a pain that's why this Eli is really an awesome solution will be used in this course later in the course though I do have a section where I do explain how you could build your own project from scratch but even then it will be more than just importing a script file so for TC live what we need is node J s node J s is a server-side language and no worry we're not going to write any server-side code we simply need no chairs because this Eli needs it behind the scenes that does some things with it to build our project and to manage our dependencies the packages we use like the angular framework itself and it also spins up a little development server which will host our app on our local machine making it easy for us to test it so make sure to download the latest version of node.js here simply download it and go through the installer should be very straightforward and once you are done go back to this page and here you basically see all the instructions we're going to run through in the next seconds together so we will need to open a terminal window on Linux and Mac or simply - command line on Windows and once you did this like this we simply run the following command to install the seal I after you install node.js that's important on your machine npm that's the node package manager which was installed together with no chairs and one of the main reasons why we had to install no chairs to begin with install then - chief were global to install it globally on your machine at angular seal I at angular seal I simply as deep package we're using the seal I itself now on Linux and Mac you may need to put a sudo in front of that on windows that will not be required and then maybe after being prompted for the password this will run for the installation and download the seal I on your machine and install it if you're encountering any problems during that check out the lecture after this one where I will do some troubleshooting highlight some common problems and how you may debug that and get this to run correctly if then it still won't work open a Q&A thread and I'm happy to help well I'll be back once this finished so the CLI installation successfully finished for me here the next step is to create a new angular project with it for this you should navigate in the terminal here into the folder where you want to create a project so with the CD command now I already am in the folder I want to create it and then the command to create a new angular project is to run ng that command is available since we installed the angular CLI so ng will refer to that CLI new to create a new project and then your project name I'll simply name it my first app of course choose any name you like here that will also be the folder name off the folder which gets created where this project will be stored then simply hit enter to create this new application and now this will take a couple of seconds it will basically install all the required dependencies for example the angular framework itself and it will inform you once it's finished so I'll be back once this is done the creation of the project finished for me and now I can navigate into this newly created folder with CD my first app and here we can run this project with ng serve what this will do is it will build all our source code as angular uses typescript which needs to be compiled to JavaScript more on this in a later lecture and then it will spin up a little development server running at this address here where we can see our running app why do we need a server and don't simply double-click the index.html file well due to the nature how England works it loads a lot of resources dynamically once it runs and we can only simulate how it would really look like on a real server if we use the HTTP protocol which we don't use when double-clicking on a file so with that since we know that it will run at localhost 4200 we can simply visit this page by entering it in our browser and we should see app works which basically some dummy text created by this Eli showing us that it indeed works that is how we can set it up in the next lecture let's edit this app and dive into it and see what this Eli exactly did create for us I hope the project we created in the last lecture in a webstorm di de I'm going to use throughout this course now webstorm is only one option and a ver great options as editors to work in this course would be Microsoft Visual Studio code or editors like sublime text or the atom editor you can simply download them all these options are available for free and would allow you to follow along just like I do here now in this project you see a couple of folders and files were created and that might look intimidating at the beginning but most of the files you see here are only required for configuring the project and the default configuration should be absolutely fine the e2e folder will be required for end-to-end testing something I won't dive into right now and in the source folder that is where you create your project now here we find even more files but again all these files here don't really have to be touched here you can simply again do some specific configuration for your project also something you probably won't need and most importantly the index.html file is the single page our app is going to serve but you don't need to change anything here we're going to write all our code in the app folder the assets folder could be used to store some static assets in your application like images and the environments folder can be used for environment variables if that's something which doesn't tell you anything you probably don't need it here and these are really just features you have available since the CLI is there to help you with both simple projects when you just get started or build real big enterprise level applications once you get a little bit more experience so it's the app folder which is important for us now and if we go back to the page we created we see app works here now app works that is something we also find if we have a look at this app component dot TS file dot TS for typescript and again we're going to dive deeper into this and see how exactly all these files here works together right at the start of the next section in the course which we will reach shortly if we have a look at this file though we see app works here and even if you don't fully and the rest of this file this seems to be what we see on the page so if we change this to does this change question mark and we get save with and that's important and she serves still running because that process needs to be running all the time since it will watch your files for changes and automatically recompile them and reload your project in the browser you should see does this change in the browser without reloading it since this ng serve window did this for you so dad seems to be the place where we can make a change and this HTML page here probably also has something to do with it because even though the text isn't to be found here instead it is strange double curly braces fing here we clearly see the h1 tag here and if we go back to our application to me this really looks like a heading style with h1 tag and we can confirm this if we inspect that indeed Rome developer tools this is a h1 element containing the dusties change text so that seems to be what angular does for us and as a side note this all shows you how angular changes your HTML code to Dom at runtime because if you have a look at the page source so what was downloaded from this development server spun up through ng serve use use that here we don't have a h1 tag anywhere we simply have to add root element here something to which I will come back shortly which seems to be responsible for loading our app which Danone term seems to replace this content in the page with the content we defined here in this app component HTML file and that is indeed the case in angular we use components to build our web application and the app component is the one component with which we start which defines what we see at the page we load at the first time now let's change more about this page and I'm going to use some feature in which we are going to dive deeper into later in the course but let's say we want to add an input here type text to allow the user to enter some text and then we simply want to output this right below the input now with normal JavaScript you would have to manually set up a listener to any changes of the input value get this value and then somehow get access to this paragraph and output it their angular makes this really simple all you have to do here is add square brackets with parentheses inside of them and then ngmodel in between and again we're going to learn what exactly that means it's an angular command I can tell you that much and then we can bind to name let's say so put name between double quotation marks dad sets up cue web binding and it allows us to bind to a property of our app component type script file which is connected to the HTML file you could say the HTML is what you see and the types could file is your business logic so here we could remove this title property in this class classes are a typescript feature you might know them from our object orientated languages and here we can now add a name property which we initially set to an empty string let's say so name here and name and the HTML file now we set up a connection and as mentioned before we're going to have a closer look at this connection later now let's use the syntax we saw before with the double curly braces which seems to simply output something to the template and let's put name in between here to referencing to this same property if we now save this and again with ng serve still running it will automatically recognize this change and recompile the code and we go back to our application we now see this input field and nothing else but watch what happens if I type my name here if I enter max you see it appear right below this input field and it updates with every keystroke and if we inspect us here we see it here on the right and there you can also see how that gets changed dynamically and this is exactly why you use frameworks like angular with only two lines here and one line here you get something which would require more lines in vanilla JavaScript and more importantly which is managed for you so this connection we up here with ngmodel is now always managed by angular and even if you change some other code that is something which will always update dynamically and even if you were to change name somewhere else let's say you add another input on another component which we're going to add later it would still update this name here if you setup the right connection and this is really what makes angular awesome it allows you to create very reactive applications which updated Omri actively on every keystroke for example with just--all some lines of code here now let's see what this course offers you before we then dive deeper into it and fully understand what we just did here what does this course offer you we're just getting started and we just built and edited our first angular application but of course we didn't fully understand what we did there so that's why in the next lecture we're going to dive into the basics of angular what are components what did we do there with this two-way data-binding and how does that all work this section will answer it and we'll take a very detailed look at it and we'll also explain how all these files you saw in your project are connected to each other well then we're going to have a look at components and data binding two important key features and we actually saw both already in our first application angular apps are built up from components and data binding is simply how you output data in your Dom in the end or as we will also learn react to user events angular has another key feature directives ng model which we used with two-way data-binding actually is such a directive and you will learn more about the built-in directives in this section and also very important build your own directives nice little helpers instructions you can place in your templates in your HTML code which will then do something at runtime depending on the commands you wrote and they're well and after having a look at this we're going to learn more about services and dependency injection a core feature of angular which makes it really easy for you to have your different pieces in your app communicate with each other to centralize code and really to manage the state of your application once we're finished with that it's time to have a look at the routing because thus far we will only have been on one page well we're always on one page since it's a single page application but to the user it really looked like one page with routing we introduced the management of different URLs so that to the user it looks like we're switching pages even though technically we will still remain on that single page sounds great it is and routing shows you how it works then it's time to have a look at observables something which will make more sense once you've been to the routing section it is a concept allowing you to work with asynchronous code angular embraces it it's really powerful and this section explains how it works then we'll have a look at forms because handling forms handling user input is a key task of almost any application and this section takes a very close look at it after we're done with forms we're going to have a look at pipes another nice feature which makes it easy for you to transform the output so what you display on the template at runtime well we're nearing the end but not before having a look at HTTP what if you need to reach out to a web server what if you need to store some data in a database angular can't connect to a database directly but it can connect to a server which is able to nt HTTP section shows just that thereafter we'll have a look at authentication what does authentication mean in an angular application how does it worry and once we're added let's simply implement it in an application then we're going to have a look at some optimizations we can put into place and how we can manage different modules in our application something you will really understand once we are at this point and then we're going to deploy an application learn how we can get our angular application from our local machine to a place in the Internet where we can view it and if that's not enough for you we're also going to have a look at animations and testing angular applications and besides that throughout the whole course we're going to pull a real project putting all these things you learn in the individual sections into practice and therefore seeing how they are used in a real project so with that I feel very confident you're going to be an angular master after finishing this course and I can't wait to start this journey together with you no worries we're about to get started soon but I did mention that we're going to use typescript in this course we already did use it when we changed the first app what is typescript typescript really is just a superset to JavaScript it offers more features than vanilla JavaScript like classes interfaces and very important which gives it the name types strong typing so you define in typescript if a certain variable is a number a string or something else you don't do this in vanilla JavaScript there you have dynamic typing you can have a string variable and then you assign a number and that's totally fine that won't work in typescript it will give you an error and therefore it allows you to write much more robust code which gets checked at the time you write it and not just at the time you run it a great enhancement however typescript doesn't run in the browser so it is compiled to JavaScript in the end and this compilation is handled by the CLI one of the reasons why we need the CLI why we need a project management tool like the CLI now this compilation is really fast and therefore in the end in the browser javascript is going to run we're not writing the angular app in JavaScript though because was technically possible that won't be much fun a lot of the features really only exist in typescript and angular is meant to be used together with typescript that being said you don't have to learn typescript for this course you should be able to pick it up along the way and I do have a whole section giving you a brief introduction into typescript at the end of this course so feel free to jump ahead there go through that section right now if you feel like you need it or throughout the course if you feel like you need some deeper dive into some of the features you see there and you should be fine you should be able to follow along just fine of course if you feel like it feel free to pick up an average course or tutorial focused on typescript so that you have something to look at if something is unclear in this course generally though typescript is an addition to JavaScript not a complete replacement so a lot of the commands will look really familiar Peralta's course I'm often going to start with a brand-new project and you can basically generate this project with ng new however there are two things I will have in this project first of all I will probably have an empty HTML file if not I'm going to provide a starter project in the respective course section and here I will also remove that property in the app component types good file and additionally and that's important I'm going to use bootstrap this CSS framework to have some nice styling out of the box now in general to add frameworks like this in a SIL I project you can import the import in the index.html file so add the link here to the CDN for example or to a local file but there is a more elegant way you can install it with NPM this node package manager we have on our machine since we installed nodejs you can simply open up a terminal and here you can now run in this project folder that's important navigate into this folder and PM install - - save - mark it as a production dependency bootstrap this will now download it and put it into this project folder and then you are able to easily import it there how do you import it there in a CLI project you simply open the angular CLI JSON file this configures your project and there you will have this Styles array it allows you to define some imports of global style sheets which will apply to your whole application it already references these Styles dot CSS file here so that is a nice follower you can add your global Styles your own styles and now we're just going to add a reference there to the bootstrap folder and to the bootstrap CSS file we just downloaded to do this we need to reference this node modules folder which in the end holds all these third-party packages our project users and to go there we need to go up one level because this has to be seen relative on from the index.html file which is a new source folder now we're on the root folder then we visit node modules then we can go to bootstrap and you can find this folder in this node modules folder if you look for it by the way don't be worried about all these packages here they won't be needed - deployed once you ship your app to a server most of them are only required for development and the end everything will be bundled into one single file by the CLI so we have bootstrap this folder here then there it will be did this folder CSS and there you should find a bootstrap dot min dot CSS file and that is the default setup I'm going to use Fratus project so if you now run ng surf and again this is just a normal terminal window and then keep ng surf running of course whilst you're working on your project you should see that now we have an empty page basically since I deleted everything else and we do but you should also see that bootstrap is getting imported and you can't help by having a look at the head section these styles here here bootstrap was indeed added so that is the default starting project with which I'm going to start a lot throughout the course you can set it up right now and simply save it so that you can easily copy it for the individual sections or you create it like this whenever I start with a fresh new project again in some sections I'm also going to provide a starter project and with dead let's finally dive into and let's learn how all these files are connected and how we can build awesome angular applications so now that we get started with this course and with angular and our project we're going to use in this course it's time to dive deeper into angular to understand what it really does what happens behind the scenes how an angular app gets started in the first place and which base building blocks it offers us how we can build angular apps and which features we may use for this by the end of the section you will understand how you can build your basic angular application what it then does and what you need to change to reach a different result so with this let's dive into it and let's start by having a look what actually happens when we visit this page in the browser when we reload this page how does angular get started what do we actually see here besides nothing because there is more to this page than it might look like CEL Dez's the page as we see it right now in the project we created at the end of the last section a empty page here angular the complete guide we reach it at localhost 4200 this is where our development server hosted by the C lie or spun up by the CLI will host our angular application now the content we see here can be changed by going to the app component HTML file in our app folder and in here we can output some text let's say I'm in the app component here in an H Freitag a normal HTML tag therefore if we save this we will see it here and it automatically has the bootstrap text style and so on because we added bootstrap at the end of the last section to you but less it might seem kind of obvious that did we see it here it is also kind of strange how does our browser or how does the server hosting our app know that it should render the content of app component HTML here you could argue it's the only component we have right now and we will take a closer look at component soon but that is not the reason and actually this is not the file served by the server instead the index.html file here is served by the server and remember that I told you that angular is a framework which allows you to create single page application this is the single page which is served the index.html file now if we have a look at this file we see this is a normal HTML file we define the title we could see on the tab in the browser here and the body of this file is very interesting here we get this app root thing with loading dot dot dot in between now clearly we don't see it loading dot dot dot here so somehow this index.html file seems to have changed and did a brute here of course is not a default HTML element instead of this one of our own components we will soon dive into how we create our own components but the seal I created one for us the root component of our application the component which will tie together our whole application in the end and all the files in the app folder here which have component in their name so these files are related to this component I will go into more detail about these files in one of the next lectures for now let's take a closer look at the app component dot T has filed a typescript file here here you can see that we have this add component decorator this seems to be important but more importantly right now you see there we have this select or property which assigns a string as a value and this string holds app root now this clearly is the same text as in our index.html file and this actually is the information angular needed to be able to replace this part here in this index.html file with the template of this component the component having this selector and the template of this component simply is the content here in this app component HTML file now whilst I will dive deeper into how to create components and how to configure them this is what basically happens at the startup though the missing information is how is angular triggered how is it kicked off to actually run over our body here of this index.html file and the answer is in the final index.html file getting served in the browser and we can verify this by inspecting the source code here we get a couple of script imports at the end these are injected by this CLI automatically so that is why we don't see it here in the raw index.html file here we don't have any script imports but whenever it is ng serve process rebuilds our project it will create bundles JavaScript script bundles and automatically add the write imports in the index.html file a little convenience functionality for us so in the final file these script imports here are present and these script imports will contain our own code too so these script files are therefore executed and they are actually the first code to be executed and that is just something you have to keep in mind is the code we write on our main dot TS file that is why it's called main this is the first code which gets executed let's have a closer look at it then here you see that we get a couple of imp words then we check if we are in production mode or not you basically turn off some warning messages I can tell you that but most importantly here this line this now bootstraps starts our angular application by passing a app module Tudor's method and app module refers to this file here now if we have a look at this file here we actually see that somehow we kind of like with the component have two strange at thing here I will dive into this in a couple of lectures too but most importantly for now here we get this bootstrap array which basically lists all the components which should be known to angular at the point of time it analyzes our index.html file and here the circle closes because here we reference our app component so angular gets started this main dot ts file gets started there we bootstrap an angular application and we pass this module as an argument in this module we tell angular hey there is this app component which you should know when you try to start yourself an angular now analyzes the app component reads the set up we pass here and therefore knows this selector a bruit and now angular is able to handle app root in the index.html file and it knows all right this is the selector I know you told me that I should know it because it was listed in this bootstrap array in the app module this component so now I know that here I should insert the app component and the app component happens to have some HTML code a template attached to it which is this a tree attack and this is how the angular application starts here this is why we see what we see now that was a load of information regarding the app startup but it's key to understand how to starts with this information we can now proceed and dive deeper into how components actually work what they are how we can create our own ones and what does app module here does in detail so let's move on in the last lecture we had a closer look at what happens at the point of time we wizard localhost 4200 here in the browser we understood that the index.html file is served that it will contain a bunch of scripts here which can execute it which then basically start the angular app the angular app gets the important information that it should know the app component that it should analyze it with that information the angular code is able to parse this here this app root component here understand it and insert our angular application at this point and that is why we don't see loading dot dot dot which would still be in the source code of this page as you can see but instead why we see this because angular overrides this at run time because there as well what it does what what its job is so now that we had a close look at this startup process let's have a closer look at this component or add components in general components are a key feature in angular you build your whole application by composing it from a couple of components which you create on your own now we do start with this app component the root component you should say which holds our and our entire application basically in the end so this root component this app component will be the component where we later nest or add our other components to so to this template as HTML file off the app component this is where we will layer add our other components typically we might have a web page like this with header with home and users than a main area and a sidebar maybe now if we have a look this would be a fitting component the header and maybe also the items on the header could be their own component could be you don't have to you will learn throughout the course how I approach the splitting app of an application into separate components we also have of course our main area and a sidebar here as components and data stick or idea behind angular build component each component has its own template its own HTML code may be its own styling and more importantly also its own business logic and this is the great benefit it allows you to split up your complex application your complex webpage into reusable parts you may use a component more than once and that allows you to easily replicate that business logic replicate that styling or in general make a finely controlled piece in your application without having to crunch everything into one single script file one single HTML file instead it's very easy to update very easy to exchange and again reusable so let's have a closer look at how we actually create a component and what does add component thing does in the next lecture components are important that is why we start with one with the app component it on the one hand is a normal angular component but on the other end it's also kind of special because it serves as our root component it's in the N listed here in the app module in this bootstrap array which tells angular haters a special component you should bootstrap the whole application with that component being the root component so all our components we create will not be added to the index.html file their selectors will not be added here their selectors will be added to the app component HTML file because this is now the well root component of our app where we add the other parts enough talking about adding components let's add one let's say we want to output some information about a server we're building a back-end for our server management application and we want to output some server information so I will store this in a new folder which is a subfolder of the app folder because generally in an angular CLI project all your app related content will go into this app folder I will name it server because it will hold my server component and this is a good practice having the folder name equal your component name and each component typically should have its own folder though it's not a hard rule but generally it makes sense so here in the server folder I will add my server component now a good naming convention is to have servers or the name of your component first then a dot and then component we will later learn that there are other building blocks in an angular application too so by using file names like this it's very easy to see what's inside the file and very important don't forget to add dot TS so for typescript because this is what we will write this component in so now we got an empty file for our new component how do we create a component now first of all a component simply is just a class a typescript class so that angular is able to instantiate it to create objects based on the blueprint we set up here you could say so let's export this class so that we can use it outside of this file tube because as I mentioned the four we're going to use our component in the app component for example to add it there so we will add a class here and this class should now be named server component again the naming convention here have the name of the component first server and then also the description component because later we will also learn about other parts which might then be named differently in the angular app this is our class and right now it's a normal typescript class nothing special about it we can't use it like this angular doesn't have all the information it requires so we should add something to it which tells angular that this is not only a normal typescript class but instead something special a component we do this by adding a special decorator decorators are a type good feature which allow you to enhance your classes for example enhance elements you use in your code it's not restricted to classes but here we will use a class decorator it's the component decorator and decorators are always attached by adding an add sign in front of them now this component decorator is not something type struc knows from the start so we have to import it we have to add an import and this import now needs to give us access to components so we need to import component between curly braces because from the file we're going to import this we could import other parts too so we have to specifically pick the component by using this syntax and then it's from and now the package where we import component from is at angular core now angular ships with a couple of packages where it basically groups its functionalities and the core package as the name implies gives us access to some of the core functionalities of angular so with that we import that component nowadays add component decorator is known to typescript so when it parses this file and compile it to JavaScript that is able to understand it now we need to pass a javascript object component decorator to configure it because without any configuration it's still not that valuable to angular but here we can set up some important information which will be stored as metadata for this class in the background then which will tell angler what to do with this class and one important information piece is the selector so basically the HTML tag by which you're able to use this component later in your average component templates we will see this in action soon the selector should be a string and here you may set up any name you want but you should make sure that it is a unique selector that you don't accidentally override a default HTML element or something like this so typically you prefix it with a p' - and then a fitting name like server because it's a server component this is my own selector by which I can now later use this component in my other components HTML files so if that set up the other important piece we need to have is the template and here let's reference another external file I'll come back to another alternative today soon and this external file of course needs to be created so in the same folder I will trade a server dot component and now dot HTML file this will hold the template the HTML code of my component here so here I can now basically add any content I want like for example the server component to start simple and back to the types could file I can now point to this HTML file we need a relative path for this in the end this will all get bundled by web pack so we need to tell it where to find the HTML file well and relative to the typescript file the puff simply is dot slash server dot component dot HTML like this this is pointing to this file with this we created our first component now to use it we need to dive into app module and understand what this does because we need to change something here to use our own component let's do this in the next lecture in the last lecture we created our own component the server component here it's almost ready to be used but to use it we need to change something about our app module what is air marshal angular uses components to build web pages and uses modules to basically bundle different pieces for example components of your app in Q packages now this is kind of an advanced feature but later in the course I will have a whole section about modules for the majority of this course we will only use the app module which is absolutely fine for a lot of projects only in bigger projects you might think about splitting up your app into multiple modules but what does this app watch will do what is a module then well it's a as a set bundle of functionalities of our app and it basically gives angular the information which features does my app have and use as you can see it also is just an empty typescript class like our component and asked component we transform it into something else by adding a decorator here it's the ng module decorator which is also imported from add angular core now in there we see four properties we set up on the object we pass to ng module declarations imports providers and bootstrap we had a look at bootstrap this was responsible for telling angular hey which component should you be aware of at the point of time the whole application starts so which component should you basically recognized in the index.html file and that was the app component now I already mentioned that we won't add any more component selectors to the index.html file that's just not how it works therefore we won't touch the bootstrap array still we added a new component to angular and this new component had now has to be registered here in the module so that angular knows that this component exists because and this is important by default angular will not scan all your files here so if you don't tell it that these server component exists it doesn't know it just creating the file is not enough that is why we have to register it here in the ng module to tell angular hey part of this module and therefore right here of our whole app since we only have this module is this server component we do register new components in this declarations array we already registered the app component here because even though it's also used in bootstrap it also is a part of our app now we also need to add the server component here adding it like this is not enough though because now angular would kind of know that this is part of the app but typescript wouldn't know where to find this type where to find the server component so when we try to bundle our code we would get an error but you can actually see if you save this triggering the recompilation you see that we get an error in the terminal down there that it can't find server component because and this is not angular this is typescript it doesn't know where this file is where to find this class so we need to add import at the top manually pointing to this so we add server component here as a import from dot slash server and then here in the server component and you omit the dot es you don't add dot TS to your import it's just server component so the file name without the extension the extension is added by web pack which bundles our project automatically so with this and it's just so important this is not angular this is a typescript feature now typescript knows where to find this therefore everything can be bundled so therefore now angular when it runs knows that we have a server component and that it is part of our app and with this we can now finally use our component we will do this in the next lecture but maybe you're also wondering what imports and providers does here in the app module I'll come back to providers later and you service a section imports simply allows us to add some other modules to this much because I told you you can split up your app into multiple modules and then you can import these modules to basically make this module a bit leaner and outsource some stuff into another module now I told you that we are going to use one module so what are we importing here some modules built into angular because angular itself is split up into modules so the browser module for example gives us all the base functionality we need to start our app and forms an HTTP module data something I'll come back to in defaults or HTTP section of the course so with this the basics about this module should be clear again we'll dive deeper into this later in the course we also register our own component let's now use it in the next lecture with our component registered let's use it so we have our selector here app server now I told you we are not going to add it to the index.html file there it wouldn't work instead let's go to the app component HTML file the only other HTML file we have right now where we could add it and here I'll add a horizontal line and below this I'll add my app server element here and the shortcut I used here is just a little plug-in called Emmet available for many ideas and editors which gives you a quicker way of writing HTML so here app server is our own selector our own element kind of we created if we now save this it should successfully recompile and if we have a look at our running application you see the server component here our own component being added here so datas how you can use your components then with their selector after adding them to AB module and then well displaying them on the page in the last lectures we learned a lot including the creation of a new component by hand now there also is an alternative to trading it manually when using this Eli you can open a new terminal window or command line leave the ng serve window running that's important don't close it and in this new window we can use some steel I command to also create a new component let's say we want to have our single server component here in an our components are nested into an average component service multiple servers component we can create this manually by adding a service folder with our component or we used to see ly with ng and there we have a generate command which allows us to generate some elements some elements supported by angular one such element is a component so we can create a new component with ng generate component and then passing the name service like this you can also use a shortcut and instead of ng generate component you could say ng g c which does the same so if you hit enter what this will do is it will give you a new folder in your app folder with the name of your component servers and in there you basically find the same files as we had for the app component HTML CSS TS enters spec file which basically is used for testing now I will remove this will later have a section about testing and we'll have a look at the styling later too for now let's say it is in this service component that we want to output our single server well we already have this decorator at the selector app server so in this template of the service component we can overwrite the default text with app server and maybe simply replicate this so that we have two components because remember components are reusable we can use the same component as often as we want by simply using it electorate softness we want so now we have two servers here and with this in our service component you need to make sure that you also update the app module now this seal I should do this automatically which is why you already find the import anti declaration in this file but make sure you really do have it here with this we can go to our service component types good file to check the selector which is app - service and then we can go to our app HTML or app component HTML file and update the selector to use this new component instead of the old one with this if we now saved us and go back to our application it looks almost the same as before we see our single server component twice but if we inspect the code here in the developer tools of Chrome for example you see that we have this outer app servers component this newly created component and in between we have two single app server components and this is how you can nest components and how you can create new components with the CLI and also how you can use components more than once a very important information to really understand how to use components and how to build your app with components now before we dive a little bit deeper into how we can style our components and improve them I want you to practice the things you learned thus far let's do this in the next assignment so with that we learned a couple of important things about how to create components manually or with the CLI how we can nest them into each other that we can use component selectors in any other template of any other component and how we can replicate components by simply using them well multiple times using their selectors multiple times let's dive into how we can actually style them what we can do regarding the style and the template of components thus far we always use the external template file and we haven't done anything regarding the styling of components time to change both now instead of using an external template file you can also use an inline template which means you define the HTML code in the typescript code sounds strange well it's possible we can do this by simply going to our service component here for example and right now we point to this HTML file here now we can change template URL to template one of the two has to be present over a link to external template or just template to define it in this file but each component needs to have a template this is the one property you have to have at all times so with that now I change to template now we can write our template code here so here we could now replicate app server like this maybe twice we have to make sure that we don't wrap this line because this is not supported in a default typescript string and if I now save this we see the same result as before so it looks like nothing changed and that is good in this case because we try to make it look like this but actually we did change the way we set up our template here now we're defining the HTML code in this same file and actually if you want to write multi-line strings here what you probably want if you add more HTML code to it you can switch from a normal string with single quotation marks to using backticks you use JavaScript template expressions to be able to write multi-line strings in between there now so now between the opening and closing backtick you may actually wrap the line and now write your HTML code like this what should you use should you use this approach here of using template or an external file it depends if you have not that much code not that much age Mallicoat using an inline template like this might be fine then you have all the logic in a typescript code and that is absolutely okay but as soon as you have let's say more than three lines of code in the HTML part here in the template using an external file is a good idea to make it easier to follow and easier to understand it is important though to keep in mind that you can use this approach that you can inline your templates and very important that you need to have at least a template in a component you can omit the selector you will later in the routing section learn a different way of loading components without using their selector and you don't have to add styles but templates have to be present so that were templates now let's have a look at these Styles in the next lecture we understood the templates are important and that we can either use them in line here or point to an external file what about styles we also have this style URLs property here and we have these CSS files what can we do with those let's go back to our app component for this here we got a h3 tag and a horizontal line and if we have a look at our application it's not that pretty right the I'm in the app component texture or all the text actually is sitting right on the edge here not super pretty now since we use bootstrap of course we can use some bootstrap classes to enhance this so we could add a div with a container class around it then add a road and this is just using the CSS framework bootstrap so these are some CSS classes provided by the framework nothing angular specific and then we could add a column here access 12 to have one column on all device widths now if we add this we added some styling some normal CSS styling nothing angular specific and our app looks a little bit nicer now this is great but we can also use some tools given to us by angular let's say this I'm in the app component heading here we want to change its style maybe we want to give to some blue color we can do this by going to the app component CSS file which defines the styling for this component and now we can use or write normal CSS code so overwrite the style of the h3 tag and set its color to some blue so maybe judah's dark blue here if we now save this and we have a look at our application you see it's dark blue now this is how you can use this style file this CSS file referenced in the app component here to define the styles for a component now just like we were able to choose between external file and inline code for the template we can do the same for the styling you notice that style URLs is an array here whereas template URL wasn't it is this because we could reference multiple external style sheets here so you could add pointers to other style sheets but besides that I'm going to comment this out you can also set up another property which is just Styles this also takes an array but now it takes an array of strings where you define the style in this string so now in this file here I'm going to use backticks again to be able to write a multi-line expression here and then we could set up a tree here and to really show you that this is different I will set a color cue now let's not say dark blue but you Dodger blue and if I now save this and we go back to the application you see the blue updated because now the inline style is taking over I commented out the other one just like with the template you have to decide which one to use you can't combine stall URLs and styles but both important here has to be an array that's the different to template you must only have one template you may have multiple style files or style definitions and you can choose between inline and external file the rules are basically the same as for the template if you have more code in there using an external file is a good idea if it's a short style definition like this why don't you just put it into T types could fall this is how you can work with templates and styles now are you already a component ninja we learned a lot about components about the templates options we have there and about the styles I want to focus on the last property we see in this component decorator for now the selector I already mentioned that this has to be a unique selector so that you don't override accidentally an already existing element or maybe a component made available by a number of third-party package you use in your project there's one other piece of information about the selector though you don't have to use this type of selector right now our selector is the same selector as we use it in CSS for selecting an element so we have app servers here as an element and this is recognized by angular because the selector which shows is app servers and this basically just looks how you select elements in CSS right we select the h3 element by just typing a tree here we select the app servers element by just typing app service here so that actually works like a CSS selector and therefore you are not limited to selecting by element you could put this into square brackets to use the attribute selector so in CSS you can select elements by attribute by enclosing that attribute in square brackets and now if you save this you would see that our app actually is broken because if we have a look at the error message app servers is an unknown element because now our code angular doesn't recognize app servers anymore because we changed the selector to be an attribute so to make this work again we would have to comment this out or remove it and maybe add a div or any other element a normal HTML element which has an app servers attribute now with this custom attribute added now now the app works again because now angular selects the element by attribute and not by the element itself because we changed this selector a Navarrete --av is to select by and I'm just going to comment this out so that the code is still there for reference to select by class so with a dot at the beginning app servers again just like in CSS so here we can now select by class so let's add a new div here which has a CSS class of app servers which we of course could now also style but besides that it's also recognized by angular as a selector which is why we still see the app now these are all options you have as a sidenote selecting by ID won't work that's not supported by angular and all those pseudo selectors like hover and so on also don't work and you typically use the element style here app servers for components we will soon learn about directives another feature where this is different but for components you typically create your own elements and therefore you don't use that style and you don't use the attribute style instead you use app servers like element but it is important to understand that you are not limited to this and there might be use cases where you want to use a different selector in our little basic first application we're working on where we added a couple of components we covered a lot of key aspects of a basic angular app how it starts and how to use components the base building block of any angular app but thus far we only output static content the server component here that's not super interesting we did even more than that in the first section of this course so let's change this to output some data which is kind of dynamic at least which is not hard-coded into the template time for some data binding what is data binding you could basically translate data binding with communication communication between your typescript code of your component your business logic and the template so what the user sees because you might have some result in your typescript code because you fetched something from a server or finished some calculation which you want to display to the user and the only thing the user sees is the template so we need some kind of communication between both pieces to be able to really well do something in our app that is where data binding comes into play because it is responsible for this communication we get different ways of communication now for example we want to output data from our typescript code in the HTML code in the template we can use string interpolation for this you saw this in the first section of the course it's the syntax with the double curly braces and then some property name or some expression in between or property binding we'll have a closer look at all these forms of course in the next lecture so we will learn what this then is and how it works to send text base it uses these strange square brackets around HTML attributes but again I will come back to this sometimes though the our direction is interesting to you if the user clicks a button you can kind of think of the user clicking this button on the template because again the template is the thing with which the user interacts which he sees and where he is also able to click buttons so if we click a button we maybe want to trigger something in our typescript code so now we need the average rection and we can get this our direction we can react to user events with event binding so we can bind to for example a click event to execute some code whenever it occurs and we also have one additional form of data binding where we combine both directions two-way data binding where we are able to react events and output something at the same time might not be super clear how this works but thatís what we will now have a detailed look at all four forms in the next lectures let's start by having a closer look at string interpolation here in the server component I don't want you output this here in the HT molecule like this I don't want you hard cut the output here it would be realistic that our server component contains information about a specific server so maybe here in the template file we want to output server with ID and then some dynamic ID here is and then the status like offline so we have two dynamic fields here now it what makes sense to kind of derive them in typescript code in a real app that might be derived from HTTP request you make to some back-end or some calculation for now I will hard-coded in here so we might have a server ID and I will assign a value of let's say 10 so a number and I might also have a server status which is a string off line so two different types a string and a number and they were not necessary you could also be very explicit by assigning the type with type scripts feature here of adding a call and after the property name and then the type it will infer it automatically those so this is not required I'm just doing this here for demo purposes so now I want you output these two properties in my template and to get this connection we need to add up data binding because you learned it's all about the communication between your types good code and template so string interpolation is a typically use case here or typical solution for this task here instead of the placeholder I use my double curly braces opening and closing this is the string interpolation syntax and in between these double curly braces you can now write a typescript expression so the easiest expression is to simply reference a property like the server ID and this is a common use case that you only output a property here or the value of the property however it's not the only use case you could also for example here for server simply hard-code a string in there any expression which can be resolved to a string in the end that's the only condition for a string interpolation syntax here so whatever you have between the curly braces in the end that somehow has to return a string so you could also call a method here which returns a string in the end the only avarice friction is you can't write multi-line expressions here you can't write block expressions in here so you can't add a if or a for control structure in here you could use a ternary expression though so this is what you can do now let's also replace the last placeholder and here I will again just reference a property the server status now this is string interpolation in usage and you see that we have an expression which is a string itself and then two other expressions which simply point to properties and again you could also call a method here which returns a string now interesting the server ID is not a string but a number and I just said that string interpolation has to resolve cue a string in the end has to get a string in the end so let's see if this works if we save this with ng surf still running let's also change app server back to app servers to make this work again we see server with ID 10 is offline we see it twice because we repeat this component and each component of course has the same content but we see that string interpolation is working and that it especially is also working here for our number so ID 10 that is not an issue that is working fine because a number can be easily converted into a string so yes you have to get a string in the end or something which can be converted to a string to really be correct here this is how you can use string interpolation and now to really completely example let's say the server's status here is somehow returned in a method get' server status could be the method name this is how you define a method in typescript so you might know this kind of method definition from other languages and here we simply return this server status so we return the property here we could of course have accessed as its directly as we already did but just to demonstrate that you can call a method Here I am calling a method get' server status of course leads to the same output because again all this method does is it returns us a string in the end or something which can be converted to a string that is string interpolation in action in the last lecture we had a look at string interpolation which is a great tool for outputting data in a template now when I have a look at property binding now one important information right away there are a lot of times where you can either use property binding or string interpolation and I will show what I mean in a second let's go to our service component where you manage all the servers and I want to allow the user to add new service at least soon I want to allow that so we will need a button where I say add server on it and I will just add some CSS classes button and button primary to make this button look nice this is all using normal bootstrap CSS classes though nothing to do with angular and you reflect this change in my service component here I also want to comment out the inline template and point to the external template again so template URL should point to my servers component dot HTML file like this so now with this if I saved as we see that button here right now it does make any sense that I'm able to click this button because it doesn't do anything we haven't learned to react to a button click yet so I will add a new property in my typescript code here which I'll name allow new server and set it to false so now this is all the number property holding a boolean value to true or false in this case false because I don't want to allow the user to create a new server and you could again imagine that there's a somehow derived dynamically we will soon work with some dynamic data so in the HTML file here I now want to disable the button and as you probably know there is a disabled attribute you can add like this if we now save this the button is disabled I can't click it that's nice but that's hard-coded into HTML now maybe this allow a new server code here changes however maybe it's not set to disk all the time so then we wouldn't be able to react to this and I can actually demonstrate this why for now in the constructor which is simply a method X cuter at the point of time this component is created by angular by their calling set timeout a normal JavaScript function and here I define after which period of time or after how many milliseconds something should happen so after 2,000 milliseconds which are two seconds I want to execute a function and here I'm using an es six arrow function this syntax might look strange it's almost the same as function like this with the dibs on difference when it comes to handling the this keyword but in the end here you pass the arguments and here you have the function body more importantly in here I can set allow a new server and now this would not work in the average syntax because this would then be referring to something else can set it to true so after two seconds this will be switched to true and since we hard-coded this of course this doesn't affect our button here at all it stays disabled so I want to bind it Q allow a new server so now to make this disabled functional T dynamic we can point to it by enclosing it in square brackets square brackets indicate to angular that we're using property binding that we want to dynamically bind some property and disabled the HTML attribute in the end a normal HTML only sets a specific property on the underlying Dom element you might know that each HTML element you use is parsed by the browser and kind of translate it into an element on the document object model this is totally unrelated to angular and therefore we have an element in this Dom and this element has a couple of properties a lot of these can't even be set through attributes on the HTML element well one of the properties is the disabled property and you can set it through the disabled attribute but here we're not using the disabled attribute anymore with these square brackets we are directly binding to this native disabled property this HTML element has so now we can set this equal to and now between the quotation mark here an expression which for this property resolves to a boolean but for our properties and our type might be required because again you can bind to a lot of properties basically to all the HTML element properties the soon learn that there are also other properties you can bind to so for now I can simply pass a low news server here my property name because this will resolve to true or false exactly the value D disabled T property needs because it has to decide whoever it should be disabled or not so now with that if we reverse this also by adding exclamation mark we made sure that this is only disabled if this is false so if we if allow new server is not true otherwise you would do exactly the opposite so now with the exclamation mark if we go back to the app you see it's disabled but after two seconds let me reload this it becomes enabled because now we're binding to this disabled property this native element property we're binding this to our own typescript property here and the convenient thing is and this is what angular is all about that this will update dynamically so once allow a new server changes this has changed in the Dom so now the button gets enabled one of the main reasons why you use angular it makes it very easy for you to interact with your Dom to change some things there at runtime like we do here that is property binding in place now as I mentioned besides binding to HTML element properties like we do here you can also bind to our properties for example of directives something we haven't learned about yet and your own components something I will also show you later so there's this property binding before moving on to the other two forms of data binding let's find out where you could actually use string interpolation instead of property binding in the last lecture we learned about property binding now if we have the use case that we also want to output the current value of allow new server we could of course use string interpolation to simply output allow a new server and a boolean can also be cast into a string so now we see falls here and after two seconds you see this change to true because we change it in the code nice now this is one of the cases here where you can easily use property binding instead of string interpolation so you could simply bind to a property of this element the inner text property and set this equal to allow a new server now I can remove the string interpolation here inside of the tags and whilst the might look empty now while we set the inner texts we get the same behavior as before because the inner text property of a element is just what's between the opening and closing tag so in this case we were able to easily replace string interpolation with property binding so when should you use which of the two well basically if you want to output something in your template print some text to it use string interpolation if you want to change some property be that of a HTML element or as you later learn of a directive or a component typically use property binding that is how you can differentiate it and you will get a feeling for this once you work your way through the course project and so on so destice one important note I want to make is don't mix property binding and string interpolation you might notice that here we have disabled equals and then we have quotation marks and then directly our property name there are no curly braces between these current quotation marks and there shouldn't be because that will break the app this will not work between the quotation marks off property binding you can and you must already write typescript code so to say a typescript expression which will return the value this property expects so for disabled some expression which returns true or false so just like with string interpolation you may also call a method there but you must not add curly braces in there once it might look we simply use a HTML attribute there we aren't this whole syntax here is a syntax recognized by angular so this is why between the quotation marks you can already and you have already you have to write typescript code because again this whole expression is evaluated by angular mixing in string interpolation will break it string interpolation only works in a normal template not within another expression of that template not within property binding or something like this with that enough about property binding and generally about outputting data in the template let's see how we can react to events in last lectures we learned a lot about how we can use property binding and string interpolation to output data in the template let's now react to events for example we have a button here and after two seconds this button is enabled so would be nice if we could do something once we click the button now I will soon show you how we can actually add a new server how we can add a new replication of our server selector of our server component here for now what I want to do is I want you output something I will remove this text here and instead here I want you output the value of a property I'll create this property and again you may ignore ng on in it for now I will come back to this I will name it server creation status and initially I will say that you know server was created like this now this property can be output wire string interpolation server creation status and I just told you I don't want to continue outputting data we want to listen to events so I promised it will do it I will add another method below here and I will name this method on create server D on at the beginning to kind of make clear that this will be triggered from within my template you don't have to name it on something but it kind of makes it easier to understand who will call this method well the user will basically by doing something some event will call it that is what I want to symbolize with that so in here I will set these server creation status to server was created so the missing piece of course is to call this method and now here is where event binding comes into play we want to listen to this click event here and typically you have to on click attribute on the HTML element where you can now execute some JavaScript code we won't use that with angular though here we have the syntax angular offers us event binding which uses parenthesis like property binding used square brackets for events parentheses are the signal that we're using event binding and here we have to specify the name of the event between the parentheses for example click and you can basically bind to all the events made available by the HTML attribute you're placing this on so if you have on click on Mouse enter you could bind to click mouse enter without the on at the beginning so we bind to the click event and now between the quotation marks we put the code we want to execute once this event occurs now oftentimes you will call a method here so let's do this let's point to the method we want to execute which is on create server with parentheses so this method will now get executed whenever we click the button as a side note you don't have to execute a method here you could also put the code you want to execute right between the quotation marks oftentimes this is not very good because you want to execute more code if some event happens but if all you want to do is set some boolean property to true for example well you can definitely do this in line the template as a general rule though you shouldn't put too much logic into your templates though so now we're binding the click event and we execute the oncreate server method when it occurs so let's see this in action in our application let's reload the page the button gets enabled and now watch this part here if I click the button it changes to server was created because we are triggering our own method here and this is how simple event binding works use parentheses the event name in between and then between the quotation marks the code you want to execute when this event occurs in the last lecture we had a look at event binding now before focusing on two-way binding and explaining what this is there's one other important thing you need to know about event binding let's say before this button we also have a label server name and then more importantly we have an input which we maybe give bootstrap class of form control here I want to allow the user to enter the name of the server which should get created so here we could listen to the input event this is a normal Dom event provided by the input element which is far than ever the user types and here we could execute on update server name because it will be fired on every keystroke so let's add this method to our component here and now I somehow want to output what the user entered right now what the value of this field is now we can do this by passing dollar sign event here and dollar sign event super important is kind of a reserved variable name you can use in the template when using event binding for this event so only between these quotation marks here dollar sign event will simply be the data emitted with that event so input and click our default events provided by the Dom you could say and they ship as some data when they are fired the click event gives us an object which for example holds two coordinates where we clicked and the input event also gives us some data some information about the event now we can capture this data with dollar sign event passed as an argument to the method we're calling or used anywhere between these quotation marks in the code we're executing dollar sign event something to keep in mind reserve the word which gives us access to the event data so now we pass this to on update server name so here we know we will receive this event and this will be of type any for now so now let's simply log it to the console so that we can see it in this debug log if we do this and I now type something here watch the console on the right a couple of outputs were written there for to be precise because I typed four characters did four keystrokes so the input event was fired four times and if we have a look at this event we got a couple of information here for example the target and the target simply is the HTML element on which this event occurred so here on the target since this is an input element if we scroll down we also got the value test and this is what the user entered so what we can do now in our typescript code is we can set a server name property which is an empty string by default and then here an on update server name instead of logging it we could say this server name and we just learned that on the event which is of type event as we now also saw here we have a target and on the target we have a value now this is only available because the target is of type input element though this is why my ID doesn't like it we can explicitly inform it about the type in typescript by adding HTML input element here in front of it like this and again this is just needed to inform typescript that we know that the type off the HTML element of this event will be an HTML input element we do this explicit casting with this syntax with the opening and closing tag of T smaller and greater than sign and to type in between so with that we assign this value to our server name what we can now do is in the HTML file here we can output this for now so a string interpolation we could output the server name below the input if we save doesn't go back to this application and I type test server here you see this dynamically updates below the input this is how you can use this dollar sign event object to fetch the event data now with that let's move on to two-way data-binding to kind of finish this little example up here for now in the last lectures we learned a lot about event binding and property binding now let's combine both to two-way binding we learned that we can get the event data like this for example there is another approach to though if I copy this and uncomment it out and now I replace this input event you have something else you'll find that we have an even easier way of binding to some data with two-way data-binding we combine property and event binding we use it therefore by combining the Sun taxes square brackets and within these parentheses now here we have to use a special directive and we will learn more about directives in a second ng model now we can set this equal to some property defined in our typescript code so to the server name for example this setup will do the following it will trigger on the input event and update the value off server name in our component automatically on the other hand since it is two-way binding it will also update the value of the input element if we change server name somewhere else and I can demonstrate this by going back to the typescript code and setting server name to test server here initially so before it was an empty string now it isn't anymore with this if we go back to the running application you see that the input is pre-populated with that now if for demo purposes I comment in the other input which does not use two-way binding you see that this input is empty because again it's not using two-way binding now if I type something here you see it updates the property name and hence it updates it there where we used string interpolation and the other input but if I type here it's not getting changed in the first input because again we're not using two-way binding there this is what two-way data-binding is a very simple way of binding in both directions and for example of reacting to changes in well the input value here so we'll comment out the first approach I will leave the method in here though even though we're not calling it anymore but with that you now also had a look at two-way binding a nice and easy way of reacting to events in both directions now let's find you now wrap here a little bit more and let's then move on to directives and our core feature of angular she'll with all four forms of data-binding cupboard now let's finish our little demo app for now we get the server name and this is life updated whilst we type due to to a data binding in place here I will comment out this server name here instead I want to display the server name once we clicked this ad server button so once we create the server we should not only say server was created but also name is and then simply add this server name like this so now with this in place we're now using the data we're changing through joy a data binding or if we chose to do so through one-way data binding if we use the other approach which is currently commented out and with this in place now you can see that if I change the server name like this and click Add server we see server was created name is test server to with that we're using all four forms of data binding together with a Java event pointing to listen to the click string interpolation to output the data here property binding to enable this button in the first place after two seconds and two-way binding to fetch our input data so with that we're pretty advanced into the basics of angular we use components we know how they work in general we use how to communicate with our templates from our typescript code and in the Avro direction now there's one more basic feature we have to cover to really be able to build first little applications before we then can dive deeper into the individual building blocks so let's have a look at this next feature soon directives before that time to practice data binding though we're almost done with the basics about angular we learned a lot about components the basic building block of any angular app about how it starts the app how we can communicate with our templates in our components so that we can output data or react to events now there is one other key building block you probably use an any angular app you build directives what our directives directives our instructions in the DOM and we actually already used directives without knowing it components are kind of such instructions in the Dom once we place the selector of our component somewhere in our templates at this point of time we're instructing angular to add the content of our component template and business logic in our types of code in this place where we use the selector this was our instruction angular please add our component in this place and indeed components our directives but directives with a template there are also directives without a template so an example would be the app turned green directive which would be a custom directive we could build we typically add directives with attribute selector but technically the selector of a directive can be configured just like the selector for component so you could also use CSS classes or the element style but again typically you use the attribute style and on this paragraph this directive might simply color the text green you could say so angular would find this instruction here we would have defined our directive with the directive decorator to inform angular that this class holds a directive and there we might have the logic to turn the screen now we will learn how to write our own directives in the section focused on directives in this course but there are a couple of built in directives which are really useful let's take a closer look at how we use them and what they do for us in the next lectures in the example application we built thus far we haven't used any directives besides components which are directives that's important but we haven't used any other directives no built-in directives now let's say one thing we want to do is we only want to show this server was created text here there's no need to have this no server laws create a text to be displayed so it would be nice if we could conditionally show this message and for that we need some help we can use a directive shipping with angular the ng-if directive now it works like a if statement and to be precise it works like this in our service component here where we output these server creation status I will comment this out so that we can still reference this code but now I will add a new paragraph where I simply say server was created server name is bind my server name now if this in place it will still work but now we always see with every keystroke how we changed this server name not really what I want instead I want to output it as soon as we click this button here so what I can do is I can add a directive here and as I said typically directives are added by using an attribute selector and pretty much all the built-in directives use that selector ng-if does and then ng-if is added by adding a start this is important and gee if the star is required because ng if is a structural directive which means it changes the structure of our Dom it either adds this element or it doesn't add it so that's just some extra information for angular the directive itself is just ng if but the star is required without it it will not work correctly so ng is and then we can set up our condition here between the quotation marks for ng if this has to be any expression returning true or false deciding whoever this should be added or not so here it would make sense to add a new property which we name server created and set it to false and we set this to true once the button is clicked so here in oncreate server which is triggered when the button is clicked here we set server created equal to true like that now with this we can go back to our template and simply bind ngf to server created and again this could also call a method which returns true or false or directly perform the check between the quotation marks anything which returns true or false now if this if we save this what you see is that there is no text but if I name this test server - and click the button now the text is added here and the interesting thing is if I reload the app and we inspect our Dom here you see here that's our app server component below that above that is the button but if I click this button a new element was entered here the paragraph and here you see kind of the hook which angular created to know where this should be entered but the important thing is it's really added or removed to or from the Dom it's not there all the time it's not hidden it's just not there which is super important to understand so that's ng if again the start at the beginning indicates that this is a structural directive really changing the Dom as you just saw in the last lecture we had a look at the basic ng of syntax and that's the syntax you're going to use most of the time there is one alternative to it though sometimes you have not only the if condition but also a else condition so here we might want to say server was created server name is something with ng if but we could also add a else block where we don't want to say no server was created now we deleted that exact text for the reason that we don't want to see it but imagine that we do want to show that alternative so no server was created it could be the text here and now we want to show this paragraph only if Angie if is not true or this condition server created is not true we can achieve this by placing a local reference on this element here and local reference is something I will dive deeper into in the understanding components and data binding section of course for now let's think of it as a marker so I will name this no server any name you like same just no server with a capital S and now we need to change the paragraph here to ng template that is a component a directive shipping with angular which you can use to mark places in the Dom and now I will add the paragraph back in this template with the text in between like this so now basically detects you want your output and now with ng template with the local reference this marker on it we mark a certain spot in the template which we want to show conditionally now to show it conditionally we simply enhance ng F by also adding else and then no server so this marker replaced on ng template and that's all the syntax we need if we save this you see no server was created and as soon as I click here that gets replaced web server was created so that is ng if-else a nice little addition in a use case where you have well an Al's condition of course the alternative would always be to simply use ng if with reversed check so with exclamation mark server created but that here is an average alternative now I'm going to delete it you will find an article after the section here though where you can find this code again in case you're interested and we will also use this code in the course project we're going to build I just wanted to highlight that this option exists using ng of like this however is the case you will see most often now let's continue in the last lecture we saw ng-if super useful directive and ngf was a structural directive the other type of directives are attribute directives which are called like this because they really just look like normal HTML attributes without a star basically let's add one on the server component here we output the server status right and the service status always is offline let's mix this up let's say we want to dynamically create this so add the constructor which is such just a built-in method each typescript class has which is called once this component is created and here I will set the service status to a random value I will use the math.random function and this gives us a random number between 0 and 1 a floating point number and if as this is greater than 0.5 I want to set the status to online otherwise I will set it to offline so if that we shouldn't get the same status all the time and now let's check this we see indeed online and offline that's lucky could have of course also been both offline since we have a 50% chance now we have two different statuses here and now let's say we want to change the color of the the background color of this component depending on the service status for this we can use another directive on this wrapping paragraph here I can add it and it's called ng style now that's a built-in directive you can recognize this on the ng at the beginning an ng style that's the directive is pretty useless like this we need to give it some configuration to do something that is why we will use property binding on this directive and it's super important to understand that these square brackets here are not part of the directive name the directive name is just ng style the square brackets indicate that we want to bind to some property on this directive and this property name happens also bng style we will see this in practice on our own directives in the directive section later but super important to understand that property binding is not the same as a directive it's totally different we are binding to a property of the directive this ng style property expects to get a JavaScript object and here we define key value pairs of the style name as the key and the value of the style as their well well you so for example we could find background color and if you want to use this notation with the - you have to wrap it in single quotation marks to make it a valid JavaScript property name or you use the camelcase notation background color like this and then you could set this to red but I don't want to set it to red I want to set it to something depending on the server status so here we could simply call a method get color so that is really mixing now all the things and make it clear that between the quotation marks we are executing types of code years therefore we can of course call a method now get color is a method we can adhere and get color should now let's say return green if the status is online and read otherwise so I will return something first I check the server status so this server status and if this is equal to online using a ternary expression here I will return green otherwise I will return red so get color we will return green or red and this is then assigned as the background color with ng style if we now save this let's have a look at the result we see indeed the running server has a green background and the offline server has a red one so that is working ng style allows us to dynamically update that if I reload you see now Bofur on offline so both are red now and that is the big advantage of ng style it allows you to dine chemically update the styles and of course if the server's status here did change over time it would update the styling respectively so this binding we set up here still is working if the service status here which is responsible for choosing the right color changes it updates the style so that's an G style an attribute directive added like an attribute and in this case all the using property binding to configure it we saw examples for ng style and ng F now something related to ng style is ng class now we learned that ng style allows us to dynamically assign a style now I will also add ng class here and wear ng style allowed us to change the CSS style itself ng class allows us to dynamically add or remove CSS classes so let's create such a class and for this I will first of all add my Styles here and I will use backticks to write as over multiple lines and I will give this a class name of online in which case I want to color the text white so that's all I want to do because I think it's kind of hard to read the black text on the green background so back here ng class also this is the directive also only works as intended when using property binding so let's wrap it in square brackets too and here we also need to pass a JavaScript object and that's just the case for this property of this directive here of course each property you bind to may take a different value like disabled which took true or false so here it's a JavaScript object and ferengi classes object works like this we also have key value pairs the keys are the CSS class names and the values are the conditions determining whether this class should be attached or not so here we have the online class you could also wrap this in single quotation marks if you had a class name with a dash inside of it or something like this and here well I'm going to attach this only if the server is online so only if server status equals online online here is a string between single quotation marks now of course you could also outsource this in a method you call this service status equals online check but here I will write it in line so if this is on line we should attach the CSS class on line two is paragraph otherwise it should not get attached let's view this in a running application Bo are offline so none of the two should have the online CSS class added to it and indeed I can't find the class on any of the two now let's reload and hope that some of them is offline or online excuse me both are so let's check it now we see the online class has been added actually to both of them because this is how ng class works it only adds a CSS class if a certain condition is true and that's an example for an average built-in directive and now a built-in attribute directive with all these directives learned let's now have a look at the last built-in directive for now important one though it's sad that we can click the ad server button but we don't actually add service to our list here right there's list doesn't grow this list is totally static we can change this with the ng 4 directive so let's have a look at how it works in our service component here we right now manually add our app server component twice it would be nicer to have an array of service which adds dynamically so in this service component here I'll add a new property servers and this is an array and here I could have my test server and my test server to maybe and when we trade a new server here I actually want to access this array of servers and push a new server on it and this should of course use the server name I setup now with this I have an array of service it would now be great if we could replicate the app server component as often as needed to have a server for each element in the array so - initially and then a new one for each server we add we can do this I'll get rid of the second app server here and on the first one I will place another directive with a star because this is now also a structural directive changing the dom itself it's the ng 4 directive the ng 4 base syntax looks like this we define a temporary variable for inside a loop with let give it any name you like like server for example and then off servers service here is the property we defined in the typescript file and this will now loop through all elements in this array and assigned individual L to this dynamic server variable so that's just like you might know this Lube from a normal well JavaScript code the for off loop this server variable can now be used in the template but here we don't really need it to be honest we will soon learn in the next course section how we can pass data to our own components to output it there so for now we won't need that but one thing we should see is that if I save this and we go back to our application we still see two because we start with two but if I add more servers you see our list grows and we can click this as often as we want of course the content of the individual server is still static because we can't pass the data like the server name to that component but that is something we will learn in the next course section when we dive deeper into components and we will learn how we can treat our own properties on components we can then set from outside a feature which would be great to have here so let's dive into this in the next course section before doing so though let's practice the things we learned in the last lectures and then let's also set up our course project before we then dive deeper into components and data binding again so see you there awesome you made it to the end of the video which probably means you liked it and hopefully means you'll learn a lot about angular for now if you want to dive deeper as mentioned at the start of this video feel free to join my full guide on angular which you can find on udemy a link with the huge discount as mentioned can be found in the video description would be great seeing there and whatever your decision is hopefully see you in future videos bye you

Channel: Udemy Tech

Views: 157,541

Rating: 4.8784533 out of 5

Keywords: angular 5, angular 5 tutorial, learn angular 5, angular 5 for beginners, angular 5 course, udemy angular, angular udemy, angular 5 tutorials, angular 5 vs react, angular tutorial, angular.js, angular 5 routing, angular 4, angular, angular 4 tutorial, learn angular, angular tutorial for beginners, angularjs, learn angular 4, how to angular, angular coding, what is angular, DesignCourse, Codevolution, Traversy Media, Academind, Programming with Mosh, Maximilian Schwarzmuller

Id: AaNZBrP26LQ

Length: 121min 23sec (7283 seconds)

Published: Sun Mar 04 2018