Learn Angular 7 in 50 Minutes - A Free Beginner's Crash Course

today you're gonna take a crash course into the brand-new angular 7 oh and hey I'd like to point out this videos awesome sponsor Skillshare comm which offers thousands of classes in design coding business and more for instance you're about to watch my angular course but if you're new to JavaScript you might want to watch this javascript beginners course at Skillshare now Skillshare is just ten bucks a month but if you're the first 200 students to use my very exclusive link below in the description here in YouTube then you get the first two months free alright so let's get started hey everyone Gary Simon of course Etro so as always whenever there's a brand new release of angular I do a crash course on it and angular 7 just released I think 24 hours ago and I decided to really whip this up really quickly and it's about 50 minutes long and you're going to learn a lot and I'm going to make the assumption that you've never touched angular before all right so let me just show you and switch over to the browser real quick and I'll show you the project that we're going to learn how to build so this right here is pulling from a public test API so you're gonna learn how to use the HTTP client library to make requests within angular you're also gonna learn about basic template e you're going to learn about routing as well as we can see routing works and also how to utilize forms all right so if I hit submit we can see we have validation that is working and what's really cool we can type all this in and we're able to access all of this information I very quickly alright so for today's question which front-end framework or library do you prefer the most react angular or view let me know in the comments I'll let you know in the first pin comment for my answer to that question also make sure you check out the sponsor as well as my patreon account make sure to subscribe I'll shut up now let's get started alright so let's cover installation obviously the first thing we want to concern ourselves with and so if you're going to install you can get started up with angular with the angular CLI or the command-line interface which is the preferable way to go it makes it very easy a very less or minimal setup work involved in that then you're going to need no js' which is that includes the node package manager or NPM which will allow you to install the angular CLI so if you don't have no js' you want to make sure that you go to node.js org i'm just go to downloads and then download for your operating system reload your command line or console and then you're ready you will be ready to rock this next command so that is MPM install or i for short - g4 global so you only have to do this once I mean is accessible from anywhere in your system and then the name which is angular angular CLI hit enter and let that install I just installed it before starting this recording so I'm all up to date alright so if you just type in after it installs and G I will see it gives us a list of commands you can also run ng and in the name of the command and then - help as it mentions right here for additional flags that you can pass through all right so now with it installed we're gonna go ahead and hop into you wherever you store your code projects and type in ng and the new command that means a new project and then the name of the project so I'm gonna call this ng 7 for angular 7 now once we do this it's gonna ask us would you like to add angular routing all right so why or yes so I'm gonna say yes because I want to have multiple pages and components that we can navigate to and also which style sheet format would you like to use and you can use your arrow keys if you just want straight-up CSS that's fine we'll use SAS which is s CSS here and then hit enter and then I'll go ahead and pause until this is finished ok great it is now finished and what we can do now is CD into that new fault folder ng7 is the name so we're gonna CD into that and then what we're gonna run is ng serve and before doing this though I want to open up my code editor which is Visual Studio code is from Microsoft is free very popular code editor and the way I can open up that if is if you have installed you can just type in code period in the current open that up automatically in that folder that's ready to go all right so then after running that we're gonna run ng serve and then - OH which is a flag for open it will open your default browser HTTP localhost 4200 so this won't take too long so I'm not gonna pause here but basically it's compiling the project that it installed by default when we ran the ng new command and then it's going to open up a browser it's opening up off screen for me and this is the typical kind of ugly angular landing page that we've come to know for I think since angular version 4 or - all right so with this R and you can hit ctrl shift and I you can see there's there's not gonna be no errors everything's ready to go right here alright so let's talk about one of the most basic concepts of angular and again this isn't specific to just angular 7 this is pretty much since angular 2 plus I and that is components all right so the most basic building blocks of your angular 7 app are going to be components and a component consists of three primary elements and that is the HTML template illogic or the code associated with it to make it dynamic and interactive and then also the styling which is like the CSS or the sass if you chose a preprocessor like that so I let's go ahead and go to our code editor real quick alright so I'm gonna hit ctrl + just to make this a little bit larger so that we can see everything that's happening and let's take a look i first at the the project set up in the forest you're gonna spend all your time pretty much in your source for right here alright so we have assets that can go in here we're not gonna touch this for this course and then we're gonna work a lot in the app folder this is where all your components go as well as your services and stuff like that as you can see we have an index.html right here and we could see that we have an app root and basically everything that's coming from this app component ts file the selector apertures here so this is our main component right here I and so you can also see the structure that I mentioned before I'm gonna hit control B to get rid that sidebar momentarily so we can see the way these I component is structured is that we have our imports up at the top and then we have what's called a component decorator alright so the component decorator has a it's an object that has a bunch of configuration settings for this particular component all right so we have a selector which is just a unique name that you can reference the component in different areas of your app we have a template URL which I specifies the actual HTML or the templating section you can also do inline HTML within this component by changing up this properly proper sorry properly property I I forget what the exact name of that is it might be just be template and then you can just write in with backticks multi-line HTML if you want to but I prefer to keep everything kind of structured into different files and then also style use or URLs for this the the sass or the CSS file that you have here and then finally down here we have your component logic as I mentioned so we have those three things you have your your HTML your CSS and then you have your logic right here alright so basically I we're going to be using several different components for our app before we get to that part though I do just want to mention looking at this structure your components will consist of four different files especially when you generate them with the angular command line interface tool the one that this one generated is just a single component called app so it's app dot component dot and then we have a dot HTML so all this HTML right here is in reference to this stuff right here we also have a sass and this is where any of the specific CSS and or the rule sets that are associated or defined in this HTML template will go here we do also by 'we have a global CSS file over here called styles.css so your your page background and you know anything that kind of universal across multiple components can go here and we'll be working in that momentarily and then we have a spec file this is for testing and then our main component logic file right here all right so now let's go ahead and generate four different components that we're going to use for the creation of our fictional app all right so we're gonna go you could just go yeah I think what we'll do instead of just going back to this separate console we'll go to view here and then we'll go to terminal all right and then I'm going to type in here ng and then generate component I'm sorry I'm choking a little bit and then the name of the component alright so in our case we're gonna generate a component called nav that would be kind of like our header and you'll see when you run this it gives you an output it created these four files right here like I mentioned before and it also puts them in a new folder based on the name of the game you gave the component so you can see those files right here and it also updated our app module ts file right here and all it does is it imports it adds this line right here and then adds it as a declaration okay now I typically if you wanted to create your own component from scratch you would have to do this part manually to make sure that it works all right so let's go ahead and I'm going to hit the up arrow key and then just change nav to oh well we'll do the shorthand syntax just so I could show you if you want to save yourself a little bit of time ng g4 generate C for component and then the name so we'll say well create another one called about for a quick about page for instance and then we'll also do it again and create another one for contact all right and then we'll do another one for home all right so now we can see four folders right here and that are ready to go all right so now let's talk a little bit about templating alright so as you know the templating occurs in our HTML files so I you may have noticed that one of the components that we generate what's called nav which is right here so the first step is to visit if we want to get our nav in here and inside of our main component that's displaying in this section we have to go ahead to our app component HTML and then we're going to get rid of everything with exception to this router outlet the router outlet is where I other components will automatically load based on the route that we're currently out you'll see how it works I if that's confusing to you in a second so what we're gonna do is we're gonna put in a custom HTML element based on the name or the selector property of the nav component so the the property name of that selector happens to be app - nav all right so we're gonna save that we're also gonna wrap this in section and so let me show you real momentarily and by the way this is just an HTML element that's gonna allow us to style any content going inside of here so if I go back to our nav and we go to nav component or the main component file will see the selector is app nav so that's where that came from that's how we can kind of nest components into other components all right so let's go ahead back here and then at this point let's specify the HTML to make this navigation work alright so we're gonna go to app or I'm sorry nap component to HTML and get rid of that sidebar I'm gonna make this just a little bit larger here and everything I'm just going to paste this from the written version of this tutorial just because nothing to advance is happening here all we have here is a header and then inside here we have a container and this is gonna allow us is kind of decide at about 80% i shrink the mean layout from the browser edge and then we have a logo or with an a element the one thing that's gonna be a little bit strange if you're new to angular is this attribute right here which is specific to angular seven and well not just angular seven but this has been around for a long time and that is router linked so instead of using H ref to try to navigate to your different components you have to use router link alright so this goes to the home page and we can see this says app title here then also we have a nav element unordered list list items and then we have home about in contact using router link all right so let's say that alright and one thing that I wanted to also talk about wobbler talking about templating is interpolation how do you actually show properties that are defined in the component logic and send it off to be viewed or printed out in the component template well let's say for instance we wanted to change this I let's go ahead and first let me save this we can see now all the other stuff has got been gotten rid of because we deleted it and now we have just the raw ugly HTML from the nab that's being put in or nested in the main app component so let's say for instance we wanted to make this dynamic for some reason and we want to define whatever this value is in the component the nav component TS file well first we do this through interpolation and that basically means just printing out data and you do this by wrapping a property name that's defined in the component logic within these double curly braces right here so the name of the property will say is app title we'll save it it's not going to show anything because it's not yet defined so if a control B we go back to our file right here nap our a nav component TS file we'll go ahead and specify the app title property just inside of our class so app title and if you want to do this typescript way we put a colon and the type of property this is going to be as a string and we bind it to a string and we'll just say my app all right so if we save it when we go back you'll see it says my app right there now you could also do just a straight-up JavaScript way for instance if you just wanted to do app title equals my app that will work why I can't type geez that will work as well all right so we'll just stick because we're this is using typescript we'll just stick to the typescript way for now all right so let's go ahead and make that not look like absolute garbage and make it look like a nice header you know horizontal navbar at the top so that means we're gonna start focusing a little bit on the CSS I'm not going to be sitting here typing out a bunch of CSS I'll be pasting it from the written version this tutorial again that's in the description that you can get so the first thing we'll do instead of going to this sass file specific to here I want to define some of the global CSS rule sets first alright so I'm gonna copy from the written version of this tutorial and paste right here just some very basic rule sets we're just setting some you know the body in HTML elements i text-decoration:none our container that we referenced a container class nothing Crazy's happen we're using display grid just a structure that top nav area from the logo in the the navigation steps stuff like that as well as the section element all right so let's save that and then we're gonna go back and by the way we'll see that some stuff has changed obviously we need to work a little bit more on making that actually work so let's go back to our nav components s CSS file alright so in there once again I'm going to paste in just some rule sets based on sass very simple stuff nothing crazy happening here so if we save this and let me just get this back out to a hundred percent there we go our simple simple simple app so currently none of these work even though we have the router link pointing to a direction we haven't done the setup work to get the routing actually working so let's talk about that so now that we have our navigation let's go ahead and open up the app routing file so when we started this project with the angular command-line interface it asked us after we entered or issued the ng new command it asked us if we wanted to have the router I add into this project and because we said yes it adds this file right here app - routing modular TS and inside of this routes array right here is where you define your individual routes and it's an array of objects alright so we're gonna put in an object here we're gonna put it in a path property so this is a reference to where they're at in the browser location and then I'm gonna make this one just the home route so we're gonna say component and then it's going to be set to home component and in order for that to work we have to first import the home component so import home component from and then we do home home dot component alright so then I we have we have two other routes that we want to do so I'm going to simply just paste those in from the written version because you understand what's happening now so we have our bow component about contact about and contact here and then we'll go ahead also and paste in the other two objects for those respective routes right here and this is what that looks like so we have our path of about and that's set to the about component and then contact is set to the contact of component so there are also some other properties that you can issue with this based on your needs one of the most common use cases would be if you wanted to have URL parameters in here and you usually do that by designating I a colon and in the name of the URL parameter that you want in our case we don't need that but you can always look that up in the official Docs or other tutorials all right so now if you save this we'll go ahead back to our browser and we should see right away homeworks there we go if we got about about works contact works awesome it's ready to go and so the reason it says home works of course is because when you use the CLI to generate these components you'll see that like nav not that but home rather we'll see it's just that there's simple paragraphs with the name of the component that you issued with works at the end all right now in the next several sections we're going to be using our app our home component rather sort of as a testing slash playground section to where I can show you some specific features to angular 7 that you're eventually going to want to learn to know these are common concepts for angular and angular 7 so one of the most used forms of event binding is a click event so you have to need to make your app respond when a user clicks on like a button for instance so how do you do that well let's go ahead and visit our home home component TS file alright and instead of the home tes file sorry we have our I we need to go to the HTML file there we go the template we'll get rid of that and we're just gonna put an h1 element called home know not ho and then I we're gonna put a button element and then the way we we get event binding working is we wrap the name of the particular event in our case this is going to be a clique based event with parentheses and we bind it to a method and we'll call this one first clique all right and then we'll give it a value of click me all right so let's save that and then we're gonna go back to our home component typescript file where our logic will reside so now we create that method that we referenced on the click event called first click and we'll just console.log clicked alright so make sure that both of those files have been saved and we control shift I we have a console up here we'll click it there we go very exciting stuff it worked alright so there are a lot of other different types of click events so from the written tutorial I've put those right here so you can do focus on blur on scroll cut copy paste key up/down Mouse enter a lot of different things that you can do to communicate based on these events to the component logic now let's also talk about angular I class and style binding so sometimes you may need to change the appearance of your UI from your component logic or based on some user interactivity of sorts so there's two ways to do this you could do it through class binding or style binding alright so there are a lot of different methods you can use to control class binding so where I'm not going to cover all of them but it will cover the two most two common use cases for this so let's say that you want to control whether or not a CSS class is applied to a given element update the we'll say we're going to update this h1 element right here in our home component template file to this so I we wrap this time instead of parentheses we're going to be doing brackets and this is based on attribute binding class it dot let's say there's a class called a gray in our sass file and we want to show it based on whether or not a given property that's bound to right here is true or false all right so we're just going to call this h1 style all right so gray is only going to be attached to this h1 class if h1 style a bullion my property equals true all right so let's save that and let's go back to our home component file right here and we're going to set this up right here h1 style it's of type boolean and then equals false by default so when the page loads it's not going to attach that gray class to it all right so when somebody clicks on that button let's remove this line let's say this dot h1 style equals true and then finally let's go ahead and define in this components SAS file that gray class just like this so we're only going to change the color to gray so save all that and we'll go back here and we'll click it there we go of course it doesn't toggle although you could integrate that functionality if you wanted to all right so let's say what if you wanted to control multiple classes on a given element well we use ng class instead in its setup slightly different but it's very easy to use nonetheless so what we'll do is change this up so that this is ng class equals and then we put in an object here and then inside of here each line will represent a different CSS property all right so our CSS class rather so the gray class we'll say is I only going to show for if h1 style is true I'm gonna hit shift all in the down arrow key here to duplicate that and we'll have a second class that we haven't yet defined called large and this will only show up if h1 style is not true or if it's false all right so now let's go back real quickly and we'll add our urghhh class right here so when we go to this it should be real large by default because when it loads up we have that property set to false okay and there we go so now if I click this it obviously removes the large class and adds the great class all right so now what about changing the style all right so I instead of relying on a separate CSS or sass file for classes you can actually change inline CSS through the Styles so let's show you real quickly how you do that so now what we'll have is we'll change this up here to style dot and then the CSS property so we'll say color which is a CSS property and we'll bind it to real quickly I will say h1 style if h1 style is true which is the question mark here then we will say it's gray and then otherwise if not it will be black and as we can see if we click it it works just the same now we can also like there is an ng class there's also an ng style for controlling multiple CSS properties in much the same way so we just simply put in ng style and then we'll take this out and we'll put in oh stop it there we go another object here and then this time it is each line will represent a different CSS property so we'll say h1 style and it will be gray if not then black and then this one will be sighs and we'll say if it doesn't exist then it will be 1 a.m. otherwise 4 a.m. in terms of size alright so we'll save that oh yeah and that's right and that's because I needed to change font size that's the correct CSS property that was a brain for it there so now we click it and there we go awesome awesome stuff so now let's switch topics here and talk about angular 7 services all right so services in angular 7 allow you to define code that six-six that needs to be accessible across multiple components in a central location essentially alright so the way we generate a service file is we're going to come to let me hit control B here we're going to view our terminal and we use our generate command so there's going to be ng g4 generate s4 service and the name we'll call this data alright so then we're going to open up and it tells you this you know exactly what it created and where it created we're going to open this up and right here we're gonna go our data service ts file and it looks very much like a typical component with your imports a decorator in your class here except this is a an injectable decorator instead of a component decorator all right and so now let's create a method just to give this a quick test here so we'll just name this first click again and we're gonna return console.log clicked so we'll save that and then to use this in any of our components will visit the component that we want to access this particular service from and so in our case it will be our home home typescript file we're going to import the data service from the location of the file right there in that line all right and then we're going to in order gain access to it we do what's called deep creating instance of it through dependency injection in the constructor now if that sounds scary and you never heard of it before don't worry it's not really we're just gonna say private data and then it's bound to data service so now whenever we want to access methods and such I from our data service we just reference this dot data dot and then the name of the method all right so in this case our first click method at defined here I probably shouldn't have used the same name but nonetheless this data and we'll see it's showing up automatically for us here first click just like that alright so now we're console logging it in the data service and we'll know it will work or will have worked if we look at the console when we click this alright and there we go we can see that it works and now you you understand the pattern where you can define properties and methods inside of a central location that you can now access from multiple different components all right which is very handy so one of the the obvious use cases for this is this is if you're trying to communicate with a back-end of some sort and you're trying to send or retrieve data maybe from like a REST API so angular comes with its own HTTP library that we will use to communicate with a fake API service to grab some data and then display it in the home template alright so this will take place within that data service that we already generated with a CLI now in order to gain access to this HTTP client library we have to first visit our app module TS file up here right there it's an either source folder and then up here just underneath here it doesn't really matter where you put it we're going to import the HTTP client module from right here which is angular common HTTP and then we add it to the imports array this right here and that's all you have to do you only have to do this once whenever you need to use the HTTP client monke module all right and then I we're gonna visit our app data service file that we created all right so if we want to use and gain access to the HTTP client we have to import it up here so it's the HTTP client this time from angular common HTTP P and then also we're going to once again through dependency injection create an instance of it private we'll call this HTTP HTTP client all right so now we'll get rid of this return we're also going to rename this will say get users we're gonna return this HTTP and we're going to get and then we're going to I'm gonna hit up a just a kind of like a fake API testing service called req re si n you can go to that URL by the way and they give you a bunch of different endpoints that you can use for testing all right and so that's all our data service is right now you could obviously if you had different endpoints you would define them in the form of different methods in this file so now we'll go back to our home component TS file we can see this is now breaking and we're gonna make a few changes so we're gonna store let's delete that on the returned data as an object and we're going to call it users and it's just going to be an object here this first click thing we can now get rid of and ng on tune it so we haven't really discussed what this is this is in an angular lifecycle hook so basically whatever happens here will get executed when this component loads up so that's what we would want to do by default when we visit the home page we want all the users to show up automatically alright so what we do is this data and then we use our get users method that we just created and then we're going to subscribe to the result so we'll say the data and then once we have the data we're going to bind this users which is the the object that we defined above the data alright and also just real quickly let's console.log this data or this tight users rather or you could do it with data as well doesn't really matter all right so let's go ahead back and now you can see automatically we're getting that object that's returned from that endpoint all right we can see there's data here and we have a first name last name an avatar all that good stuff also a pagination and all that alright so now let's make this so that we can actually display this right here in our template so let's go back to our home component HTML template let's get rid of all this stuff here don't need that anymore and we don't need the button and so I'm going to put in any a UL element and we're gonna say ng if so if the users has data in it then only show this UL element along with the elements inside of it and then we're gonna have a list item here and oops there we go in here we're gonna put ng for and this allows you to iterate over an array or an array of objects and so we'll say let user of users and users is the property that we that we defined and we're gonna say users data because if you recall looking at the console log information the stuff that we want is inside of an array called users data and this array of objects so then inside of here we'll say we'll have an image just so to show the the users avatar so we're going to use property binding on the source attribute and we're going to bind that to user dot avatar and then we're going to have just a paragraph element for and we're going to use interpolation user dot first-name and then also we're gonna have user dot last name right here and if I were lucky at all we'll go ahead and let's see go here there we go and now it looks really bad so let's go ahead and style this up alright so we're gonna go into our home component CSS or the sass file get rid of these two rule sets and I'm gonna paste this from the written version of the tutorial nothing crazy happening here just gonna make it look a lot better and there we go awesome awesome stuff all right so now let's talk about angular 7 forms alright so we have our our home page an about page and we're not even gonna mess with this and let me know why I included it but also a Contact Us page so let's create a basic form now we're not going to make this actually send an email but I'm gonna show you how to work with forms and then it would simply be a matter of doing a search on google or figure out how to actually take that data and then send it off to you know maybe an email service of some sort but doing this we're gonna cover validation form validation and displaying the data and actually getting the data from the forms themselves alright so when it comes to angular you have two approaches when it comes to creating forms you have I the template based approach or you have reactive forms as it's called alright so I'm not going to go into the differences too much between these two approaches but reactive forms generally provides you with more control and a form validation could be unit tested with reactive forms whereas they cannot be with the template driven forms so to get started with reactive forms we're going to visit our app module ts file once again and we're going to import the reactive forms module from the angular forms library right here alright and then of course once again we'll take reactive forms module and we'll import it to or add it to our imports array right here once again only has to be done once and then we're going to visit our contact component so it's right here alright so we're going to import three different functions from the angular forms library and that is the form builder the form group and validators so you'll see how these Wall comes into play as we start to add our code here so first before I before we get to structuring the actual forms we're going to put in three different properties so we're gonna create a property called message form and I'm just going to call this type of form that we're gonna do in the contact like a message so it's going to name it message form and we set this to form group so this is a new form group it's just something that's that we imported up here and you'll see how the form group works in a second now we're also going to do dependency injection of our form builder which is also another function that we imported so form builder alright so in our constructor inside of here we'll say this dot message form equals this dot form builder and by the way you can I go to the official Docs and they have this covered in great lengths and then we say the group method and we put in an object here and we're going to put in the actual form fields in their names so name so we're gonna let a person specify their name and then we put in an array and the default value is just going to be empty of the name and then we say validators and this is where your validation rules are set and we'll say dot required alright so this option is required you can also put other different types of validation in here so I would suggest you know looking up with the official Docs for what you can do you can do stuff like minimum and maximum character lengths all that stuff and then also we'll have a text area called message for the actual message and we're going to leave this as the same right here as well and then finally we're gonna create a method down here that's called when somebody submits the form they click the submit button so on submit we'll say this dot submitted equals true so let's create that up here real quickly so we're gonna say submitted equals false and then we also have another one I gonna put success equals false as well you could do that the the types are the the typescript y2 and basically this is going to help us determine if the form has been submitted and success will mean if all these values have been validated and they result to true so then right here we're gonna say if this dot message form dot invalid again you can look up all these potential methods down here in the official documentation for reactive forms then we're simply going to return we're gonna we're not going to allow any code after this point to execute so otherwise we'll say this dot success equals true now in here in this section or after this part right here is where you would ordinarily use or connect to some type of a Candice ended data that's submitted in order for like Amazon s3 three for instance that will allow you to actually send the email so let's save that and then we'll we're done here so then we'll go ahead into our contact let's see our template file right here all right so let's just put in an h1 contact us and then we'll put in a form all right so the action we don't even need an action we're going to put in here form group so we take this particular form we bind it to the name of the form group which is message form that we defined in the component logic and then we're going to say through event binding instead of click this time it's going to be ng submit so on form submission we're gonna call the on submit method that we created simple enough all right then here we're gonna put ih5 and i'm just going to put an NG if and we'll say success and then inside of here we'll say your form is valid so by default this won't show up when you first fit as a contact page it will only show up once they've submitted it and success equals true all right so now let's put in a label here and I'm not gonna have a four attribute I'm just gonna wrap everything in this label and we're gonna say name and then we're gonna have an input typos text and then form control name equals name so this sets this input value that's defined right here alright and then we're gonna have our form validation output right here in this section you can use any type of L on HTML elements that you want I'm going to put div and ng F equals submitted so if submitted equals true then and then also message form dot controls name dot errors so this will only show if is been submitted and if there are errors all right let's give this a class of error and then we're gonna have another one of ng if equals message form dot controls name dot errors dot required all right so this allows you to specify different messages or different outputs based on which validation failed we're only using required here so we're gonna say dot required and we're gonna say your name is required bro there we go all right so that's it for that one let's take this and instead of copying this and making some adjustments I'm just going to copy for this from the written version of the tutorial all right we'll see that all the same we have message and step this time instead of an input text field we have a text area the form control name is message and then all I did is just replace message a replace name right here with message as needed so it's basically exactly the same after that let's put in an input the type is going to be submit all right and the value is send message the class will be CTA for call to action will style that up in a second all right and then also at the very bottom just to output the results I'm going to put in a div ng-if equals submitted class equals results and then we'll put in here a strong element of name and down here we'll have a span element and we'll use interpolation and we gain access to the form properties by message form controls name dot value alright so we'll copy this actually I'll just copy it from the written version over here it's the same thing message and then message has changed right here alright so let's go ahead and save that and before we check it out in the browser I'm going to need to copy the CSS from the written version of the tutorial real quickly and I'll paste that in into this components CSS file right here so let's save that and give this a shot so now if I hit send message there we go your name is required Pro a message is required now what's really cool about this is right when I start typing that goes away and it also shows up automatically down here in the value as I type type hist hit send your form is valid there we go now one final thing I want to talk about is deployment alright so what do you do in exactly to get this deployed well we first to run a command ng build alright and this is just gonna build everything and package it up into a dist folder or short for distribution so now that it's done we can see that there's a new dist folder right here so let's right-click I'm going to reveal an explorer alright so I'll click on this we have our ng7 folder and we can see now that we have our files and these are a little bit large so for production builds what you want to do is run ng build - prod right here and then hit enter and let it rebuild and you'll see how much smaller they these ultimate files are so now we can see based on these file sizes alone they are much smaller than what we had previously and we can see right here only 332 KB for the primary file so if we CD into dist and CD into ng 7 we can a now run HTTP server and you have to have this installed through NPM by the way and we can open this up and we'll see that the app now loads like it normally would so what you ultimately would want to do is take the contents of that ng7 folder that we just ran the HTTP server command on and get that uploaded to a web server or web host of some sort and there's a lot of different deployment tutorials for a lot of different different hosting providers as well for angular specifically perhaps I'll cover that in a different tutorial alright so hopefully enjoyed that it's probably if you're brand new to angular you might be a little bit disoriented but make sure you just stick with it create simple projects and then you can get into more intermediate to advanced topics for me it's like second nature now I love it so make sure you answer today's question which is which front-end framework or library do you prefer the most which is react angular or view let me know in the comments and also if you enjoyed this make sure you subscribe here going to be putting out tons of other content and other angular related content as well in the future so I will see you later goodbye [Music] [Music]

Channel: DesignCourse

Views: 550,130

Rating: 4.9242778 out of 5

Keywords: angular 7, angular 7 tutorial, angular 7 crash course, angular 7 course, free angular course, angular course, angular tutorial, learn angular, learn angular 7, angular 7 example, angular 7 apps, learning angular 7, angular tutorial for beginners, javascript, javascript tutorial, frontend framework, frontend frameworks, javascript course, learn javascript

Id: 5wtnKulcquA

Length: 50min 49sec (3049 seconds)

Published: Mon Oct 22 2018