Angular 12 tutorial #25 Todo list in angular

hi everyone welcome back to code step by step my name is anil in this part of angular we are not going to learn a new feature of angular series and we will basically create a to-do list with the angular text books and button so why we are creating that list and why we are not going to learn any other feature in that video because see from last some videos we are continuously learning new features of angular some guys are actually getting bored and uh some guys just want to see something different with angular that's why i just want to make a to-do list and this is seriously interesting because we are going to use here filter method array push operations and many things and definitely this video will be really helpful to make a small programs and small tasks with the angular also so now let's start with the point first of all we will make a textbooks and button and uh when we will write something in textbooks and click on the button it will create a new list of tasks or you can say that it will create a to-do list and this list will be displayed on our you can say that on browser screen also and with the list we will also add a remove button and whenever we will click on that remove button the item will be removed from our to-do list so now let's see how we can do it so first of all i am going to create a text box so let's simply put here input type can be let's say text and we can just add some placeholder let's say enter new task or something and we can define here id to this box let's say task and after that let's add here some br tag so that we can maintain some space even you can use css to make the margin and padding but i am not focusing on the style that's why to make that very quickly i am just adding here via tags so let's add here button and here we can write here add new task or something on and now let's see what we are getting on our screen now so we have a text box and button whenever we will click on this button the value of this text will be saved in our array and populated as a list of the tasks so now let me call function on the click of button let's define the click event make the function name let's say add task and here we we are going to pass here value of this text box and that will be possible with the task id so just simply put here task dot value now let's define this task function sorry sometime auto correct will make us confuse and now let's simply get the item here let's say item and it will be a type of string and now let's try to print it so let's simply put here item and now let's see what we are getting here so i'm adding here something let's say text to friend or someone and whenever you are clicking it you can see that we got this text and now let's say second task is uh call to father or someone and again this is working fine so let's collect them or collect them all this list in a array so let's simply create here list and it will be a type of any array because in the array we will have the two items one with the id second one is the name of task and let's by default the array will be blank now let's simply put here this dot list dot push and here we have to push our element uh so let's create a array and first of all we have id and as you know we don't have any id so what we can do here we can just get the id with the list length so just add here this dot list dot length and second item let's say name and it will be the item and now let's see what we are getting in this list so let's print it here like this dot list and whenever i will click on here let's see call to mom you can see that first item will be registered here text to boss or someone and here we added the second text also so now let's show this item list on our screen so for that let's go to the html page simply make some br tags and let's define here ul with the ul we can define here star ng 4 and let take a item of list and now we can print this list here so let's see create a ally in the ally what we can do here in the double curly braces or the interpolation let's put here item dot name and now let's see what we are getting here so let's call here let's say call to client go to doctor so here you can see that we are getting a list here that's perfectly fine so now i want to remove this item on a button click and this button will be present inside a list so just simply put here close this button and let's put here remove task fine now you will find a remove button here so whenever i will just add some task let's say abc task then with that we have a button also on button click we will remove a specific item from a list so let's call a function here on click and we can simply put here remove task or someone and inside it what we can pass here item dot id and now let's define this remove task and it will have id the type of number and let's simply put here console first of all i just want to show that we are getting id properly or not after that we will just perform some other things so let's say we got one two three task and some other task also and whenever i will just click on that button you will find that we are getting the proper id of this one with that id we can remove it so let's say whenever i will just click on the so we have some other items also let's say for example three and four and all so whenever i will just click on the third one i will get the second idea because id is starting from the 0 1 2 3 and whenever i will just click on this third one it should be removed from our list how we can remove it so what we can do here we can just keep all other items rather than that and for that we have a very simple way to do it this dot list equal to this dot list dot filter and what we are going to filter here with the item item dot id should not be equal to the current id and the other id will be just saved in that id so it will just remove the current item or the uh the item that the id we are providing here will remove from the list so now let's see so i'm just calling here let's say call to client and let's say go for movie go for clinic and let's say some other let's sleep at nine o'clock nine pm or something and we have this list perfectly so now i want to remove some items whenever i will just click on someone let's say on a second one it will be removed from the list because we are just removing the current id from here with that way we can create a simple to-do list if you still have any kind of confusion you can ask me in the comment box and please don't forget to subscribe my channel and like this video

Channel: Code Step By Step

Views: 39,382

Keywords: Angular 12 tutorial, angular 12, angular todo list, make list in angular, anil sidhu, angular tutorial for beginners, angular tutorial, angular 12 tutorial for beginners

Id: 4kDeGqXc1ZU

Length: 9min 34sec (574 seconds)

Published: Sun Jun 27 2021