The Modern Angular Crash Course - 2022

hello everybody and welcome back to the channel in this video what we're gonna do is learn all about angular now angular is a wonderful framework in order to build complex multi-page front-end applications specifically web applications and we can do so relatively easily now angular is very very big there's actually a lot to learn i'm gonna try to uncover as much as we can within this crash course and this is how we're gonna do it because there's so so much to learn in this crash course what we're gonna do is build three different projects and each project is gonna have more advanced concepts and more you know different concepts than the one previous but at the end of the day if you can complete each one of these projects by the end of it you should be pretty proficient with angular so let's actually begin and introduce the very first project so let's go over here and the very first project is going to be a very simple team generator now this might seem very simple at the surface but it actually is going to take a lot of angular knowledge to do so we're going to learn quite a lot especially if you're a beginner so let me just explain exactly what's going on here so we have this interface right over here and what we can do is well we want to generate teams and what this does is we input a bunch of names and then we state how how many teams we want and then it randomly generates the team so let's just go ahead and do it right now so let's go over here and let's say that hey i you know my name is laith harb so i'm going to add lath harbin here let me add another person michael michael and then michael and michael michael's the first name michael's also the last name pretty pretty weird let's also add vincent um gath let's also add darren joa i'm just like making up names over here so we have four people over here and let's say that we want a we want two teams so we want two teams so what we can do now is say two teams over here and then we can say generate and so what this is going to do is generate two random teams based on the people that we input so over here we have team one and then over here we have team two so for example if we're playing basketball and we don't know you know we want to randomly select our team we could use this application or you know we could use this application if you know we're trying to divide our teams in any sort of way uh so let's just just go through this again i'm just going to put in some gibberish let's put in a lot of people this time and honestly they all start with e let's just put in numbers for now we can also put them whatever our name is is whatever so i'm going to say 6 7 8 9 and then 10 and then 11 and then 12. and then let's say i want a team of uh let's say i want three teams so we should have four members per team i can go ahead and generate that so whoever was number 11 number 12 etc you guys get the point so it's a relatively simple application but there's going to be a lot of things that you're going to learn with angular so i hope you guys are excited now here's the thing i also want to quickly note that we also have error handling over here so if you try to add a name well if you try to add an empty name what happens is we get this error right over here saying name can't be empty so we will have this error so now what we can do is we can add a name let's add four names and now let's say we want to create five teams so we want to create five teams but at this point this doesn't really make any sense we only have four people but we want to generate five teams so that's actually impossible we cannot do that if we had a fifth member then yes we can generate five teams we can just have each person be their own team it doesn't really make sense in this approach but we could allow that to happen but when we have less people than teams then hey this is we can't do this we can't do this so what we can do here is when we press generate we also have another error so now what we can do is we can go ahead and add a member and another thing i want to note is that let's say i we have six people and we want to generate five well in this case it still generates the teams but the teams are gonna be a little bit mismatched so you can see here team one has this team two teams three team four team five so this is again a very simple application but if you don't know angular there's gonna be a ton of stuff that you're gonna learn so that's the first thing and then of course we're gonna move on to bigger and better projects later on so let's go ahead and create this app in this section what we're gonna do is create our first angular application now before we do this we need to make sure that we have a node installed on our local machine so if you don't have node installed go ahead to nodejs.org and then download the version that is recommended for most users it is a relatively easy download so i'm not going to go ahead and show it now once you have that installed what you can do is open up your terminal so either your command prompt on windows or your terminal on mac or linux and what you can do is you can do node dash v and this will give you the version of node that you currently have if you get some sort of error that means well node is not installed in your local machine and you're probably gonna have to go ahead back to this page and debug some things and try to install it again all right so that's the first thing that we need to do and once we have that what we can do is now create our angular application now if we go to the angular documentation you can see here that the first thing we really have to do is install the angular cli what the angular cli is going to allow us to do is have access to n g so let me just zoom in over here n g and ng is going to be used all the time when when creating our angular application so we're going to utilize ng to create our first angular app so we're going to do ng and then new and then whatever my project's name is and this is how we're going to create our first app now in order to access this we need to first install the angular cli so all you have to do is just copy this command go to your terminal and then do npm install dash g for global and then add cli or add angular slash cli now if you are on mac or linux and you're having some sort of permission issues then write sudo and then write your password for your computer and then this should go ahead and download successfully now this is going to take some time and i already installed this so i'm not going to run this command but really you just have to run this command in your terminal for it to work so that is the very first thing that you have to do and once you get once you have that installed what you can do is move into whatever directory you want to create the app in and right now i want to create the app in the desktop directory and over here what you can do is you can do ng new and then whatever your app is called i'm going to call it team app because that's exactly what we're creating so i'm going to say team app and i actually already created this app ahead of time because this is going to take some time but i'm just going to go ahead and say team app 2 and then cancel the download a little bit later so now once you do that it's going to ask you a few questions it's going to ask you hey would you like to add angular routing well this is something that we're going to cover a little bit later in future projects but for now we don't want to have any angular routing because well we're not going to utilize this for the team app so let's just say no for this and then over here it's just asking us hey what kind of style sheet do you want to use you want to use css do you want to use scss do you want to use sas or do you want to use less in most production applications i like to use scss but for now let's just pick css so that is going to go ahead and start creating the app i'm going to do control c to exit out of it but if you can see here it actually created the app for me now of course it didn't finish the app because i i closed it for you you should probably leave it on until it's done installing so once it's done installing you should have a directory in whatever directory you're in right now called team app and what i want you to do is to move into that directory into your terminal so over here what you can do is do an ls and you can see we have a bunch of different files and folders within our new angular application so let's go ahead and open this in a text editor my text editor of choice is vs code of course so i'm going to go ahead and open it up in vs code so i'm going to go here open i'm going to go to desktop directory where is my desktop and i'm going to find team app and i'm just going to go ahead and open it awesome so let me just zoom in here a little bit all right so over here you can see that i have a bunch of files and folders and the main thing that we really have to focus on is this source directory right over here this is where our application is going to live and where a bulk of our work is going to be so we have app we have assets we have a bunch of different things and we're going to cover a lot of these files and directories a little bit later but right now i want to know how we can run our angular application so in order to run our angular application what we are going to do is we are going to go to our package.json so we're going to go to our package.json and we're going to look at these script files so in order to run our application what we have to do is look at this script right over here start and this start script is coinciding to ng serve so this is what we can do we can either say ng serve now that we have installed the cli or we could just do npm run start and what this is going to do is just say ng serve so that is how we're going to start up our angular application so let's open up our integrated vs code terminal and what i'm going to do is again you could do either ng serve or npm run start i'm going to go ahead and do npm run start and over here it's just going to ask you something about you know it wants some analytics google wants some analytics to to improve angular i'm just going to say no for this you can say whatever it is that you want and now this hopefully this doesn't take too too long uh now what it's doing is it's setting up our angular application let's give it some time it shouldn't be too too long to run the app now once this is done and as you can see it has successfully compiled what's going to happen is it's going to run on localhost colon 4200 so 4200 so what we can do is we can go over here we can go over here and go to localhost 4200 and we get this starter angular app so you can see that this is maybe a lot prettier than what we had before but yeah this is the starter angular app now yours might be a little bit smaller something looks like something like this but you got to keep in mind that i always zoom in just for you guys to see so this is the starter angular app and we got it up and running awesome so now let's actually start exploring what is creating well what is creating all these html we're going to start exploring that in the next section we got our angular application up and running but right now it's showing us the boilerplate app so you can see here we have a bunch of boilerplate it does look nice but of course what we want is something like this we want to create this team generator card with this functionality so right now in this section what i want to do is i want to understand where this this this app right here this portion is being built how we can remove it and i want to create the boilerplate for our application so this is being built inside of an html file so let's go over here and inside of the source directory what i want you to do is open up the app directory and you can see here that we have a bunch of files we have app writing routing.module.ts we have app.component.css app.component.html we have the specs file we have the app component.ts file app.modules.ts file now we're not going to get into all of these actually specifically for this project we're only going to talk about this file as well as this file as well as this file and this file over here is for testing and we're actually not going to cover that inside of this crash course maybe i'll have a separate video for this as well and this will be covered in a separate project but don't worry in this crash course as well as this so right now again what i want to focus on is this this as well as this now specifically in this section i want to focus on the app.component.html now this right here this app thing this app directory is housing a component right now you don't have to worry about that but we'll talk about components in great great detail right now you can think of the app as well the whole app the root of our application now in here we have a bunch of files that are doing different things now over here the app.component.html this file is housing the structure of our app component which again is the root of our application and you can see here that we have a bunch of html we have a bunch of styles and as if you scroll all the way down you can see we have a bunch of element html tags so you can see here we have a bunch of that and that right there is building out our boilerplate application and if i went ahead and i scrolled all the way up what i can see is this comments right over here it says that this content below is only placeholder and can be replaced delete the template below to get started with your project so again this is just boilerplate placeholder text that we can utilize so let's go ahead and let's delete this and inside of this file let's actually create the html structure to create this app right over here so let's go ahead and do that right now so once i save this you can see that it auto auto reloaded and now our whole application is empty because we have nothing in our html file so the first thing that i want to do is i want to have a root div that is going to house everything inside of our app so i'm going to have that in there now also what we want is let's create a div for this card right over here so we're going to create a div for this card over here so we can house it so we're going to say here div now in here we're going to have this team generator text so let's have an h1 in there and we're gonna say team jenny ray tour so now if we were to save this you can see that we have that here now of course it's not gonna be as pretty as this because we're not gonna add styling for now we're gonna talk about styling in great detail and how we can incorporate that with angular but for now again we want the boilerplate so now the next thing is this over here now remember this thing is going to be really holding a list of names so what i'm going to do here is right below this i'm going to create a ul for unordered lists so i'm going to go over here and do that and then in here we're going to have multiple li so they're going to have multiple names so we're going to have lathe hard for example and then we're gonna have i don't know another ally maybe like vincent um gatho whatever and we're gonna have you know a list of our names that we're gonna add again this doesn't look very pretty but we're going to worry about this a little bit later now the next thing that we need is we need to have this portion right over here the input as well as this add button so let's go ahead over here and let's actually wrap this in a div and then in here we're just gonna have an input and it's gonna have a text of name or a placeholder of name rather a type of text but a placeholder of name and then we're also gonna have a button that is going to say add so we're going to have that all right so let's go ahead and we're going to save this awesome and now the last thing that we need is this portion over here an input that's saying how many teams that we want and then over here a generate button so let's go ahead and at the very last thing let's create another div and then inside of this div all we need to have is another input let's give it a placeholder of we're going to give it a placeholder of uh hashtag so hashtag so number of teams all right so this is the number of teams that we want and then of course we're gonna have a button and inside of this button we're gonna have uh we're gonna call this generate awesome so we're almost done well this is our app right here pretty hideous doesn't look as good as this of course but hey we got the html structure and that's the most important thing that i want you guys to understand right now again any html structure that we want to add we're going to add it in this file over here now when we have multiple components we're going to have multiple different dot component.html but again this is where the structure of our components are going to live inside of the dot html file awesome so now that we got that out of the way let's actually talk about how we can incorporate styling with angular we now have the html template for our application and of course we added this inside of the app dot component dot html file however our application as you can imagine looks very ugly it is not styled at all eventually what we want is our application to look something like this so i want to have some card i want to have some colors over here you know just overall i want this to be styled better this just doesn't look great so what we're going to do is we're going to learn how we can style our application and our components within angular in this section now typically when we want to style things what we do is we add the styles inside of a css file so let's go over here into our directories let me close the node modules and let's just look for a css file now inside of this app directory i see this app.component.css click into it there's nothing in there at the moment so maybe what we can do is we can add some styles in here awesome so this looks good so maybe this is the file that we need to add our styles into however now if i scroll all the way to the bottom i see this other css file called styles.css so you can see here that this also has nothing within it now what's the difference between this css file and this css file it seems as though well they're both css files so where do i add my styles in do i add it in this file or this file well the answer to that is it depends these right here even though there are style files they have two different purposes and two different functionalities let's start with this one over here the app.component.css file is only going to style elements that exist inside of the app.component.html any elements outside of this component are not going to be styled so what's happening here is the styles are being scoped to all the elements only inside of this file so that is what's happening here so if i have some other html elements that live outside of this file and i want to style them as well well i cannot use this file over here now let's go over here to the styles.css this is where global styles are going to live so if i want to style maybe all of the lis to have a specific style no matter where they are in our application what html file they're in i will add them over here because it will be globally styled let's actually run through an example so right here let's say i want to style the body and i want to style the body so that the background color is dark cyan let's go ahead and save that now let's go over here and you can see that our application turns dark cyan awesome so this seems like it works now i'm going to go ahead and cut this and what i'm going to do is i'm going to go to the app.component.css and let's go ahead and save this first and now you can see it goes back to normal and now in here inside of the app.component.css i'm going to paste in the exact same style and save it now before i reveal what's gonna happen what do you think is gonna happen take a guess i'll give you five quick seconds five four three two one well let's actually take a look nothing hmm that's interesting well this actually makes sense based on the explanation that i gave you guys right here remember anything inside of this file is only going to style the html elements inside of the app.component.html and right here what we're saying is well any body tag any body tag within this file style it and give it a background color of dark cyan so if i were to click on this well you can notice that there is no body tag in here it's only divs h1s lis buttons inputs there's no body tag now the root application has a body tag but it's not going to touch it because well it doesn't live inside of this file now if i were to change maybe this over here to a body and this over here to a body save that you can see now that well that portion right here is being styled so i hope that i hope that makes sense so remember this right here is for scoped styling of the component that we're in and then the styles.css is for global styling and we're actually going to utilize both in this section so let's actually go ahead and let's start with scoped styling to style just these elements we don't want to globally style these because you know maybe the button is going to be a little bit different style different styling across multiple components multiple parts of our application so we're going to scope this within the app.component.css file so to do this what we need to do is we need to add some classes within our elements so let's go ahead and quickly do that right now so we're going to say class container and then over here we're going to say h1 we're going to leave it as is the ul we're gonna give it a class of uh we're gonna give it a class of list and then what we're gonna do over here is we're gonna give this a class of add members container because this is the container so this is the div container that's containing the input as well as the button remember this is the this is this input as well as the add button and what this container is responsible for is of course adding members into this list so that's what that's why i called it that and then in here what we're going to do is we're going to have another class and we're going to just call this input container you can call this more specific but whatever we'll just call it input container all right so that's all we need at the moment and then what we need to do is we need to add our style so let's actually just remove this right now we need to add our style so we can scope it within here now let me tell you something right now i actually shot a a video and we i went ahead and i actually coded it i coded out all the styles from scratch and it just took took too long and i felt like it was taking away focus from angular itself so i actually decided to just reshoot this video and say hey we're just going to copy and paste some styles that's exactly what we're going to do this isn't a css course this is an angular course and what we're going to do is just simply style this just to make it look a little bit better the real premise the real part of this application or this section is to tell you the difference between the app.component.css and the styles.css if you understand that that's really all that matters so let's just go ahead and copy and paste some styles so you can copy and paste some styles by going to my github page and i'll link this in this in the description of course go to o1 team generator go to source and then go to app and then inside of app you can get go to app.component.css and just go ahead and just grab all of the styles let's grab all of these styles some of these styles we're not even utilizing like error message but we will a little bit later so let's just go ahead and paste that in and now what we can do is we can go to our app and you can see that it's looking a little bit better however it's still um you know not that great you know like this looks a little bit different than this now what's the reason for this well the reason for this is that we're for this this application right over here i'm also utilizing an outside library for css and specifically i'm utilizing semantic ui css so there's multiple libraries out there like bootstrap uh bulma and then semantic ui css there's so many different css libraries and what i'm doing here is i'm using that in conjunction to my custom styles so what we need to do is install semantic ui css inside of our application and then somehow apply those styles within our app so let's go ahead and do that right now so in order to do that we need to open up our terminal and let me just go ahead and clear and what we're going to do is we're going to run this command npm install semantic ui css so let's go ahead and run that and i actually already did so i'm not going to do it again so once you do that once you do that you should be able to go to your node modules and if you scroll down all the way to s if you scroll down all the way to s s e over here you can see semantic ui css and then if you open this directory you can go look over here to semantic.css and let me just close this over here and let's go over here you can see here that we have a bunch of different styles so what we want to do is we want to get these styles inside of our application installing it on its own is not going to do anything we want to actually get these styles and put them inside of our application now specifically what i want to do is i want to apply these styles globally so any any uh any class or any div or whatever that has a class of for example ui facebook button active i want to just globally give it these styles so remember with global styles we're going to go here inside of our styles.css so in order to get the styles from here inside of here we have to import these styles so what we can do is we could do an at import and then we can go inside remember we can go inside let's go back here so we need to go inside of the semantic ui css directory and then get the semantic.css so over here what we're going to say we're going to import from the semantic ui css directory and we want everything from the semantic.css file now if i were to save this and go back you can see our application is looking beautiful you can see that is well actually no it's not looking beautiful it's so the styles actually have applied so over here you can see that we have uh the text changed a little bit now the only thing that's missing is this card right over here and the reason why that's not applying is because we didn't apply the css at the moment so what we can do is we can go to our app dot html components and in here what we can say is we can give this the class of ui card and by doing that you can see that now our application has changed now the last thing that we need to do is uh to fix this over here this is looking pretty ugly i don't like these uh these uh these like these style bullet points over here so we actually kind of missed that from the copy and pasting so let's just go over here we're going to say li we're going to say less list styles none we're also going to say font size of 1.25 rams and we're going to say a margin bottom of 0.5 rams let's go ahead and save that and that looks a lot better and there we go we have styled our application our application is now looking really good now that we have added our styles but the issue is well nothing is functional this right here is hard coded this over here if i add anything and then press add it doesn't even work and if i try to generate the teams this doesn't work at all so this isn't functional and yes it looks good but it's completely useless at the moment so what we need to do is well of course we need to add the logic to make this functional now there's quite a bit of logic that we need to add to make it fully functional so let's just take one step at a time so in this section what i want to focus in on is how we can make this portion right over here functional where i can add a name let's add the white howard that's just the name that comes to mind and then when i press add what i want to see is the white howard inside of this list so that is the functionality that i want to add so let's go ahead and implement this but before we implement this we need to think of the current state of our application so what do i mean by that well let's say that this wasn't hard coded and this was something that we actually added at this point the current state of our application is that we have well two names inside of our list so that is the current state of our application and also the current state of our application is that this input is completely empty now let's say a user goes ahead and clicks on the input and adds starts typing the name dwight howard well right now the current state of our application is that the input contains the white howard alright so we need to somehow track this and save this inside of our application now what we want to do is if a user goes ahead and clicks add and this is fully functional and the white howard will come over here right below vincent gaffo now the current state of our application has changed now we have lathe harp vincent gatho and dwight howard so what we need to do is we need a way to store the current state of our application and of course later on we need to somehow manipulate and change the current state of our application so in this section what we're going to do is we're going to focus in on how we can at the moment store the state of our application in future sections we'll talk about how we can change the state but right now we just want to focus in on how we can store the state where are we going to store the state so to store the state of our application we're going to talk about the final file that we are going to look at in this project and that is the app.component.ts this is where the state of our application is going to live now we're also going to have other things in here but for now let's just focus in on the state so how do we declare state we want something like well right here maybe an array of strings and each string of course is going to be the name of the person that's going to be the current state of our app and then over here well the current state maybe is some sort of string for our input so what we need to do is we need to somehow store this well we can store this inside of this class right over here the app component class and right here by default we actually have a piece of state that is stored so title is equal to a team app so that is the initial state of our application so title is equal to team app and later on if we want to utilize the title we can actually use it and it will display team app and if we wanted to change this somehow we can if we want to but for now let's actually just completely omit this so really what i'm trying to say is in here we're going to store the state of our app so the first thing that i want to store is let's go ahead and let's store the input over here so this is this is the new member that we want to add so i want to store that inside over inside of this this class so that we can store our state so right now we can say new member and then we can say the new member and maybe we can even call this something like new member name and initially what we can say is that this is equal to a string so this is equal to a string and so right now the you know by default if i were to refresh this it's going to be completely empty we're going to say that this is equal to an empty string initially the state of our application is going to be an empty string all right and so now of course what we need is an array of strings for this and by default what we want to do is not hard code anything we want to have an empty array so let's go over here and we can just say something like members and this is going to be equal to an empty array initially now one thing i want to note is that remember with angular we're using typescript we're not using javascript and so what we need to do is define the types of these things now the very first piece of state that we have well we actually don't need to define the type because what we did is we declared it to be an empty string so it actually inferred that it's going to be a string type however when we say that when we over here for uh line 10 members when we say that this is going to be equal to an array typescript has no idea well what's going to be inside of that array is it going to be an array of numbers an array of strings an array of booleans it has no idea so what we need to do is tell typescript that this is going to be an array of strings so to do that what we can say is after members you can do colon we can say string but this specifies that this is going to be a string not an array of strings to specify that this is going to be an array of strings we say string and then afterwards we have square brackets and that's simply all we have to do and right now we have the state of our application now of course what we want to do is manipulate that state you know when i type something in here i want to change the state when i press add i want to push that string into this state so let's talk about how to do that in the next section right now we have stored the state of our angular application which is awesome but now we need a way to update and change that state when an event occurs now what do i mean by that well when are we ever going to update this state over here and remember we call the state new member name well we're going to update this when some event occurs now what is the specific event well maybe some sort of typing event so when the user goes ahead and types this when they type this what we want to do is we want to get this value over here and update the state so when a typing event occurs now the name is not exactly typing event but i'm just trying to explain it here uh as well as possible so when some sort of typing event occurs what we want to do is we want to change this state now when do we want to change the member state well when we have some sort of click event on this button specifically and that's exactly what we're going to be talking about how we can handle events so event handling so let's get right into it now specifically let's actually focus in on this event over here when i click on this button i want to run some logic to get this name and add it onto this list so let's just let's just think about exactly how we can do that and once we learn how to do that the way that we handle this event is going to be very very similar all right enough looking back and forth let's actually get to the slides so right now we have a button so we have this button and it says add now again what do we want to do well when a user clicks on this button we want to run some logic to add a new member and we want to add of course this new member right over here inside of this array okay so how do we do this well we do this with the event binding syntax system so right now again we have this button this button element and what we want to say is hey when we click this button we want to run some method that is going to add add that name into that list well how do we specify that well in angular the syntax is something like this so inside of this button tag so remember this look at this is inside of the button tag we're going to specify these round brackets and inside of these round brackets we're going to specify an event now there's multiple different events in angular that we can actually put in here so for example we can have an input event a change event but for this specifically we want to listen for a click event and then when we click this what we want to do is run a method called add and we're going to pass in the member that we want to add of course what we're going to need to do is specify this method inside of our application and i'll show you guys how to do that later but for now i just want you to learn that right now what we have is this this this event that we're listening for and once this event happens on this button we want to execute this method that is the event binding syntax and that's exactly what we're going to do and the difference differences across this change and this change is really over here what we what the event that we're listening for is and what method that we want to execute but at the end of the day it works exactly the same way so let's actually do this let's actually do this one specifically so let's go over let's go over to here so let's go to our where is it our i can't even find it where is it our i where okay yeah so in our app.component.html sorry i wasn't seeing things for a second i want to add this event binding syntax so in here what i want to do is i want to listen for a click so i want to listen for a click so we're going to have our parentheses we're going to say click and then we're going to say that is equal to and then over here we're going to have quotes now one thing i want to note anything in here right after this event binding syntax right after this this uh parentheses this isn't a string this isn't a string please please understand this isn't a string this is actually javascript i know what looks like a string but angular is actually going to interpret this as javascript so just to prove this to you our application is running all fine and dandy right now and you might think that okay this is a string so i'm just going to add whatever if i were to save this our application breaks because what's happening here is that it's interpreting this as javascript and well this isn't any variable or method that we have actually declared inside of our application so we can't put anything this is really javascript so what we can say in here is something like add member and we can just go ahead and invoke this so this is a method that we want to invoke so let's go ahead and save this and now if we go to if we were to go back you can see that this well it still fails okay well why is that well that's because this method doesn't exist now where are we going to have this method where are we going to store this method well we store all the methods and also inside of our app.component file so this file what it contains is the state of our application and any methods that are going to manipulate our state so this is where we're going to store these things and what's going to happen is once we store it in here anything that we have declared inside of the app.component.html is going to go ahead and look inside of the app.component.ts if this doesn't exist in the app.component.ts it's going to throw an error so let's go ahead in here and let's add add member so we're going to go ahead and say add member and well let's go ahead and save this and you can see that now it works perfectly fine all right so that's awesome so now what we're saying is well hey when we click on this we want to add a member we want to invoke this function and let's actually go ahead and let's just to prove that this works let's console.log clicked event whatever console.log something let's open up our inspector let's go over here to our console and let me zoom in here a little bit awesome so it's right here in the very bottom i'm just going to go ahead and click and let me refresh i'm not sure why that's not working all right i'm actually not 100 sure why that's not working we have add member oh okay i know why that's not working i added it on the wrong button sorry apologies about that hopefully you guys caught that i i put it into the generate button not the add button so let's just add that and put it in here sorry about that guys hopefully you guys caught that so now what we can do is we can say add and you can see here that it executed this method isn't that terrific now what do we want to do when we click this of course we don't want to console.log what we want to do is you know we want to push whatever the new member name is into this right over here into members into into the members array so what we can do here is we can say this dot members remember this is a class so we're gonna have to say this dot members to refer to this over here and we're gonna say dot push and we're gonna push whatever this dot new member name is so unless i should go ahead and now console.log the members the members state so if i were to click this button you can see now we have an array with an empty string hope you guys can see that let me zoom in here we have an array with an empty string and so what it's doing is getting this string over here and pushing it in here and so we're changing our state it isn't that incredible of course we don't want to add this empty string but just to prove a point you can see here well we're adding it every single time all right cool so the next step is well what we want to do is eventually type in something press add and then it's going to add well this over here instead of an empty string so what we need to do is we need to change the state of this when somebody is typing something on an input so to do this i kind of encourage you to do this on your own even though the syntax is a little bit different but or yeah well the event type is different and the method is going to be different but really the the way the syntactically is going to be exactly the same so i kind of encourage maybe you can go google what event type i want and maybe you can create a method that just logs it uh so i do i do kind of i do encourage you to do it but i think i i talked long enough for you to pause the video if you really want to do it so let's just go ahead over here i'm just going to make this a little bit prettier and then in here what we want to do is we want to listen to a a specific event now what is the event that we want to listen to now for angular any input event is well going to be called the input event and what this is going to do is it's going to listen for any changes on a specific input and what we want to do is we want to call a function and we can call this function let's just call this function very simply on input and we want to invoke it now in here what we want to do is we want to pass in the current uh state of our input you know the value of our input now to do that what we need to do is we need to give this input an id so we're going to do it over here and it's not going to be like id is equal to this it's going to be very angular syntax we're going to say hashtag and then we're going to say that this is called the people or maybe we even call this add member input and then in here what we can do is we can say add member input dot value so what this is going to do is it's going to take the add member input and look at the value of it the value of it is this over here and it's going to pass it to this add mem this on input method over here let's save that again this is going to fail because remember this is javascript this is not a random string so we need to have an on input uh an on input method inside of our app.component.ts file and so over here we're going to say that this is well we'll just call this a member and we're going to say that the member is a string and then what we're going to do here is we're going to go ahead and we're going to say this dot new member name is equal to member so let's save that and let's also do a console.log console.log we're going to console.log this dot new member name save that all right so now if i were to type here you can see that our input is changing and now if i were to press add you can see that now we have changed our array state and added the appropriate thing isn't that terrific awesome awesome awesome so we learned about state in angular and now we also learned how to manipulate our state when some sort of event occurs in our app so far in our application we were able to store the state as well as update the state on an event well this is cool and all but right what we really want is to display that state inside of our application so for example right now if we have an empty array of this well this string over here should be just displayed in our list and if i were to of course add you know another person well we should have right now we have two strings so far in our application we stored the state and we also managed to update it on an user event so that's all cool however i want to well reflect that state inside of our application it really doesn't do us any good to just store it inside of our code we actually want to display it in the ui so right now for example when i press add well this name over here should be added inside of this list and if i were to add another name press add again well we should have two names this name and this name as well inside of this list right now this is hard-coded so what we're going to do is well we're going to reflect the state that we stored over here inside of our ui so let's go ahead and do that right now so the first thing i want to do is well inside of this list what we want to do is create multiple li elements based on the number of strings we have in our array the number of names we have in our array so the first thing i want to do is i just want to get rid of this and so we we got rid of it and if i were to add this i want to add this name inside of this ul so how do i do that well i do that with structural directives so what do i mean by that well there's two types of directives inside of angular there's structural and then there's attributes so structural directives and we'll talk about this later and this will make a lot of sense when we actually go ahead and code it out but structural directives are things that are going to actually change the html of our application so they're going to structurally change it they're going to add elements remove elements update elements etc they're going to structurally change the html of our app attributes so attribute directives what they're going to do is they're going to change the attributes so for example maybe we have an html we want to an image tag and we want to change the source file so we can use an attribute directive to do this maybe we want to change the class we can use an attribute directive to do this now we're not going to talk about this for now we'll talk about this later for now what we want to do is we want to add a structural directive in order to change our html in the way that it's going to iterate over this array and for each array it's going to create an li and then inside of that li we're going have this name over here so we're going to somehow need to utilize that structural directive so well what structural directive are we going to use well remember what we want here is an li so we want to have an li so what we can do here is we can actually go over here remember we have an array so what we can do is we can iterate over this array and for each uh for each um for each for each name that we have inside of this array what we can do is generate an li and have that name inside of that li and well to do that we can use the structural directive ng4 ng4 so what this is going to do is we're going to specify in here that we want to iterate over the members string the members array over here so we want to iterate over the member string and we can do that by saying let member of members so what we're saying here is we want to iterate over the members string and for each iteration i want to store that specific member in this member variable and for each iteration i also want to generate an li tag so we're iterating over it we're storing the member inside of this member variable and we're generating an li tag now the last thing that we want to do is we'll of course add the name of that member well we can do that dynamically by having these brackets over here these double brackets these double curly brackets and then getting the member that we stored and putting it in there so now if i were to save this and go back now what we can do is add lathe harp and you can see that it created an li and it got that specific element and put it inside of that li so it got my name and put it inside that li if i were to change something to i don't know vincent gatho you can see that it has added isn't that incredible so that right there is the first structural directive that we talked about and this is again going to manipulate the li elements it's going to add li tags inside of our application manipulating our html template now this isn't the only directive there's multiple structural directives that we'll talk about throughout the course but this is the first one so i just thought i can introduce it awesome so we talked a little bit about structural directives in the last video remember structural directives are directives that change the html of our application in some way we introduced of course the ng4 directive right over here that is going to add lli elements for each name inside of our members list but now what we want to do is we want to talk about attribute directives and to introduce attribute directives let's look at a problem with our current application so right now if i were to add the name lathe harb well it adds over here but as you can see the input won't it be nice if it cleared after any ad so that hey i can actually easily add another person if i want to because right now it adds i'm gonna have to go ahead delete it and then maybe add another person so this is kind of a weird user experience so let's go actually to the final version and let's simulate exactly what we want so over here we can say jamal and then if i were to press add i actually want this to clear so how are we going to do this well what is this value right over here well this right here is the value of our input so if i were to go to my input and i were to say value is equal to hello world and save that you can see that the input has an initial value of hello world so you can see that this right here this value attribute is responsible for it's responsible for the value of our input so won't it be nice if somehow some way we can tell that tell the value attribute inside of this input to always be equal to to always be equal to whatever we add inside of the new member name so what we can basically do is we can add something over here and once we press add what happens is we can push the new member's name and then we can do something like this dot new member name is equal to an empty string and this is going to then change the value of this back to an empty string all right so how are we going to do this well what we want to do is we want to change the the attribute of the input the value attribute of the input dynamically so how can we do that well we do that with a well attribute directive remember attribute directives are things that update attributes of specific html elements so you might be thinking okay maybe if i did something like new member new member name well this isn't gonna work because right now all we're doing is we're specifying that the attribute value is equal to new member name it's not actually utilizing the new member name variable right over here so as you can see here that this is just the string so what we need to do is we need to somehow tell it that hey what we want you to do is to refer to the new member name inside of the app.component.ts file and in order to do that well what we can do is wrap this attribute with an array so with these square brackets and by doing this what we're saying is well we're adding an attribute directive and what we're saying is well for the in for the value attribute inside of this input we always want it to be equal to the variable new member name inside of this file over here so let's go ahead and save this and let's give this a go so let's say lathe harp and if i were to add this you can see that it clears out and this attribute is working fine now we can of course update any attribute that we want for example we can also update the class if we want to to i don't know some random variable as well so we could add that in there so any attribute that exists we can actually update that as well so over here just to prove this to you let's go ahead and inspect and let's find which element are we this one right here this input element so you can see here we have this input and if i were to start changing this you can see that we're adding a brand new class so we're adding this class over here so we're now using an attribute directive to update the class so again anything we can update anything we can update the source if this was an image the alt tag if this was an image as well so any attribute we can update it with an attribute directive okay i hope that makes sense and i'll see you guys in the next section we're 90 done our new feature but there's still something missing now to explain what that is what if i decided to press add without adding any user right over here any name well if i press add it seems as though nothing is happening but well things are happening if you remember what we will be doing in this case is adding an empty string inside of our array and because we're using the structural directive for each empty string what we're going to do is we're going to create an li element and have an empty string inside it to prove this to you what we can do is we can go over here and we can go inside of our our uh well we can go inside of the html and let's go here and let's find this ul tag and if i were to open it you can see we have a bunch of li elements with nothing inside it and when of course this is not what we want so what we want to do is if you press add and there's nothing inside of this input it's just an empty string we want to throw some sort of error and not add that inside of our state so let's go to the production version or maybe not production version the complete version and if i decided to press add well nothing should happen and we should get this error message right over here name can't be empty so what we're doing here is nothing really new except for this over here so as you can see nothing was present at the moment but if i were to press this now something is present so we're going to figure out how we can display and not display text conditionally of course so let's go ahead over here and well let's handle this so i think the best way to handle error state is by having well a piece of state inside of our app.component.ts and over here what we can say is error message so we can say error message and we can say that initially the error message is just an empty string and if it's an empty string that means that well there is no error so once we want to add a member so once we want to add a member what we can do is we can check if the new member name is empty or not if it is empty then well what we want to do is not execute this code right over here and let's actually just remove the console.logs so let's remove that so again what we want to do here is we want to have conditional logic so we're going to say here inside of the add member we're going to say well if if this dot so if this dot new member is falsy so by saying this we're saying that if this dot new member is false e and if it's an empty string it will be falsy and thus it will pass this condition if it's falsy what we want to do is we don't want to execute this code so the best way to actually prevent executing this code is simply by stating return and so we're going to return here and not execute this code and to prove this to you we can go back here let's go back and inspect let's go to our ul and right now we have nothing inside it and if i were to press add you can see nothing gets added now if i were to actually add a name now we actually get an li added and this is added over here awesome but now what we want to do is we want to also display the error message so that the user knows exactly what went wrong because right now if we just do this and nothing's happening it's kind of a weird experience we want to display an error message so what we can do in here as well is simply state we can simply change the state of the error message to well whatever message we want so we can say error message is equal to and we can say here name can't be empty all right so now we did that awesome so of course now what we want to do is we want to display this error message well conditionally so let's go in here and what we want to do is let's go all the way to the bottom and inside right here right below the generate so right below this generate what we want to add is a p tag so right here we're going to add a p tag and this is going to display this is going to display the text so inside of the p tag we're going to have the text of error message so whatever this is we're going to display so let's actually save this and in order to get any piece of state inside of our html we have to wrap it with the two curly braces similar to what we have over here so simply now what we can say is we want to display error message now if it's an empty string that's completely fine nothing is going to occur however if if if there is a value in it well we're going to actually go ahead and see this let's also give it a class of error message so we're going to give this a class of error message so let's go here let's save this you can see we don't see it if i do try to click it now we do see it so it seems as though this works perfectly fine and actually this is a completely valid implementation but i want to just quickly again show you something let's go over here and let's look at this p tag so you can as you can see here we have this element let's do a refresh and you can see that the p tag still exists with empty content even if there isn't any error message so i think it would be nice if there is no error just completely omit the p tag i don't even want to see it however if there is an error so if the string is not just an empty string we'll display the p tag with the text i think that would be terrific well what are we doing here well we're updating the structure of our html so in order to do this we need to utilize another structural directive and so we've already utilized the ng4 and remember this is for iterating over an array so we're not going to utilize it over here but instead what we're going to utilize is the ng if directive so over here what we can say is uh star ng if and then we can say here is equal to well these quotes and inside of this quotes we can have any sort of boolean condition so what we can say here is if well error message is truthy which means that there's content inside of the error message if there is no content and it's an empty string this will return falsey and thus we won't actually return this p tag so if this is falsy this condition right here is falsy then we are not going to return the p tag if it's truthy then we are going to actually create the sp tag so let's go ahead and save this and now if i were to go to the body i cannot find oh if i actually try let's see here let's just go all the way here for now so i cannot find the p tag whatsoever it's completely gone it's not there but if i were to press add let's go over here and pay close attention to the html if i were to press add you can see now that we have this new p tag so that is another neat structural directive for conditional rendering awesome and that actually wraps up this feature so we're pretty much done this feature this feature is working completely fine one thing that i might want to do is when i actually add a name successfully maybe we can actually empty this right now and actually completely remove the p tag so what we can do is do that is we can go to add member and if we pass this check if we pass this check you can actually just empty out the error message so we can say something like this dot error message is an empty string so let's just try this again so right now we have the error message but if i were to okay i realize that the name is empty and add it now i don't see that error anymore awesome in this video what we're gonna do is write the logic to generate a team now to explain what i mean by that let's go to the final version over here and let's actually input some names so we already kind of did this so one two three four five six we're just gonna say that the names of these people are numbers and now when we click over here to number of teams and we say three and then generate what it should do is generate three teams and it's going to randomly assign whatever person into each team so these are randomly assigned so what we're going to do is we're going to create the logic to create this data we're going to render this data a little bit later in a future section but in this section we're just going to write out the logic now to be quite honest the logic is actually quite complicated and it actually took me a while to write it out myself and so to alleviate any confusion that you may have i'm going to go through everything in this slideshow i'm going to go through this logic that i'm thinking of implementing inside of a diagram format before we actually go ahead and implement it ourselves so let's just talk about what we have right now so right now we have an array of our members and of course this is representative of this right over here or the elements inside of this list so we have an array of members and this could be anybody lath mike vincent sam edward devin now let's say we want to generate well the teams how are we going to do that well we're going to do that by first asking well how many teams do you want to generate so we actually need to store this state somewhere so this is something that we need to do in order to complete the logic of our application and this isn't that difficult we've actually done this before so we can over here have some sort of uh you know number of teams state and we can also have an on input that changes this as well so okay this is not that difficult and let's say we implemented this and the user says three teams now what so now what do we do well now we have this state and this state and that's really all of the data that we need in order to generate our teams so what do we do in this scenario well this is what i'm thinking i'm thinking let's create three arrays so well you want to create three teams let's create the three arrays one array for each team so this is what i'm thinking and then what i want to do is i want to create a random index so i want to want to do is i want to create a random index that is from that starts from zero so starts from zero and and ends at the length of this array minus one so what do i mean by this well an array right here starts always at zero i hope you guys know that and it ends at the length of the array so one two three four five six minus one so if i say well the index of 5 that's going to be 0 1 2 3 or 0 1 2 3 4 5. so that's going to be devin so i want to generate a random index between 0 and the length of this array minus one and that's always going to correspond to a specific element inside of this array so i want to do this i want to just generate this and let's say let's say we we generated this logic we'll talk about how we can implement this later but let's say the random index is equal to three okay so and again this is completely random this is completely random this isn't something that we added so now what we can do is we can say okay that's that's fine let's take the element at the third index which in this case is sam and let's plug it in to the first array we're going to go ahead and plug this into the first array and while we plug it into the first array we're going to eliminate this element from this array and so it's going to look something like this so now what we're going to do is we're going to implement that logic again and you probably see where this is going we're gonna actually implement this logic three times for each team that we have so we're gonna implement this logic and then let's say that now the random element or random index is equal to zero so what we're going to do here now is take lathe and we're going to plug it plug him in this array over here so this team then we're going to do this logic again let's say it's 0 again this time we take mike and we eliminate it from this array and we add it inside of here and then what we can do after we're done this loop we can check is there still any any any member inside of this array if there is if there is i want to do this logic again so i want to do that three iterations or the iteration for each loop and do this logic again until what we do is move this over here move that over here and move that over here etc so that is the logic that we are going to implement and hopefully that makes sense now in the next section we're actually going to go ahead and code this out in the last section we talked about exactly how we're going to implement this generate team logic in this section we're actually going to go ahead and execute it and code it out so let's actually go through the diagram so right now we have our array now in order to generate a team we need to know well how many teams you want to generate so what we need to do is somehow store this state stored this date inside of our application so we've done something very similar to this before so let's go ahead and do it right now the first thing that we need to do is to go over here to our class component and then inside of our class component what we're going to say is well number of teams so number of teams and initially let's just set it to zero now inside of our app dot app.component.html what we want to do is we want to do this right over here so we want to have this event binding syntax so we can have the input event and then actually manipulate our state so let's actually go ahead and copy this because we also want the attribute in there as well so let's go ahead and let's put that in there and so over here we can call this something like on i don't know uh number of teams input so we can call that we can call it that and then over here we can also give this a an id of number of teams and then over here we can say number of teams dot value now right now we also have the value so what we can do is we can set that to what we have over here number of teams this is going to fail because well we don't have this method so let's go ahead and create that for now let's actually create it right under this and we're going to say that this is going to take in a value that is a string and what we're going to do is we're going to go ahead and we're going to update this.number of teams to the value now you might be thinking well why is this a string if we set this to be a number well what it's going to do is it's going to return the string number so what i mean by that is if you put 4 in here what this is actually going to be is the string 4. so what we need to do is we need to actually catch that and change this to a number let's go ahead and change that to a number all right awesome so that is terrific let's go ahead and refresh and it's actually not really working the way that i thought it would oh it seems like i have lost connection inside of my usb that is not awesome sorry guys for that little hiccup uh but what that hiccup actually allowed me to catch is a little bit of a mistake right here we have number of teams as the id of the input however if i were to go over here if i were to go over here we also have number of teams as a piece of state and so right now we actually have colliding variables so to fix this let's actually just change this to number of teams input and over here i can just say numbers of teams input dot value okay so now we have this all set up we have this two-way binding however there's a little bit of an issue right now we're starting off at zero and this is really strange well it isn't actually strange because well our initial value is zero and we have this two-way binding with this attribute uh with this attribute right over here so won't it be nice to initially start as an empty string but then be a number afterwards so what we can do here is you can say that hey this is initially going to be an empty string awesome but this is going to cause an error over here so now what we're saying is this dot member is equal to the number of value and if i hover over this type script error it's saying type number is not assignable to type string so by changing this to a string now the number of teams type is a string as well but what i actually want it to be is a number or a completely empty string so now what we can say is okay well i can just define the type to be a number but now it's yelling at me because well well we declared it to be an empty string so what we can do here is say or now i'm not going to say or string this would work too but i actually i'm going to say that it's going to be a number or a completely empty string so we can't have like a string with values it's going to be a completely empty string and that way we can actually fix this issue there we go okay cool so now let's actually go ahead and let's write out the logic now i'm going to create a method called generate teams method i'm going to call this method over here and i'm going to have well the event binding syntax on this button so we're going to do a click and we're gonna call generate team all right or is it called generate teams yes sorry generate teams okay cool so over here we're gonna have our logic to generate our teams now what did we discuss well what we're going to do is we're going to create three arrays so really what we're going to do is well we're not going to create three arrays we're going to create however number of teams that we have in this case it is three we're going to create that number of arrays so let's just let's just go for the example of three so what we're going to do is we're going to have three loops we're going to first of all we're going to loop through it and then we're going to find a random index that is within this array over here we're going to get that element in this case it's sam we're going to add it to this one now we're going to have another loop and in this case let's say the random index is 0 corresponding to lathe we're going to add it to team 2 and we're going to have another loop let's say the random index is still zero we're gonna get mike put it to three so we're gonna have a loop that is going to loop around depending on the size of the team so if the team is if the team size is five then we're gonna loop around five times but remember if there's still elements inside of this array we're going to redo this logic but for now let's just focus on the loop of the number of teams so let's say again three we're going to loop in three times so the first thing that i want to do is let's create a for loop so let's say let i is equal to zero and then so long as i is less than this dot number this dot number of teams so as long as it's less than this on number of teams and then we're going to do i plus plus and over here well we also should make sure that the number of teams is actually a number if it is a string then we don't want to do this or if it's zero we also don't want to do this so what we can say here is if if uh this so if this dot number is a string then it's going to be a full c so we can say if this is a string we're going to go ahead and return we'll throw a little an error later similar to how we've done it over here but for now we'll just return and also if you provide a negative value let's also return so let's say or this dot number of teams is uh is less than so is less than or equal to zero we're going to throw an error so this has to be a positive number awesome so now the first thing that we want to do is well let's create a random index so how are we going to create a random index well javascript is pretty easy all we really have to do is use the math.random math.random method if you don't know what this means i highly suggest just do a quick google search it's really easy so what we can say here is math.floor so we can round it down and then we can say math.random and then we can go ahead and multiply this by the length of our members array now one thing i want to note is i don't want to deal with this array uh specifically this i don't want to deal with this array inside of our state what i want to do is i want to deal with a reference to it so a copy of it that way i can actually mutate that copy removing elements without removing the elements inside of this state because that's just going to make things awkward so what i can say here is inside of here after this if statement i can say something like new members or all members rather is equal to an array and we can destructure out everything inside of the members array and that way we have a reference so this is going to be exactly the same as this over here but this way we're not going to be mutating the state we're instead just going to be mutating this variable and the reason why we're doing the array syntax is that so we can actually we so we can actually have a completely new array instead of having it bound to the members state okay awesome so what we're going to say here is all members dot length and what this is going to do is going to give us a random index between between 0 and the length of our array so just to prove this to you let's do a console.log of random index let's go ahead and inspect here now let's create one two three and let's say i want to yeah i want to generate three teams so this should give us if i were to look at the logs here you can see here that it's going to give us three random indices so it says here two one and then two so that's awesome so this this seems to be working so two of course referencing this guy one reversing this guy and then two again referencing this guy of course what we want to do is once we reach two we probably want to remove this element so we don't hit it again okay let's actually do that right now let's actually remove the element and store it inside of a variable to do that we can actually utilize the splice method so we can say something like const member is equal to and then we can say all members so this is the array dot splice and what this is going to do is it's going to splice out a specific element from a starting index so we can specify the index where we want to start and then we specify as the second a parameter how many we want to splice out from that starting index so for example let's just go over here and let's say we have an array of one two three four five six seven eight nine or nine yeah let's get a nine so let's say we want to get rid of this right over here so what's gonna happen is we're going to say we're going to say whatever this array is so whatever this array let's just say const array so whatever this array is we're going to say array dot splice and where do we want to start well we want to start right here so we're going to get this index which is 4 and then how many do we want to splice out well we want to just splice out this over here so just the first element so we're going to say 1 and what this is going to do is it's going to return an array that is equal to five and it's going to mutate this array and completely remove the five now if we wanted to for example remove five six seven we can just say three here and this is going to return a rate of five six seven and it's also going to remove this out so i hope that makes sense if you don't you can just probably read some documentation on it so we're gonna say here we want to start from the random index that's the thing that we want to remove and we only want to remove that one element so we're just going to say one now remember this is going to return an array so in order to actually get that that element or that member we have to get it from our array and well it's going to be the first element in our array so we can just say zero all right cool so now what we want to do okay we got the member well now what we want to do is we want to add them to these arrays however we haven't really created these teams arrays yet so let's go to our state and let's say well teams we're going to have a new state called teams and this is going to be equal to an empty array however the issue is and it seems here that there's something going wrong here so property teams has no initializer oh yeah sorry it's equal to teams now the issue that we're facing is right now typescript has no idea what this is going to be well what is this going to be well it's going to be an array of strings so remember we're going to have an array here or right here and a right here and we're going to have something like lathe and we're going to have i don't know whatever here we're going to have here so to specify that this is going to be an array of strings we have specified that here so an array of strings but this is actually going to be an array of array of strings so to specify that we just add another bracket right over here okay cool so now the next step and let me just quickly plug in my my computer because it's dying sorry about that so now what we want to do is well we actually want to generate this array so we want to essentially generate an array inside here if it doesn't exist and we want to add that member inside of it however if it does exist i just want to push that number inside of that array so to do that what we can do is have a very simple if statement so we can say if this dot teams and then we can say if dot teams of i if this exists so if this array exists so remember we're iterating however number of times uh however number of teams we have and so we can say if this dot teams of i exists meaning we have an array in there we can simply say this dot teams of i dot push and we want to push the member in else so else if this doesn't exist we're going to say this dot team of i is equal to an array and then inside of this array we're going to have the member be the very first element okay cool so that is terrific let's actually save this and at the very bottom let's go ahead and let's console.log the teams the teams or this dot teams i always forget that this dot teams so let's go here and let's just add lathe mike and vincent and now if i were to say three and i were to generate you can see i get and i get well three arrays mike vincent and lathe awesome however of course a big problem with this and let's just add this again lathe vincent michael mike and then we can also say uh sam ed and jaw if i were to say three teams now i still get an array of well one individual but of course you can see here that the array are random but this is not what we want we should have two people per uh per array so how do we fix this well again what we want to do remember what we want to do is we're going to want to redo this logic if all members still has individuals inside of it so what we can do here is actually put this inside of a while loop so we can say while all members dot length so while they're still uh there's still people inside of this array we want to execute this logic again and that's really all we have to do so let's just do this again let's say mike lathe vincent darren ed and sam let's say here three we want to generate three teams if i click generate you can see here now we have an array of arrays and each array each inner array has two elements within it so we have actually created the logic isn't that awesome now there's just one problem that's going on and it's a relatively minute problem what if we had it five team members let's go back here vincent lathe and let's say um let's say oh my goodness mike darren and uh what else are we missing let's also add jaw so we add five team members however we want three teams so we should have one team of one individual so if i were to click generate you can see here that the arrays are still all of them too and the reason for this is because well one element is completely undefined and this is not what we want if an element is undefined we don't want to actually add it to our uh we would want to add it to our array we just want to have an array of one element in this case so what we can do to catch that and this is a very simple catch you can just simply say if member so if member is not defined just simply break out of the loop just simply break it out so over here that's exactly what we're doing so if i were to do this again and this time i'm just gonna do gibberish just so i can speed this up a little bit so we're gonna have five and let's say i say six now you can see here we have two two and then just one all right awesome so there's just a little bit of cleanup that we need to do and we'll do that in the next section this section is getting pretty long uh and then what we need to do of course is render those components and then after that well we're pretty much done this application so let's do the cleanup first you know some some error handling for example what we want to do is we want to make sure that you know if you only have five team members you can't put some in something like 10. we need to handle that and actually display the error and we also when i click generate it would be nice to completely remove all of these team members and also remove this input as well so let's do those cleanup in the next section so we have implemented this relatively complex logic i'm super excited super happy if you guys actually understood that but now what we need to do is we need to do a little bit of cleanup for example what i want to do is once we actually generate the teams i want to clear this and i want to clear this this is really easy let's actually just do that right now so over here right after the while loop so right after we hit this piece of state over here let's just well go this dot members is equal to an empty array and also this dot number of teams is also equal to an empty string so now if i were to do something like one two three four and then i say two everything is now back to an empty state after we have generated our team all right cool so now what i also want to do is of course display an error and the easiest way to display an error we actually also done this functionality already is once we hit this state we can as well as return we can just say this dot error message and in this case you can just say something that invalid number so we just say invalid input invalid input or invalid number of teams or something like that so now if the person were to just press generate we get this error if they were to put 0 we get this error and if they were to put some negative number we get this error however if we pass this check i want to completely remove the error so what we can do here is simply say this dot error message is well an empty string now over here i also want to catch another error and this is the case where the the number of teams is greater than the amount of members that we have so we can simply say over here well this dot members dot length so if the this.members.length is less than this dot number of teams then what i want to do is i want to throw an error so oh i say throw an error we're not really throwing an error we're just we're just changing the state so over here we can say something like not enough members and we can simply return so this is really the only cleanup that we have to do so if i were to add let's just add these gibberish people so if i were to add this and i were to say i don't know zero well that's invalid if i were to put negative something invalid but if i were to add a valid number so let's say or if i were to add maybe like 19 now i get a different error not enough numbers but if i were to say two then it actually generates it and all everything is removed all right cool that's awesome and that is pretty much the cleanup this was a little quick and easy now the absolute last thing that we need to do is let's go to the actual complete version of this is when we generate our teams what we want to do is of course output that over here so we want to output it and we've kind of done this before so i highly encourage that you do this and then afterwards i highly encourage that you watch how i do it because we're gonna do it in a little bit of a different fashion than the way that we've been doing it thus far so i highly encourage that you do it and if you uh if you succeed awesome but again highly recommend that you watch the video because i'm going to introduce a new concept in this section what we're going to do is complete our application by rendering this over here if we generate our teams so to do this let's go to our app.component.html and right below the card component right over here what i'm gonna do is i'm going to create another div and this div is going to be the dot teams or is going to have a div and it's going to have a class of teams container because it's going to be the div that's going to contain all of our teams now let's go ahead and let's just generate the html structure for just one team so let's go here and let's say something like so we want to have a container so we can say div and then in here we can say that this is the team container so just to explain what i'm doing here we have the teams container that is the container that is housing all of the teams and then we have a team container that is just housing one team all right now inside of this team container we're going to have an h3 we're going to say something like team three and then we're also gonna have a ul because we're going to of course list out all of the elements and we're gonna have in here an li and for now let's just have lathe harp and let's go ahead and save this and if i were to go back here you can see that well this is what we have of course this is not styled the way that i want it to so let's fix the styling at the moment so to fix this styling let's go over here let's go into our app component.css file and let's add some styling so the styles that we're gonna add so to the teams container so to the team container rather we're gonna add some margin bottom and we're going to give it a you know margin bottom of one ram and also for the uh team container ul what we're going to do is we're going to give it a border of 0.1 solid rgba 128 128 128 and then an opacity of 0.4 0.418 all right we're also going to give this a margin of 0 and we're going to give it padding of 0.25 ram so okay so awesome that is looking exactly how we have it over here but now of course what we want to do is we want to of course dynamically render this based on the teams that we have so i think actually the first thing that we might need to do is add a structural directive because we're well we're changing the structure of our template so i think the best thing is if our team's array is completely empty let's just not even show this div so let's add an n g if to this so we're going to say we only want to so we only want to show this if ng if we have and we have some elements inside of our team's array so we're just going to say teams.length so in this case we're not showing it at all okay but now if we do have teams what we want to do is while we want to dynamically render these over here so we're going to render as much of these elements as we can or as much of these elements as we have teams inside of our array so we can say here and g4 and we can we can do is we can do this at the very top over here what this is going to do is going to render this element as well as all the elements inside it so we're going to say ng4 and we're going to say let let team of teams all right and then what we're going to do is we're actually going to do a double ng4 because right here oops what is going on here because right here now what we want to do remember this is going to be this teams is an array of array of strings so now team right here is an array of strings so what we want to do is generate an ally for each member that we have inside of our team so we can say over here similarly ng4 is equal to and then we can say is equal to let and we can say something like let member or let uh yeah we'll say let member of team and then what we can do is we can get member and we can add member right over here so i hope this makes sense so this is a little bit more complicated but it's kind of exactly what we're doing or what we've done before so let's go back over here and let's just generate some teams so let's say lathe harb let's just say michael let's say vincent let's say jacob let's say sam and ed and let's say this time a team of two so we should have three members each team if i click generate well this works now the only issue is we've hard-coded team three so i want to be nice to have team one as well as team two so what we can actually do is we can actually get the index of the team that we're currently iterating over and what we can do is once we get that index we could just say something like index plus one because we start off with zero so we can say team one is well the team at index of zero so to actually get that index what we can do is very simply add a colon here and then say let i is equal to index and then in here we can simply say i plus one so let's just do this quickly again i'm just going to put some gibberish for now now we're gonna say two and now we get team one and we get team two so it seems as though we're pretty much done our application everything is working exactly the way that we want it however there's one thing that i want to note so our app.component.html is getting kind of bloated well you might think actually it's not that big you know we got 41 lines but right now the way that we're working is we're adding everything inside of our app.component.html so let's say in the future this card over here is getting more complicated we're going to have to add the team number the the team members name as well as what they do like are they designers engineers maybe you also want to include something about i don't know the rating and or whatever maybe we want to also add the ability to click on a team member or in order to i don't know see their attributes either description whatever this could get really complicated over here and right now what we're doing is we're actually storing this in one local state so wouldn't it be nice if we can actually get this piece of state our card or not this piece of state this this template this html and stored it in a separate file and somehow referred to it within our app.component.html and we can actually do that and we can actually do that with components so what we can do is we can actually extract out templates and we can then refer to them in separate components so right here what we have is an app.component so this is actually a component and we can create multiple components and then we can bring these components together to build out our application so to make more sense of this let's actually just go to our terminal and create a new component now in order to create a new component what we're going to say is ng then g for generate and then we're going to say we want to generate a new component and then we want to give our component a name so let's just call this component team so ng generate component team and as you can see here what it's going to do is it's going to add a team directory inside of our app directory and this looks very similar to what we have before we have a team.component.css team.component.html tm.component.specs we'll talk about specs maybe in a future video and then we also have our team.component.ts so what we can do is we can actually utilize the same logic but separate our code so let's actually do that right now so what i want to do is remember i want to go to my app.component.html i want to remove this right over here and what i want to do is i want to go to my team dot component and in here what i want to do is i want to paste this in and for now let's just completely get rid of this let's completely get rid of this let's just say team one for now let's also get rid of this and let's get ready let's just hard code lathe harp in here and so now we have actually completely separated out our component from our app.component.html so now what we want to do is we want to somehow reference this component inside of our app.component.html and that's actually not a very difficult thing to do to do that all we simply have to do is go to our team.component and then what we need to do is look at the selector name in this case the selector name is called app app team so simply what we can say here is app team and just so we can actually see it let's get rid of this mgf and you can see here that we actually get it and now what we can do is instead of having that huge block of code you can actually you know iterate over this as many times as we want and this will save us a lot of space and not have everything inside of one file this is just going to make things a lot simpler for us and a lot neater a better folder structure now one thing to note is that the styles are completely off now remember why that is our styles currently live in the app.component.css and remember that's simply scoped to the app.component.html and so any content inside of the team.com.html are not going to see these styles so what we need to do is we need to get this and we need to go to our we need to go to our team dot component dot css and we need to paste these styles so right now we can go ahead and paste these styles so now the one awkward thing is this over here these uh these uh list styles so what we can do here is simply go over here to the list styles you can also go ahead and copy these and also or sorry not the less style the li where's the li li yeah we can get the li and we need the li inside of the app.component.com because we use that to style these elements you can just simply go ahead and copy this and paste it in here or what we can do is completely remove it from both and just add it inside of the you can just add it instead inside of the global styles if this is how we want all of our list styles to be styled and quite frankly that this is what i actually want so let's just do that so now we're gonna apply these styles globally awesome all right cool so this is terrific but of course now everything is hard coded let's actually go ahead and let's just do the ng if logic so even though now this is a component so if i were to go over here even though this is a component that we're referring to we can always still do with the ng if logic or not the ngf logic the ng the mg4 logic of course what you might want to do is still add that mg if over here so let's say ngf is equal to teams.length and then over here what i want to do is let's do an ng4 ng4 and we're going to say mg4 is going to be equal to uh ng4 is going to be equal to let a team of teams and let's also get the index let's let's say let i is equal to index so let's actually just give this a go let's add one two three four five six let's say we want three teams and if i were to press generate i get three teams but the issue is everything is hard coded so what we need to do is we need to somehow pass the data that is inside of the app.component.html so remember the data in this case is team as well as the index and pass it into the app team and we can actually do that but how that's the main question well we can do that by going into our team.component.ts file wherever that is and in here what we need to do is specify the data that we want to get passed in to this component and so we can actually specify that by going in over here and getting the input input uh uh field right over here and what this is is a decorator so right over here right in right above the constructor what we can add is add input at input this is a decorator and then we can say that we want the team input and this should be initially a string so this should be a string or sorry not this should be an array and it should of course be an array of strings so right now we have a little bit of an error and the reason for this is because we actually have to define this we have to go ahead and invoke this we have to invoke this so this is a simple decorator we're saying that we're going to pass in the team which is going to be an array of strings now it doesn't know that it's going to be array of strings so might as well just define the type as well so we can also say here at input and then over here we can say we also want the index and initially we could just set it as zero all right cool so now we basically have these variables that are going to be passed in and then what we can do is actually utilize those variables inside of this right over here so what we can say here is well this can be index so we can say index is one and then over here we can simply do that that v4 logic for the team so we can say ng or nnv4 is equal to let member of team and then over here we can say member all right cool now the only issue is we need to actually pass that data from the app.component.html which is well we're not doing that yet so to pass that data we use attribute directives because we're now sending a new attribute inside of the team.component.ts file so you can simply say team is equal to and then we can say well team oops actually no this has to be inside here so we're going to say team is equal to team and then we're going to say index is equal to i so now we added this brand new component so let's go ahead and refresh this let's just try this again and then let's say three for now or maybe change it up let's say two and we can see that this works completely fine and we actually simplified our app dot component.html by extracting this html and putting it somewhere else all right cool now there's one last thing that i want to discuss it's a very very small thing but we'll discuss it later and then we'll end this project off in this last section what we're going to do is we're going to introduce pipes now to introduce pipes let's look at a small potential problem in our application right now so right now let's say i add the name latharp and then i add the name i don't know gather and then i add the name michael mike and then i add the name i don't know uh jacob han and then i add this and then i say i want to generate two teams i generate and now you can see that we get our teams but you can see that the data is a little bit awkward you can see over here right right now this is all lowercase in this one this one's capital case for the first name and then this one's lowercase this one's all capital case well i guess the capitalized and then this one's all lowercase this is a little bit awkward so wouldn't it be nice to just transform all of this data to be capital case or capital case so we actually can do this by well writing some logic what if we went ahead in here inside of our team.component.html and just wrote some logic to ensure that the first letter is always capitalized we could do this we could have a method here and we can just invoke this method like capitalize copy ta lies i don't know name and then just pass in the member itself this could work however this is going to be too much work well you're going to have to write this method and well it's going to be relatively annoying and angular actually has a solution for this and the solution is by utilizing pipes so pipes are ways that we can transform our data so what do i mean by that well what we want to do here in our case and let's just mic mic and add that to let's just say one team what we want to do is we want to transform this data so that it's not all lower case but instead capitalized and we can actually use a pipe to do this so angular has a bunch of built-in pipes and these are some of the more common pipes so we have pipes that are going to display json we have pipes that deal with currency pipes that deal with i don't know decimals so there's a bunch of different pipes but you can see here the pipes that we probably want to use are the lower case pipes uppercase pipes or maybe well prop definitely the tidal case pipe so this is actually what we want to use so what we can say here to utilize this pipe is whatever our value is and then this pipe over here so this this character is actually called the pipe and then we can say title case and what this is going to do is it's going to transform this value to capital case so to do that let's okay let's add in that pipe this isn't a 1 or an l this is a pipe to the right of the uh to the right of the square bracket uh a key key press and then we're gonna say title case so now if i went ahead over here and i added lathe harb added him wanted to add one team member you can see that the data has completely reformed you can see it's the way that we want it so let's just quickly discuss some of the other pipes so let's discuss the currency pipe for example the date pipe is also very neat as well so what we can do here is simply say something like so we can say over here let's let's let's go over here let's let's add inside of the uh the team.component.ts let's add a date let's go over here let's just say something like current date is equal to new date so over here this has a type of date and so over here maybe we want to display the date for some reason so the current date so we can just say something like current date and if i were to go over to angular and let's just add somebody we could see that the date is right over here and this is really ugly this obviously isn't what we want so we can actually format this we can you know adjust this format however the way we want manually or we can use this pipe so we can say here pipe date and what this is going to do let's add a new member here is going to format it in a really nice way so you can see that we can actually utilize this in multiple different ways isn't that terrific and we can actually pass variables in but this is kind of outside of the scope of this project we'll talk about that a little bit later but of course we can do uh we can do currency as well we can do whatever it is that we want so we can utilize pipes and we can actually also create our own pipes which we won't cover in this project so that is just pipes and that actually concludes our application so i hope you guys are happy

Channel: Laith Harb

Views: 5,040

Keywords:

Id: WHv1YQUg6ow

Length: 124min 15sec (7455 seconds)

Published: Mon Nov 01 2021