Learn Angular 6 in 60 Minutes - Free Beginners Crash Course

hey everyone Gary Simon of course zetro so this feels like a strong case of deja vu because I've done this sort of crash course thing with angular 2 there was not a version three so two four five and now six now a lot of people say all great another angular version but really the difference between two four five and six are not very extreme if we're talking about the core fundamentals of how the framework work now of course if we're talking about angularjs or the very first version yes big differences however if you're brand new to angular 2 plus or anything after that then you'll definitely gain something from this sixty minute crash course that we're about to embark on so I'm gonna go ahead and switch to the browser and show you exactly what we're going to build so I'm a strong proponent by the way of learning by example I mean not just that there's a fine line between theory and then showing by example I try to mix both of them I try to explain as much as I possibly can about what we're doing so this is the really quick app there's just like a sidebar here it allows you to click between these and as you can see there's some nice subtle animation there and this is pulling all the data from a free public API okay just for the purpose of experimenting and learning through tutorials so you can see here we click on this we get specific information so what we're going to cover by learning about all this we'll be installing angular 6 with the angular command-line interface understanding and creating components understanding creating services working with HTML CSS in angular 6 working with the angular 6 routing the angular 6 HTTP client and finally animation and how that all works all right so before we begin this is really important make sure you click actually you know that's kind of disingenuous click Subscribe if you really like what I've done alright so don't just blindly subscribe and also click like leave a comment as well not enough people leave comments leave leave a damn comment and let me know what you think maybe what you want to see I'm definitely going to be diving into more angular 6 specific topics after this all right so let's get started all right so the very first thing I want to mention before we begin is there is a completely 100% written version of this crash course that I'm about to take you through and it's located here course tester comm and I'm gonna put a link here in YouTube so that you can follow of course there's a lot of text here but it's gonna contain pretty much all the code not pretty much all the code it will contain every single piece of code that I go through and that way you know for your own you know if you me if you mess up or if you have a typo you can just copy it and see you know if that was the case all right so to get started we're going to first install the angular io or the angular CLI or command-line interface now basically that's the the way that you're going to install angular 6 and it's also going to allow you to do a bunch of other things like generate components services there's there's a bunch that it can do so if you're more interested in and you know expanding upon your angular CLI knowledge then you can come here to the github page and it's going to basically give you documentation and all this good stuff so what we need to do first is we need to install it with a package manager you can use yarn you could use NPM or the node package manager will just use NPM and to check whether or not even have the thing installed go to your command line or your console and type in NPM - V for me it's going to give me I don't know probably an out to hit version of NPM but if it goes unrecognized and you're going to want to go to node.js org and go to the downloads page and then choose the download that you need for your operating system install it with the default options and then reload your command line or console and rerun this command up here and it should work so once you get to that stage then we can go ahead and use MPM to install the angular CLI so npm install - gee that means global you only have to do this once and then forward slash or angular a forward slash CLI and this by the way comes straight from that angular IO website that we were just add so I'm going to pause and let this run through alright and it's done oh and by the way I get a lot of people ask me what are you using for your console here yeah this is on Windows and this is called command or CMD er it's a free consulate later and I also have a video if you search on my youtube channel about how and where to get my particular theme because you can theme this thing alright so once you have the CLI ready to go the way you reference or you call the CLI the angular say lies through just ng and you type that in it's going to give you all the commands and all this stuff to run NPM help as well alright so now we're going to use the angular CLI to create an angular stick project so to do that make sure by the way you're in your code folder or wherever you store your projects alright and so we're gonna run ng we're gonna issue it a new command to create a new project the next parameter is the name of the project so I'm just going to name this ng six alright now in the written tutorial I made it - prod by already have that folder so it won't work it's going to call this project and e6 obviously be the name of whatever you know app you're working on or whatever and then I'm also going to optionally C I say option because right now you can't enter into a January project you're ready to rock there are certain flags though that you can add so these flags I'm going to add I'm going to set the styling as in the CSS by default if you don't add this this part right here it will just use straight-up CSS I want to use the power of sass so we're gonna say style equals s CSS and then also we're going to add the routing flag and so the routing will be added because we want a project that has different page URLs and adding this flag will help create a routing file for us so we hit enter and I'm going to just pause this while this runs through should take about nonono 30 to 45 seconds and I'll come back alright so once it's finished we can go ahead and hop into it so the name of the project whatever you name it so it was ng six for me all right and now if you're using something like Visual Studio code you can just type in code and a period and hit enter and it will launch a new window of Visual Studio code opened within this ng6 folder or whatever you named it now you can also run ng and the serve command and because we wanted to open the browser after it builds out the project for us we'll put - oh flag for open and so it's a development server and it's located at localhost 4200 which has been standard all the way throughout version 2 of angular so it's gonna pop this up off the side of my screen let me get this up over here and drag it where it needs to be where am I at there we go okay there we are and this is what you should be presented with all right it's just a very simple little landing page that have created here in don't worry we're gonna remove all this very very shortly alright so I just real quickly with this we want this development server to be running but I also will need or in u.s. well if you're following along I another command line or a console opened up another window for us to issue commands so if I drag this up you can see I can right click here and commander and put in new console hit start go back to CD code /n g6 and here we are so now I could toggle between both of these if you're not using you know commander obviously if you're using something like Windows command line you can I run that very easily in terms of having a second die option there for you ok so now with our project here in your code editor of choice I want to talk about the angular 6 project structure so because this is a beginners tutorial we're not going to take a deep dive in every file all that's important for you to understand are the absolute basics and where you're going to be working most of the time so when you view the folder and file structure here it just looks something you know obviously similar to this obviously in the future if you ran the ng new command and you're using a new version the CLI things might be a little bit different here but for the most part you know if you're watching us with the next X months or whatever it should be pretty similar so we have a package.json file generally speaking you're not to be working in here specifically but this will let you know I the version numbers of what version of angular and its libraries that you're working with so you can see this is angular 6 indeed all right and we really don't need to worry about anything else in here for the most part we can see the different commands that we can run with the angular CLI right here so like Angie's we can run NPM start build test etc we're not going to be really be using much of this at all so now the next section or the next most important area for you to understand is in the source folder let me expand this just a bit so in the source folder you have for instance styles and notice that it is dots s CSS for sass and if this if you didn't add that flag this would just be a simple CSS which is fine but if you want the power of you know sass then you would add this flag this right here this file will you add any type of CSS rule sets that will apply to all of the temp the HTML template templating from all components if that's a little bit confusing don't worry you understand shortly also here is our index.html we can see we have this funny selector is custom HTML element called app roots we're going to be working with in this just to import material icons and as well as a custom google web font and then inside of our app folder this is where all of our components are going to reside alright this is we're going to spend most of your time actually coding this is also where we could see that we have this out app or outing file when this was added because we added that routing flag will work in here shortly to define some routes and then we have of course our components which will be stored in separate folders within this app folder and also a app module file and we'll be spending some time in here as well so we'll take a look at this right now because before we tackle components it's worth looking at this file and by the way you may be wondering if you're new to typescript you know what this TS extension is well basically angular 6 uses and has for quite a while not just version 6 typescript and in short typescript provides strong type-checking on JavaScript if you're not sure what it is just go ahead and Google with but basically it kind of adds to your experience of writing JavaScript so what we'll do is I in this app module file the way this works is that generally whenever you're using the angular CLI to generate components services it's automatically going to update this file to import and add them to the ng-model decorator specifically with components and so the components are added to this declarations array right here and as we can see we only have one component for the time being and again if you're not sure what components are we're going to get to that very shortly and then also you're going to find yourself and we will be doing this shortly adding various imports to our import array so when we want to add or use the HTTP client library we're going to add it here when we want to use animations we'll add it here so on and so forth alright so angular 6 components let's take a look at that so a component in angular 6 provides you with the basic building blocks of your angular app so when we use when we use the angular CLI to generate our project like I mentioned before it created a single component and so when you use that CLI to generate components which we're going to do shortly it creates four files and we could see these four files right here for our initial component alright so it has this HTML file all right so this is where all the HTML template in goes and this is the HTML that is or corresponds to this particular component as you can see they're all called app doc component all right and then we have our sass or CSS file which goes there and this is specific to this HTML right here and then also we have a test file we're not going to get into this I just simply because this is a beginners course so you don't have to worry about this spec file right here and then finally we have the actual component file which is app component ES and so basically when it comes to components we'll see that we have up here are our imports by default there's just one it's importing component from an angular core library then we have the second section we have the component decorator all right so we can see that with this squiggly brackets here it's an object with its associated property and value pairs and this defines the important stuff associated with this given component so for instance you will see that we have selector app root right there well if you recall when we looked at our index.html we could see this app root right here so it's simply referencing that given component and it's saying put this component here along with its HTML and its logic to find an app component all right so we'll do this shortly and you'll see how this works even more so it also has template URL property this you know defines this file that's located right here this is where this components template will be located we have style URLs same exact thing and there of course is more properties that you can add here depending on your purposes so near the end of the course we're going to add an animations property to define animations that are specific to this component or a different component rather alright and then finally the third section is right here and this is all about the logic of your component so where you can write here we can see they the CLI generated a title proper property and bound it to a string called app and this is where all your your properties go and it's where can dependency injection takes place which we'll get to shortly and it's also where you define your custom methods and functions and all of that stuff all right so you'll see how this works as we go on so what we want to do now is create or generate our own component and we're going to do several of them and we're gonna do that with the CLI so now hopping back here the way we generate a component with the CLI is to called ng generate well what is it that we want to generate well in this case it's going to be a component and then the name of the component so we'll say sidebar alright now it's going to generate those four files that I talked about the HTML the testing we have the actual component and then a sass file it also updated that app dot module ts file that we looked at all right so if we go back real quickly and we look at that app module file we'll see it added it imported this sidebar component so they're named based on the name that you gave them all right from sidebar component so we'll see there's a new folder that was added called sidebar with those four files so that's pretty much standard how that all works and then of course it was also added to the declarations array right here after app component we have sidebar component so for our particular use case we're going to add a couple more files and/or components rather so on a shorthand method because in some projects you're going to need to generate a lot of these it's simply ng G for generate C for component and then the name so we'll say posts hit the up arrow key users up arrow key and then finally details alright awesome so now we go back and we see all four of our custom components all right so now let's say for instance that we want our particular app to have a sidebar with some icons so the sidebar will always be present in the app and the sidebar component is something that we already generated with a CLI so let's open first our source app app component eight tml file so you see all this boilerplate code and this is what's currently being displayed through ng surf at localhost 4200 let's get rid of that so I'm just gonna ctrl a and delete all of it we're going to add div ID equals container and then we're going to add app - sidebar so we see this custom HTML element and this is based on the components selector value of our sidebar so if we look at sidebar and come to our component file will see selector is app - sidebar so that's how we can embed a component in another components template such as app H or app component IH tml alright so we have first our conceived ID container and then any HTML along with its logic I'm will show up right here alright and then we'll have to the write another column so simply as a very simple two column layout we'll have D by D equals content and then router outlet alright so this is real important not because this was added by the CLI when we added the routing flag and it also generated a routing file again in our source app file right here alright so that's the only HTML that we need for app component HTML file all right so now like if for instance if we go back we're gonna see sidebar works and that's because we've referenced that sidebar HTML into app component HTML file alright next let's go ahead to our sidebar HTML alright this is where it says sidebar work I mean hit ctrl B to get rid of this side and now we're gonna have some HTML in here so we're gonna have a nav element an unordered list and then our first list item is going to be a link here so router linked equals empty so what is router link well instead of using a href we're gonna use router link to direct the user to different routes so right now this is going to work and we'll get that set up during the routing section but we're just going to write the HTML for it for now so inside of here we're going to have some material icons it's not going to have any text or anything so we're gonna say I class equals material - icons and supervised make sure if I yeah I didn't I didn't know I spelled that right user circle alright so what I'll do is just take this from the list item element and then just paste it because we're gonna have two of them and this next one is going to be an icon with the name of message and then the router link is going to go to a page called posts alright so that's all it is for this HTML but in order for this stuff to work for instance if we look at it now we don't want that we're gonna have to import if I bring back the menu control be in the index ID HTML we have to import material icons all right so we're also going to while we're here we're going to add a custom Google web font so to do that we're gonna put it right just before the closing head tag and I'm going to copy off-screen from the written tutorial our custom Google web font called montserrat right here just so you can see the whole thing and then also we'll add material I Oh icons alright so if you want more information about how material IO works in the event that you ever need icons for your project and you want to have to custom design them you can use material die oh and you could just type in what you need like message or whatever there it is and then you click on it when with a selected icon it'll give you the actual HTML to use that just as we were alright so now let's go ahead and go back we'll save this and if we go back to our project we'll see we have our icons now obviously looks like crap so we'll remedy that right now actually with some CSS so what we want to do here first is we're gonna open up our source Styles s CSS and we're going to get pretty much all of our projects CSS done right now so I'm not going to type all this by hand because this isn't a CSS tutorial but just mind you that all of this is available right at that written version of the tutorial at my website of course cetera comm so first we have a body tag here we're just making the background a light grey font family is that that web font we're using and we're using 100 viewport height for the height of the body container and then I'm going to paste in a big bunch of stuff actually not right now I wanted to describe something real quickly for the container which is that container element the ID that we created earlier we're just going to make it a new CSS and grid which is a relatively new way to structure layouts if you're if you've never seen display grid before do a search on my channel I've or website I've done I've covered the CSS grid multiple times so if this stuff looks kind of confusing like grid template columns don't worry it's just basically saying we want that first sidebar column to be 70 pixels and then the other side will be auto it'll automatically fill the browser all right and then because we're using sass we're gonna need to nest these rule sets in here and so now I'm just going to finish it off by copying and pasting from the written tutorial all of this stuff and don't worry it's it's nothing complex is happening here that you need to worry about we're just referencing the content ID some of this stuff this HTML doesn't yet exist but we're going to write it very shortly but these are the rule sets for it nothing complex is happening here at all alright so we'll save that and then we're going to finally our last bit of CSS for this whole project will be in our sidebar CSS file or sass file alright so once again from the tutorial the written version I'm just gonna paste in some here it's only 24 lines very minimal we're just referencing a nav element unordered list element and that's it alright so now if we go ahead and go back to our browser tada now it's actually starting to look pretty decent all right okay so what we want to do now is I open up that routing file that we talked about cuz right now if we click on this nothing's gonna happen although something does if we go to control shift in I here in Chrome will have all this stuff because the routes have not been set up so that's why these pages won't load so let's go do that real quickly and we'll go to our app routing module ts file in our source oops let's say there we go in our in our source folder okay so the way this works is basically we're going to import the components that we want to route that's what happens up here first alright so we'll do that real quick so import and we'll say users component from Ford slash users and that's what the CLI generates its own folder and then users you can see it's to give any a suggestion already we want this one alright and then we'll just i replicate this to time so it was control or no shift alt and down we'll do that twice because we want three components in here details component also our posts component and these are all the the components that we generated with the CLI so details dot details component and then finally posts and post suck component so now the red squiggly lines should have gone away now next this is where within this routes array this is where we define all of our eye routes right here and they happen as an array of objects so let's open this up and we'll put our first route here so each route will take a path ie you know where exactly you'd like to Brad the URL of where it's kind of weak to be this initial path will just be the path that loads when the app loads so we're leaving it blank you can kind of think of it like you know if it was just a forward slash route and then we have a component property and this tells us which component will reside at that path well for us we want to show all the users when it loads up so we'll just copy this user's component and there we go so we're not done there yet we want to have two more paths so what I'll do just copy this and then paste that twice all right so for this path we're gonna have four words slot or details /id so notice we put that colon ID so this is basically a URL parameter and we don't know what the ID is going to be but we can refer to it by the name ID in the future as you will see a little bit later on alright so then we'll say this is the details component and then we're just gonna have another route called posts and this will be post component all right very very simple and that's all we need to do there okay so now let's talk about services so for our users component we want to fetch a list of users from a public API so to do that we're going to use the angular CLI to generate a service for us much in the same way that we use it to generate a component so let's go back here ng generate what do we want to generate a service and what do we wouldn't want to name it I'll just call it data and this time it generates just two files the test file and the actual service file itself in this time it's not it does not create a folder it just sticks it straight in the app folder so data dot service RTS all right so let's go ahead and open up our new service file and see what that looks like all right so the purpose of the service files makes it so that if we have any type of reusable code that we want access through you know by all of our components then we can create a service out of it all right so when it comes to connecting to an API to try to communicate and get data from like a data base of some sort then you would do it in a service file like this all right so well it does look very similar to a regular component we have our imports up here we have a injectable decorator as compared to a component decorator with its properties and then we also have the logic of our of our service right here all right so now because we want to use this set this service to communicate with an API we're going to use the angular 6 HTTP client so angular comes in comes with a built-in HTTP client so let's import that at the top of this file right here so we're going to import HTTP client it's all one word and then from angular common HTTP so where did I get this information well if you just type in the angular 5 or for angular 6 h-2b library you'll get the official documentation this is where it resides all right so after that we can now inside of the class we can get we can create an instance of this HTTP client through what's called dependency injection so we put it here in the parameters of the constructor private HTTP that's the name of the instance and it's going to be httpclient right here alright then finally we're going to create a custom method that we will call upon in our component called get users all right so we're going to return once a component calls this this dot HTTP and this is all right there this is by using our instance right there dot get and what do we want to get well we're going to use I this this free public API for testing website basically and I'll show you real quickly what this actually is the URL is right here so it's at Jason placeholder dot type I code comm forward slash users if you just get rid of this this is the website for it it's a fake online rest api for testing and prototyping and obviously for doing tutorials so it tells you two different routes and that we can access so they're all right here all right so the first one is users and it just proved it responds with ten different users along with i all their data that we have access to all right so we're gonna copy that and just paste that right in there alright and that's all that we need to do so we'll go ahead and save that and before we can use this HTTP client we have to refer back to our app module file which we looked at earlier so we go to our app module all right we can see all the components that were added here and let's go ahead and import HTTP client module from angular common HTTP and once that's added as an import we can go ahead and add it right here in the imports so put a comma and then HTTP client module alright we'll save that and now let's go ahead and import their service because the service doesn't do anything in and of itself it actually has to be used by a component so we want to use it in this users component so we'll open up the users component TS file control B to get rid of that and we're going to import that service that we just created because we want to use it here in this component so import and this would be data service and that's the name that's exported from it from data service all right now we're also going to import observable from rxjs now if you aren't sure what are X or rxjs is and what observables are I'm not gonna cover it here but I I do have an rxjs free crash course you can check out on my channel but basically it's awesome uh-huh and basically it's going to hold the the data that's returned from the API all right so what we're gonna do now in export class users component here we're going to add a property because remember the logic section of your components holds properties it also holds I allows you to dependency injection that we just did before and also define custom methods and such so we're going to create a property specifically for holding the returned data from the the API so we're going to call this users here and this will be an object all right and then we gain access to our service through dependency injection shall we so we add it here and we create an instance of it we'll call it data and data service so that's what we're creating an instance of up here all right and then finally on ng on an it ng on an it by the way is one of several different lifecycle hooks for angular six components so it's not just angular six by the way in basically this any code that's executed in here will become executed when this component loads and that's on an it so there's a bunch of other ones and I would just advise you to type in angular a lifecycle hooks in Google to find out more so now the way we access the properties and methods define in our data service is through this dot data dot and then we'll see it's only listened to one that we added called get users so what we do when we because we're using observables here as we subscribe to the observable and we say the data we bound to this dot users dot group not dot but equals the returned data right here all right so that's all we have to do so we'll save that now again still nothing's going to happen in the browser we're going to first go to the HTML for our our users component we're gonna get rid of this stuff and notice that says user works if we go back here we'll see this is what's showing up here users works and let's get rid of that stuff so we'll have an h1 element of users an unordered list all right in a list item at now these are something where you're gonna probably I've never seen before if you've never touched angular we're going to put in a stroke with ng for equals let user of users all right so what exactly is happening here well basically this ng4 directive is what allows you to iterate over an array or an array of objects basically so this is the name that will refer to it through interpolation right here all right so I'll show you what interpolation is in a second a router link equals when the the person's name is clicked we're gonna direct it to the details page even if you recall we created that that path in the app routing file and then through interpolation which is done through these double curly brackets we're going to reference user dot ID now the ID is coming from oh did I really close that out one second there we go it's coming from this users API right here where it says ID okay all right say users odd ID and then inside of here in the link Ankur I'll have interpolation again of username all right so we're showing their name and then we're gonna have another unordered list inside of here with the list item of their user email that we'll show and then also another list item I'll shift down and we'll have an a href and this will be equal to HTTP colon slash slash interpolation user dot website and then user dot website right here let's get rid of this extra character there and there we go all right so if we save this with any luck if you set everything up all correctly it's gonna show all those results and it's going to look nice because we redid the CSS and there we go awesome awesome stuff so this is in correspondence to all this data right here so we'll see Clemente Clementina there you go down there now of course if this has clicked it only says details works and it doesn't actually show the user information because we haven't got to that part just yet so let's go ahead and work on fetching more data from this API here so control B and we're gonna go back to our data service file it's up there alright and we'll go ahead and create a couple more here so we're going to copy this get users method and just paste it twice so when we want a single user we'll just say get user singular and we're gonna pass in their ID right there so the ID will be user ID we'll call it and then a hair at the end this is going to be user ID all right so that gives us access just just to a single user all right and then also just for muscle memory we're going to do get posts and we'll work with the posts portion of the API all right so save that and now we're going to go ahead to the details component all right so we'll come up here to our details component all right so I the same thing here we want to import that data service and the observable I don't feel like typing all that out again so we'll just come up here and the users component copy that paste it right here and this time we're also going to have something new and that will be called activated route so import activated route from angular Ford / router alright and you'll see how in what this is and how it works in a second alright so now what we'll do is down here define a property for user and it's going to be of a type object object and then for our constructor we're going to pass in our data service and then we're also going to create an instance of that activated route so private route activated route just like that alright so inside of the constructor we're going to reference that route instance here and we need to get the parameter of the ID that's in the URL so it's four slash users forward slash the actual ID which is a number all right so what we're saying here is this dot route params and we're going to subscribe to them and we'll say params this dot user is equal to the parameters and we named it ID in that the routing file if you recall so let me just bring that up real quick app routing we named it ID all right so that's what that is in reference to right here so that's how you get the parameters that are in the the of the URL all right so then on an it so when this components loads or when somebody clicks on somebody a name from the users component when this loads will say this dot data dot get user and we pass in that ID that we just define so this dot user and we'll say dot subscribe and then we'll pass the data and we'll bind the data of this dot user 2 is equal to data right there okay so next what we'll do is head on over to the this details component file and then we'll say h1 I hate when it does that there we go we'll put in the through interpolation user that name property and then just a quick unordered list and then we'll have a strong element for the username and then we'll put through interpolation user dot username that's one of the properties the API provides and two more times we'll put email and then also phone then email in phone now if then you look we save this and your other files are saved and such we go back here and click on this and there we go we have all the data that's associated with each user awesome awesome stuff all right so for just four more Matt muscle memory let's repeat this process for posts so this sigh this also contains an endpoint for posts let's see with it right here and I'll return hundred items all right so maybe pause it if you want to challenge yourself and you know try to do it yourself but it's repeating the same process if you wanted to make it so that when a user clicks on this little poster this message icon it'll show all the posts from that endpoint but I'll go ahead and do that anyhow so again the process is we define the method in our service wait didn't I already do that and that's a spec file by the way yeah so it's get posts that's what we refer to it as so it's forward slash posts right here in the endpoint and then we're going to go over first we'll go to our details component we're gonna grab some stuff that we're going to need so for our posts we don't need the route this activated we're out here because just just forward slash posts so let's go up here right there import that also import private data service right there and then also we have our posts and then we'll say it's an object here and we'll say within ng on an it we have this data dot get posts and we subscribe to it we pass the data to this dot posts all right so we'll save go to the post component HTML will have h1 of posts and then an unordered list we're going to iterate through ng for let post of posts and then inside of here a router link it's not going to go anywhere I haven't set up a route for this but I did it anyhow post title and then finally our last line will be post stop body save it go back to our result and there we are users posts all that good stuff awesome alright so it would be cool for instance I to make it so that we highlight in some manner which page they're on so this is where class binding comes into play there's also style binding but we're gonna we're going to cover class binding and so what it will allow us to do is to based on a template expression it'll allow us to determine which route we're currently on and if so it will add a class to these list items right here and that will allow us to style it in such a way that it's blue and it will let the user know where they're at currently all right so to do that let's go ahead to our sidebar component file all right and we need access or a way to know which route we're on or which path or page so we're going to import the router and another function called navigation end and we're going to import it from to angular router all right so now we're going to create an instance of the router all right and then inside of here we're gonna say router events we're going to subscribe to it so every time the router has changed or a new path has been you know somebody clicks on a new router link we're going to stay navigation n and we'll say this dot current URL equals underscore URL and this could be named anything you want it to be it's just a real quick easy way this right here hasn't been defined yet that's why there's a red squares a squiggly Ryan and it's just simply a string a current URL of type string all right and so this will contain the path that the user is currently on this current URL right here and the way we use this is in the template so if we go to our template file for sidebar component HTML and we come right here after this router link we can add that class binding right here so we wrap it in brackets and we'll say class dot and then the name of our class and this has already been defined when I pasted that in in the Styles s CSS so we have a class called activated and it's only going to add this if whatever is inside of this what's called a template expression validates to true so if current URL which is the property that we just defined in the components logic is equal to that right there and just the forward slash and then we'll copy this and do the same thing right here alright so this is going to be forward slash posts all right so now if we save this and make sure your component file is saved as well you can see it's now in blue awesome awesome stuff all right so the final thing that we're going to take a look at is just animations all right so let's say for instance I when this page loads here this users page loads we want to have these anime in alright so angular 6 comes with it doesn't come with it you have to install it but they and either has its own and you meet animation library and it is quite powerful and it can be quite confusing to understand at first so just bear that in mind with me but let's go ahead and install it that's a very first step and we're going to do that through the console so we'll type in NPM I'm not Bo on NPM and install angular animations latest and we're gonna save it as a dependency and I'll go ahead and pause alright didn't take very long maybe about eight seconds or so or wait no five seconds and then and now we'll come down here go back to our code editor alright and we're you have to go to our app module file in order for app to be even able to access it so we import it here alright so I'm just going to copy this from the written tutorial real quick or the import statement alright so the import statement here it is in full so we're importing browser animations module from angular platform browser /e animations and then we have to add it as import as well so we copy this put a comma there and then there we go alright now in order for us to use it in one of our components we have to import the various animation functions from the animations library so we want to use it in our users component no not details what am i doing there we go down here in users so I'm going to control B and we're going to add a bunch of imports from the animation functions alright so this is we're gonna import trigger style transition animate keyframes query stagger a lot of these are required but some of them are extra depending on your purposes and so this is all imported from the angular animations path right there alright so now in our component decorator we're going to add in animations property in it's an array so animations and then we open it up in brackets all right so each animation that you define I starts off by using the trigger right here and the trigger accepts a name so trigger what is the name of this animation well whatever we want to happen I so lists tag or we'll call it and by the way I did get this code from a different tutorial that shows you how to do stagger animations which is what we're about to do we'll put a comma here and so this accepts in this second section or parameter right here a bunch of other code that you'll see so everything's going to be contained within this trigger and you can have multiple triggers if you have multiple animation types for the single for a same component so then we're going to define transition alright again this is one of those functions that's imported at the top here and a reason I mention this is because you know if you want more information on how this all this actually works then you can type in you know angular transition function and you'll get the official documentation all right so this accepts in the first parameter we're gonna put a wild-card and we'll have the left stand sign equal to or greater than sign and then another asterisk so what exactly is that alright so basically we're saying that anything here that's going to be defined in the second argument over here will take place when any type of transition occurs from any state going back and forth to any state so to expand on this more if you go to angular IO guide animations it's going to provide you with a really comprehensive overview and we can see transitioning is one of the first things that's covered here and we can see for instance transition inactive to active is one of the names that you can use and these are referred to as states and you'll see if we do a search for a while card that's what we're using and it will provide a more I you know a better understanding to this then I could alright so inside of here we're going to put in a bracket and we'll say query this is another one of those functions that's I returned we're going to say on enter so it's saying basically when something enters like our canoe component then what happens inside of here all right well let's get this I there we go well what will happen inside here is we're going to have a style we're going to define a style and we'll say opacity zero and a transform and we're going to transform and we're going to move things over up on the y-axis by negative 15 so they're gonna fall from the top in alright and then we're going to put a comma here and we're going to stagger them because this is going to be added to a list of items or users rather so we'll have the first argument that accepts is the duration in milliseconds 250 milliseconds they'll fall in so it'll be quite quick and then we'll also accept animate and that's another one of those functions that's added so we'll have animate and this will be 550 milliseconds ease out so you can add you can control the easing and then finally styling we're gonna make it go from the opacity 0 to 1 and then transform translate y 0 pixels and there we go so with any luck I was able to get all this without you know any errors so hopefully you did to all of the disk code here by the ways on the written version now just at the end right here we're going to add a comma on brackets optional true we want to add we'll see if I actually looks like I didn't add that in the right spot I think this has to be real quickly moved up into there yeah it needs to be added right here not down there sorry about that all right and so if you're confused as to what that is if if you don't have that added you'll get an error and so next we're gonna go to query we're gonna have a second query essentially for leave so this only defines two elements started being added and you're defining their styles as they are they're added and where they're going from and to so let's do a leave animation real quickly so we'll take this query and this ends right here and we'll put in a comma right after it and then paste it and this is going to be on leave all right so from leave this actually is is more greatly simplified so I'm actually going to take everything within this query right here and paste this following so on leave we have an animate function with 50 milliseconds and style it'll simply fade out to opacity 0 from one by default up here when it's let me just left alright and so now we'll go ahead and save this and we'll go back to our users component and in order to access this we have to add on will add on the UL element brackets at and then the name of the the the trigger so list stager and we stagger it on our users property and we save this and now if we refresh this we can see they all kind of just fade in from that 15 pixels up and also from zero past eighty to one just like that it's very subtle and of course you can make it more dramatic if you want to but that's in the jist how animations work staggering animations maybe that wasn't the greatest topic for a beginner but you can definitely check out the the documentation that I showed you at the official website to gain a more thorough understanding of how animations work now a lot of times you can get away with using just CSS animations but the the the angular-specific animations really provides you with a lot more power alright so finally now that our app is basically done a very simple app let's say for instance you want to be able to upload this for others to see there's a lot of different ways to do it depends on what you're using is a Sam assume a standard host we would go to our command-line interface and we would type in ng build now I'm going to run two commands actually but the ng build command will take everything and it's going to create a dist folder di studi IST for distribution and as you can see it's added it and if I bring up real quickly the folder here the ng6 dist folder it has the name of it ng6 folder it places inside of the dist folder and then we have all of our stuff all of the stuff that we would upload right here but it's quite large like the vendors that's 3.5 Meg's for simple app that's crazy right so we would add for production ng build - prod now when we do this I it's going to add this prod flag will greatly reduce the size of it and if you have any issues in your code it will be quick to point them out right here like in the details component HTML file it's saying property name user name email phone doesn't exist on type object to fix that we simply go to our details component HTML and we'll wrap this in a div and we'll say if the user object exists then we can do all this stuff in actually show it that's one of those things that you'll have to research when you come into errors like that to figure out how to fix now if we rerun the command hit enter wait for it well now see that it worked and we go back and we look at the file sizes now it's just 339 KB total which is awesome so now that is it alright so hopefully you really learned a lot about the core fundamentals that are behind angular 6 so make sure if you're watching this sometime in the future maybe a couple weeks down the road after it was released that you check out my channel as well as the website for more angular six specific topics and tutorials as I'm definitely going to be getting into more the intermediate and by example type of tutorials alright so like I mentioned before if you like that make sure you hit subscribe right underneath here and then also leave a comment hit like and I'll see you guys real soon bye

Channel: DesignCourse

Views: 546,735

Rating: 4.9180627 out of 5

Keywords: angular, angular 6, angular 6 tutorial, angular 6 course, angular 6 free course, angular 6 lesson, learn angular, learn angular 6, angular 6 apps, angular 6 app, angular 6 from scratch, learn angular 6 from scratch, install angular 6, angular 6 npm, angular 6 components, angular 6 services, angular 6 routing, angular 6 http client, angular 6 http, angular 6 animation, angular 6 animation tutorial, angular 6 routing tutorial

Id: z4JUm0Bq9AM

Length: 62min 48sec (3768 seconds)

Published: Fri Jun 01 2018