To-Do List in Angular with source code in GitHub.

foreign [Music] we're gonna create this my to-do list project in angular and I'm gonna show you this project first and then we're gonna create everything from scratch so in this app you can add your tasks right here and there's some validation so you can click on the submit button until you have something inside this input control also you can check or uncheck these boxes if the task is completed and if you want to delete one of those rows you can just delete them and let me show again so as soon as I put something in I have the submit button enabled so I'm going to click on it it adds it and also if I type something and I decide that I want to delete it I will have a warning this is the required field now if I reset this I'm gonna have this initial task I always want to brush my teeth so I'm going to have this task here and after that I'm going to add more tasks and like I said I can delete them too so let's start making this application I'm in Visual Studio code and I'm gonna open the folder I already created and as you can see I'm inside this angular projects folder now I'm gonna access my terminal so you can either click control back tick or you can go to view terminal now make sure you inside this folder and now I'm going to create a new angular project and G new to do and to do will be the name of my project press enter I don't need routing for this project so I'm going to press n enter and I'm going to choose CSS enter so the application was successfully created and angular CLI created this folder and inside this folder I have all these files and folders let me open the source folder app folder and here we have our root component and inside this HTML file I actually have a bunch of Boiler code let me run this application to make sure everything works so I'm going to type NG serve and it's going to start the application and space Dash open and it's going to open my application in the browser enter now it happens to me a lot when I create an application and try to run it it doesn't work so the reason for that you need to go inside your new created folder and in my case it's a to-do folder so let me just look what folders I have I'm going to type dir and as you can see I have this to do folder and I'm going to switch to that folder I'm going to type CD for change directory to do enter and now I'm inside that folder and I'm gonna press Arrow up and go to my previous command NG surf Dash o and I'm going to press enter and this is my application that was created and this is all Boiler code so let me remove all this I'm gonna press Ctrl a to select everything and Ctrl X to delete everything and now I'm going to press Ctrl s to save it and right away if I go back my page will look completely empty since we have only one simple application I could put everything inside this app component but in real life application you won't be doing it you will be creating multiple components and here in this app component you will be assembling everything so let's create actually a separate component and we're gonna reference that component inside this app component so I'm going to stop the application Ctrl C and here I'm going to create a new component NG generate can point to the command and the name of our component would be a to-do list press enter and as you can see angular CLI create as a folder and inside we have four different components so if you go to this HTML file you can see that we have only one tag access to-do list works and if you go to this typescript file we'll have our selector so I'm just gonna copy it Ctrl C and I'm gonna go to our root component and I'm gonna play this tag inside this app component Ctrl s to save it and let me look at the application so now I have this to-do list paragraph now let's start configuring our application let's create a simple form for our application let's go to bootstrap site and grab a template I'm going to Google bootstrap form and go to the very first link and here I'm going to scroll down and I think this form looks nice so I'm gonna just grab this code so I'm gonna click copy and go back to application here I'm gonna remove this line and I'm gonna play the code I just copied Ctrl V I'm gonna save it as you can see this form doesn't look very nice and the reason for that because we didn't install a package for bootstrap in our application let's do it really quick I'm gonna stop the application Ctrl C I'm gonna type npm install bootstrap enter the package was installed but if I start our application as you can see nothing changed because I didn't reference the package I just installed I'm gonna scroll down and open this angularjson file and here in Styles I'm gonna make some space I'm gonna put quotation marks and comma at the end and inside those quotation marks I need to put the reference line for our bootstrap to find what I need to put inside those quotation marks let me go to this node modules and there are a lot of files there the easiest way to find bootstrap I'm gonna press Ctrl f and I'm gonna type bootstrap and as you can see I have a folder here I'm gonna go inside that folder and I'm gonna go inside that this folder CSS and I need this bootstrap Min CSS file so I'm gonna right click on it and I'm gonna click on copy relative path now I'm gonna go back to my angularjson file and inside I'm gonna paste that line Ctrl V let me close it and here I just think everything starting with node modules and I need to replace all backslashes to forward slashes I'm going to press Ctrl s to save it since we just installed our package I need to restart our application Ctrl C mg serve and as you can see our form looks much better now I would also like a little space around our form so it's not right on the edge so I'm gonna go back to my HTML file and I'm gonna place all this code inside to div tags so I'm gonna make some space and here I'm gonna type div tab and I'm gonna copy all this code Ctrl X and here I'm gonna press Ctrl V to paste it and here I need to add a class and it's a built-in bootstrap class container Ctrl s and as you can see now we have space on the left and right side let's add a tag H1 and I'm gonna call it to do application Ctrl s let's put a line underneath let me actually play this inside the container Ctrl X control s let's open our CSS file and style our title I'm going to type H1 curly brace it and inside let's place it in the center text align Center and let's make it a little bigger font size let's do two Ram Ctrl s let's go back to our form and let's make some changes to that form we don't need this password control so let's remove it I also don't need this check me out checkbox let's save it let's change everything from email to task for type it's going to be text and we don't need this area tag and this is for accessibility let me say let's see how it looks this text will become our error message so let me change it let me save it let's also make it red so since we're using bootstrap classes we can change it to text Danger and it became red now this submit button is too close to this required field message let's move it down so let's give that button an ID let's open our CSS file and for that ID we need to type this Dash color braces and inside we're gonna give some margin on top of that button margin top let's give it 20 pixels Ctrl s and I think it looks much better let's now create our table where we are going to display our tasks back to HTML file I'm gonna make some space and I'm gonna put another line there and now I'm gonna go again to our bootstrap site and grab a template for our table I'm gonna type table here scroll down and this table looks fine to me so I'm gonna just copy this code back to our application and below this HR tag I'm gonna place all code I just copied Ctrl V save and let's adjust our table I'm gonna remove this table header I'm also going to remove this line and I don't need three rows so I'm gonna remove these two rows Ctrl s let's adjust our headers test complete and delete let's save it and here in a delete row I'm going to insert a button button delete now let's style it with bootstrap BTN Danger made it red and BTN small made it small let's change this value to check box let's go back to bootstrap site and type here checkbox let me just grab this line I guess we are not going to be using the bootstrap Ctrl s let's move it all to the right so to do that let's give this checkbox an ID let's call it my checkbox control s and I'm gonna grab this ID go to our CSS file Dash killer braces and I'm going to give it margin left maybe 30 pixels control S I think it looks okay and now before we start programming our buttons let's talk about different types of forms in angular if I Google angular forms and click on this very first link I can see that there are two ways to handle forms in angular reactive forms and template driven forms you can read more about key differences and why and when you need to use different types of forms and in this project I'm going to use the template driven approach and I have a few slides about it let's look at them like I said there are two types of forms reactive forms and template driven forms the reason why I chose template driven form it's because template driven forms focus on simple scenarios and that's what we have in our application you have to go through the first three steps to create a template driven form and the last step add form validation I put if needed because you don't have to do it but we will just have basic validation for our form so the first step we need to modify our app module TS and we are importing this forms module in table application in The Next Step we're going to be modifying our HTML file and we're going to be talking more about it as we're adjusting our form next we're going to create a method that is gonna handle the submit button click event and like I said the last step will be add some validation to our form we will also talk a little bit more about different type of validators and on the angular website you can actually find a list of all built-in validators let's go back to our application and start implementing these steps I'm going to close both these files and I'm gonna open our app module TS file here inside the Imports array I need to add forms module I'm going to click on it and angular helps me so it also inserted this line here I need to put a comma Ctrl s to save Next Step I'm gonna go to our HTML file for our component and here inside the form tag I'm going to give it a local reference it starts with Dash and I'm gonna call it task form and you can call it anything you want and to let angular know that I want to make it the template driven form I need to assign this value and G form I'm gonna save it in the next step I need to let angular know which controls in the form will be part of this task form I have only one control our input control to be a part of my form so I'm gonna insert the name of this directive NG model and also I have to give a name of this form so we know what exactly control we are referencing and I'm going to call it task control s to save it now when I click my submit button and as you can see this submit button inside this form but specifically in angular you need to place something here inside the form tag and as you can see I have intellisense helping me so I can just press Tab and here I need to put the name of the method that will be handling the submit method we can name it anything we want let's name it on submit and in parenthesis we are going to send this task form to our method control V and Ctrl s now our application is broken because we don't have this method created in our typescript file let me copy it Ctrl C and I'm gonna go to our typescript file and here I'm going to create this method Ctrl s let me rename this I'm gonna just call it form and I need to give it a type and it's going to be a type of mg form and I need to import this package from angular forms Ctrl s as you can see our application is working again now our form is all set up and our next step will be creating code to handle click events for these two buttons first of all let's create an array of objects that will have all the information about these fields let's call it task array we're going to have square brackets and inside we're gonna have curly braces that indicate that it's going to be an object and our first property will be task name and the value will be brush teeth the second property will be I'm going to name it is completed and it's going to be a Boolean and the value will be false here let me save it now instead of using this hard-coded word I'm gonna populate my table using this task array let's go to our HTML file and let's go to our table and for every task we're going to be duplicating this row and to duplicate this row I will be using structural directive ng4 it starts with star and G4 and here I'm going to create a variable and I can call it anything I want I'm going to call it t for task and it's going to be taking values from the array we just created and we name the task array here in the first column I'm gonna use the string interpolation syntax double curly braces and I'm gonna use this variable T I'm gonna type T Dot and the name of our first property was task name so I'm going to type here task name I'm going to press Ctrl s to save it and as you can see our application changed the first task to brush teeth now let's start adding rows to this table using our input control let's scroll up and as you can see in this line on submit click we are sending information about our form to our on submit method let's look what kind of information we are sending to that method let me go back to that TS file and here let me cancel log this form information I'm going to press Ctrl s and I'm going to open developer tools so you can press F12 or you can go to this menu more tools developer tools and make sure you're on a console tab include that and I'm going to clear it and let me click the submit button and as you can see we have our form let's expand it let's expand this form and here we have a bunch of information related to our form we connected the text we type inside here through this value or through this control property every time we click the submit button we want to grab the value from this input box and we need to put it inside our array so we need to add another object to this array with the task name and is completed property the way you do it in typescript we're gonna type this Dot task array and we're gonna use the push method parenthesis curly braces to let tab script know that we're using an object and here we're gonna type task name colon and we're going to extract that value from that input control we're going to type form dot controls square brackets and we're gonna use that name that we give to that control and we called it task don't forget the single quotation marks and here we're gonna put that value next we're gonna add is completed property and we're gonna give it a value false Ctrl s now let's see if it works I'm gonna type do laundry submit and as you can see we have a second row with that value let's delete it and let's type something else I already have clean the window there submit and we have three rows let's now create a method handling this click event for this delete button I'm gonna go first to our HTML file and here inside our button tag I'm going to create a click event and I'm gonna call it on delete don't forget parenthesis let me copy this and create this method right away inside the typescript file Ctrl s here and Ctrl s here now for each row let me add something else here if we have a delete button but how do we know that we are clicking this delete button for this particular role angular gives us a way to do that let me go to the angular documentation to see how it's done let's search for ng4 I'm going to click on this ng4 directive scroll down and in this line you can see this part index as I if I play this part inside my ng4 directive I will have the index value for every row stored in this I variable let me copy it Ctrl C go back to application and right here I'm gonna put semicolon and place the code that I just copied I'm going to save it and when I call this method I'm gonna pass this variable I and by the way you can call it anything you want I'm gonna just leave it as I control s to save it and as you can see I need to adjust my method in the typescript file here since I'm passing that index I'm gonna put the name of the variable let's call it index and it's going to be a type of number let me save it and now to make sure it works let's cancel log it index Ctrl s to save it let me add a couple more tasks and let me press this delete button so the numbering always starts from zero so this row will be zero one two let's see if it works zero one two now that we know the index of each row we can remove this row that way we can do it we'll type this task array and we're going to use the method splice and this method will remove an element from an array using its index so this method takes two arguments the first one will be our index and the second number we'll tell this method how many numbers of that array starting from that index we need to remove and we need to remove only one element from that array let me save it let me add a couple more elements and let's see if it works I'm gonna delete claim window brush teeth and mop the floor in The Next Step let's configure our validation first of all let's disable our button if our input control is empty the way we can do it let's go to our input field and let me line it up so we can see it better so at the end we're gonna add a keyword required I don't need anything after that work so I'm going to remove that and I'm gonna save it now let's look at our control what properties it has and what values it has remember when you click the submit button let me go to that method we have console log the value for this form let's go inside this form let's expand our controls go to task and as you can see the status of our control is invalid the same is true for our form because if any of our controls is invalid our form will be invalid too now we can use it to disable our button if the form is invalid let's go to our HTML file and here let me line it up too so we can see it better I will bind this property to the validation of our form so as you remember we create a local reference and it's called task form so I'm going to put it here and I'm going to put that invalid so if this is true if our task form is invalid our button will be disabled let me save it Ctrl s and as you can see our button is now disabled as soon as I type anything in this input control this button becomes enabled again now let's use the same principle and change this hard-coded line into something that will be appearing if our form is invalid now I don't want this line to be shown right away because when user just start the application first of all they didn't do anything wrong and second of all this button is disabled so they can submit an empty string anyway so there's a special property I can use the name for this property is Dory let me expand our NG form go to our form controls task and if I scroll down I can see the value of this property so right now it's true the reason it's true because we did something inside this input control if I just start our application and of course I cannot submit it let me just delete it so we can actually see it delete Ctrl s I'm gonna refresh and I'm gonna submit and let's look inside form controls task and you can see now the value is false and that's because we didn't touch this control yet let me put back the line I deleted control s and let's use the jury property in our validation so we're going to be using another structural directive ngeef I'm going to go to our small tag and I'm gonna type star NG if and this directive is the adding an element to the Dom tree if the condition is true or removing it if the condition is false I'm gonna put equal and I want this message to be displayed only the form is invalid and the task form is dirty I need to put and here let me save it now let's see if it works I'm gonna type here something and I'm gonna remove it I can see that it's Master displayed Let me refresh it and as you can see the message is gone we need to do another thing here after we submitted a task we want to clear this input control angular has a really helpful method to do that the only thing we need to do let's go to our typescript file and here inside our on submit method at the end we are going to just reset the form I'm going to type form dot reset I'm Gonna Save It Ctrl s and let's see if it works map the flow submit the value from the input control is gone clean window submit and as you can see it works there's only one thing we need to do is to do some work for this checkbox let's create a method that will be called when we click inside this checkbox I'm going to go back to my HTML file and inside our input tag for our checkbox I'm going to create a method and it's going to be on change method but an angle is going to be just change and let's call it on check let me copy it and let me save it it's going to break the application and we need to create another method here now it works and here in this method we're going to cancel log this array that we created earlier Ctrl s let me add couple more tasks and let's see what happens let me clear it when we click this check boxes so I'm going to click this checkbox and as you can see we have an array of three objects let's look at the first one why this value is completed false we check the box let's check another one as you can see both values are false so this false values they never change it doesn't matter what we click if you work with an application that you need to save your values inside the database you need to make sure that your check boxes are in sync with this array let's fix it really quick first we need to know which checkbox were clicked and we already know how to do it so I'm gonna just use this index number and place it right here and I'm Gonna Save the application is gonna break because we need to change it here too and I'm going to just put I here Ctrl s and now when we receive this value inside our on check method we're going to check the value from this property from false to true or if it's true to false so we're going to change it to the opposite value so the way you can do it I'm gonna use this array here this task array and in square brackets we need to put the index and here we need to know what property of the object we are using and it's going to be is completed and we're going to change the value of this Boolean to the opposite one and the way you can do it you're going to put an exclamation mark and then you're gonna grab all this let me copy it put it here and paste it I'm gonna put semicolon let me expand it so we can see the whole line so the way it works we are grabbing this value let's say it's true with this exclamation mark reverse it to false and we assign it to the same element so if here we have false it will become true if here it is true it will become false let's see if it works Let me refresh it and let me add couple more tasks let me clear it and now when I check my first checkbox and expand it you can see that the second element and the third element their false value and the first one it had the True Value let me check the last one I'm going to expand it and as you can see the first and the last one they have values true let me clear it again let me check it and uncheck it and I'm going to expand it and now it's all supposed to be false so now if we have to save it in a database you have the correct values for these check boxes I hope this video was helpful and thank you for watching

Channel: DK Programming

Views: 16,209

Keywords:

Id: ZoZ8z7J_SyE

Length: 37min 37sec (2257 seconds)

Published: Wed Dec 21 2022