To-Do List in Angular. Save your Data.

[Music] hi in this video we're going to modify our to-do application that we created in previous videos right now when we start this application or restart it starts with this one item and if we add some items and modify it and refresh it it's going to go back to the original item and that's because this data is hardcoded and it's coming from an array of objects let me show you this is our array of objects and inside we have one object we will modify this application and our new Behavior will be to somehow save this data before we start working on it let's look at our options to save the data our first option would be to save the data in a remote database and to access it via a web API and this is how it works your browser sends an HTTP request to a web API and that HTTP request brings an instruction of what to do with the data your web API use those instructions either to delete data or update it or create a new record whatever you want to do this seems to be the most popular option to save data for web applications but it's also the most complicated one we could implement this option but I'm already working on a series of videos that do exactly that task let me show you this is the playlist that contains all videos doing exactly what we just described we're actually building our own web API and we're connecting our angular application to that web API I don't want to duplicate this work so we're going to choose a different option let's go back to the list of our options our next option could be to save data locally either in a text file or in a light web database for example SQL light this is not a very good option for a web application and this option is more commonly used for desktop applications and also for mobile applications so we're not going to use this option our third option would be to use a browser to store our data we have three options cookies session storage and local storage I could probably make the whole video about those three options but let's just quickly talk through it and decide which option we're going to use cookies I'm mainly used to send information between the browser and the server and even though it could be an option to keep our data in a cookie it's probably not the best option here with session storage all data will be erased as soon as the browser is closed so I would say that's also not a good option for us and the last option that actually the option we're going to use is a local storage option every time we save something in the local storage it will be there until we delete it either manually or programmatically the most common usage for local storage is to use it for shopping cart in a web application so if you accidentally close your browser when you come back all items you put on the shopping list would be still there another very common usage is to keep Json talking that use for authentication and authorization after we decided what option we're going to use let's go back to application and start implementing that option if you build this application with me in the previous videos you can just continue building it but if you didn't do it but you still want to follow along you can get it from my GitHub page and that's what I'm going to do let me go to GitHub this is a GitHub page where you can get the code and I'm going to put this link in description of this video when you're on this page we're going to click code copy this URL and I'm going to go to this folder that I created and I called it angular too list save you can call it anything you want and I'm going to right click in the middle of this folder and select open in terminal and I'm already in this folder so here I'm going to type git clone and I'm going to paste that URL I'm going to press contrl V enter my project is loaded I'm going to close this window and now I have this folder I'm going to go inside that folder and I'm going to right click inside this folder I'm going to select opening terminal and you can see I'm again inside this folder and once inside this folder I'm going to type code space period press enter and it's going to open my application inside the vs code I need to open a terminal and to do that I'm going to press control back tick or you can go to view and click on this option terminal and inside before I run my application I need to install all dependencies so I'm going to type npm install as you can see this folder node modules was created and now angular CLI is loading all dependency inside that folder after it's done we can type NG serf and I'm going to use a flag Dash all and this will open this application in the browser I'm going to press enter and as you can see our application is successfully compiled let me pull it to a separate window and I'm going to expand it and let's look at our local storage in order to do it I need to go to developer tools so I'm going to click on this menu and I'm going to go to more tools and I'm going to click on this developer tools you can also use this shortcut control shift I or you can also press F12 here we have a few options if you don't see it right away click on this double arrow and select application and here we have all options we talked already about so we have local storage session storage and cookies let me expand local storage and I'm going to click on my URL and here we have a table and one column is key and the other column is value and that's exactly what we're going to do we're going to create the key value page and we're going to save it in this local storage let's talk about how we're going to do it I'm on this developer mailla org website and I'm going to put the link in the description of this video as you can see here we can use this local storage object to access local storage and if you click on this storage link I already open it on the left side you can see all these methods we can use when we work with local storage out of these five methods we're going to just use this get item and set item methods let me go back to vs code and let's start using this methods here I'm going to go to our source folder app folder to-do list and I'm going to open this TS typescript file let's go to our on submit method and we're using this submit method when we create a task and we push the task to our array as soon as it happens our angular application renders our HTML page and we can see the task on the screen every time we add a task object to our aray we're going to save it to local storage and to do that let's create a separate method we're going to create this method below this onsubmit method so let's make some space and let's call it save to local storage here we're going to type local storage and you can see it's already on a list I can just press tab when I put period we have a list of methods and the method we're going to use is set item I'm going to open parenthesis and I'm going to write a away I put semicolon here inside our set method I need to pass two arguments one is key and one is the value and the B strings let's name our key to-do list so I'm going to put single quotation marks to-do list I'm going to put comma and here just to test it I'm going to put another string and I'm going to just say hello let me save it I'm going to press contrl s and before we go to our application we actually have to call this method so let me just cut it contrl C and I'm going to call it right after we push our new task to our array right here so I'm going to say this the name of the method parenthesis semicolon so I'm going to save again and let's go to our application and I'm going to refresh the page and let's add a task I already have this L journalist so I'm going to click submit and let's watch this right side right here on keys and values as you can see our key value pair is being saved now and our key is to-do list and our value is hello let's now talk how we can save the array of these objects at the string value here we're going to use another standard buildin object and it's called Json and this Json object has a few methods out of these four methods we're going to use this Json stringify and Json parse let's go back to our application and we're going to go to our method where we save items to the local storage I'm going to make some space and I'm going to use the Json out object so I'm going to just type Json period as you can see I have this method stringify parenthesis and I'm going to put semicolon right away and inside I'm going to put our array of objects so I have to say this task array and after we converted this task array into a string we're going to put in a variable so let's call it string Json so we're going to say let string Json equals and now instead of this hell low string we're going to put our string Json let me save it crl s and let's go back to our application and test it I'm going to clear my local storage and to do that I'm going to click on this icon now I'm going to restart it and I'm going to add a task after I click submit as you can see we have our array of objects save here as a long string now that we have this value inside our local storage we can start using it let's go back to vs code and let's scroll up and we're going to put something inside our ngg on it method so I'm going to make some space here this method runs when application is compiled and this is where we're going to put some code that will check if we have some data in our local storage and if we have that data we're going to use it in our application and if we don't have that data we're going to go right back to our hardcoded array to get data from local storage let's create another method and I'm going to call it get from local storage and here we're going to access our local storage again so I'm going to type local storage period and now we're going to use this get item method going to put parenthesis semicolon and here inside the parentheses I need to put the key our key is called to-do list and after I get those items I want to put it inside a variable let's call it items Json string so I'm going to type let item Jone string and after we get that item we actually need to see if we have anything inside this item Jon string so let's have an if statement and we're going to say if this variable item Jon string is not equal to null and if it's not null I'm going to parse it and parsing means that I'm going to convert this long string into an array of objects so I'm going to use the same object Json parse method and inside the parenthesis I'm going to pass our variable item Json string after we converted this string into an array of objects we're going to assign it to our array and since this array belongs to this class we're going to say this task array equals to that expression let's now go to our NG on method and call this method from there so we're going to say this and this is our method I'm going to save it and let's test it in the application so first I'm going to clear our local storage I'm going to restart our application I'm going to add one task submit we have it there now if we restart our application as you can see our list doesn't reset to the original list let me add another task submit Let me refresh again as you can see our list stay the same now let's delete our method and see what happens if I delete this task dishes and refresh our list goes back to these three items same thing goes for our completed column so if I click here laundry and I refresh our application as you can see this check mark is gone and the reason for that is that we don't save it every time after we modify our list let's go back to vs code and fix it we're going to scroll down to our on delete method and after we delete the task from our array we're going to save this array to our storage again so we're going to call that method this save to local storage we're going to do the same thing inside this on check method so I'm going to just copy it contrl C and I'm going to go all the way to the end of of this method and I'm going to paste it crl + V Let's go see if we have other methods on edit we're going to call this method from here too and we also need to add this line to this method let's save it contrl s and let's test our application one more time I'm going to clear our storage I'm going to refresh it we have only one item on the list I'm going to add a task I'm going to refresh it the list stay the same I'm going to add another task same thing let's delete an item refresh same thing let's complete one item and let's modify another one save it and if I refresh it the completed item is reset let me try to do it for doing dishes and it does the same thing let's fix that back to our vs code and here everything looks good inside this method so let's go to our template and let's see here this is our check box and it looks like we are not binding the value of is completed that Boolean to our checkbox so let's do it really quick so I'm going to put in square brackets and I'm going to say checked and I'm going to use our object it's going to be coming from here so it's t period And this is our Boolean is completed let me save it and let's test our application again let me clear the local storage again refresh refresh let's add couple of tasks I'm going to refresh it it stay the same let's complete one of them refresh and it looks like it's working I'm going to delete one item and edit one let me save it and let's refresh and it looks like our application is working as intended I hope this video was helpful and thank you for watching

Channel: DK Programming

Views: 214

Keywords: to-do list in angular, angular to-do list, angular to do list, to do list, to-do list, save data in local storage, browser local storage, save in local storage, angular local storage, localStorage, javascript local storage

Id: vSjliuDMbS4

Length: 15min 29sec (929 seconds)

Published: Wed May 08 2024