TODO Application in Angular 13 | Angular Project | Angular Material TODO App | Angular Drag & Drop

hello everyone welcome back to my channel so this is quick demo of angular 13 to do application all right so here you can see we have some to-do list here on this column so we have one more column called as in progress and third column is done okay so on the left hand side you can see there is a task name which is an input so what we can do here is in this application that we can add any task name and that task will get reflected in the to-do list so let's try to add one so i'll add a task maybe go to gym and if i click on this add button so i can see this has been added in the list and you can see the number is also changed to seven like we have total seven item in the to-do list all right so now let's take an example that uh we want i want to start some tasks okay so what i'll do i want to create a blog application so there is a step that i want to learn angular then i want to learn node.js and then i'll create a blog application so okay so what i'll do i'll just go here and click on this learn node.js and drag to the in progress so that my this task is already in progress and i can also start to learn angular and then maybe i can also add this create blog application so as you can see that i can easily drag and drop from to-do list to the in progress okay but you can see that this uh like position is not correct like i want to start first with angular then node.js and then maybe i'll create a application so i can also change the position by clicking on this and dragging it it to the top in the same way i can do for the node.js and now this looks good that i'll learn angular then node.js and then i'll create a blog application okay now you can see that if i have completed my this task which is in in progress right now and this you can see the number is also three in in progress section so i can just drag this to done section that i have completed this task and you can see this list is also updated to one that one item is done and we have this check mark as well that this is done in the same way we can do for the node.js as well and the create blog application as well all right so here you can see that one more thing we have a update so you can see the spelling is incorrect if i want to update this spelling i can just click on this pencil button which is for update you can see this is getting sticked here now we can correct the spelling and we can click on update and you can see the name is also updated all right so one thing you can see here is that update is only working whenever the item is in to-do list all right for example if i want to update this learn angular so i'll have to drag it to the to-do list and then i have to update this name or learn angular fast maybe just a random text and now i can put it in the done section now okay so this is it what we are going to create in this particular tutorial all right so without any further ado let's jump into the video so first of all we will create a folder in our project directory maybe so we can do that or we can just directly go inside our folder and we can create our angular application so just open cmd in the current directory okay and you just need to uh like hit few commands for creating new angular application okay so the command for creating new angular application is ng new and the application name which is angular to do okay so this is how we can create a new application all right so hit enter there so it will ask you questions for routing and css so let's select that once it comes so you can see it ask a question like you need to add routing so i would say yes and it asks for css format so i'll select scss okay and now it will create our new angular application so let's just wait for it as you can see our application is installed okay so we need to go inside the directory of it so for that we have to press cd space and the application name and hit enter so once you hit enter so you are inside your application and for opening this application in the vs code you can just press this command code space v to open this okay and you can do it manually as well so there is no such issue so i have already opened the application in vs code okay so here you can see my application is only already running your angular to-do list all right so what we need to do first is we need to that i will be using bootstrap plus angular material so we have to install those inside our application so for bootstrap what you can do is just go on this website get bootstrap.com here you can see we have this on the homepage if you go you will see get started if you press here we have to just copy the css path okay just copy the css and go inside this index.html okay you can find it here so inside the index.html you just have to add these lines below this link okay you can remove this if you want you don't need this all right and we can save this application all right so once this is done so what is the second thing we will do is we will try to add angular material inside your project so for that how we can do is we just have to go here on this website material.angular.io we can click on get started button and we can see we have a command ng add angular angular slash material just copy this command okay and go here inside your terminal you can paste this and hit enter okay so once you press enter it will ask for a few questions that it will be installed and what styling you want to use so just choose it and we are good to go so i'm still waiting for that question to pop up so let's just wait for 10 seconds maybe yep so it is determining the packages so it asks would you like to install it i would say yes hit enter so the second question it is asking is for choosing the pre-built css so i'll go with this indigo ping so i'll so as you can see our angular material is installed here it asks few questions about the css then it asks about typography then angular material browser animation so you just have to say yes yes yes for all this question and it will update few few of the files okay so you can see it if you want to all right so this was it that we have successfully installed angular material and bootstrap inside your project okay but if suppose you you don't have that much time and you don't have to follow all this step what best you can do is you can directly go on my github or this we have this material bootstrap startup i will just paste this link in the description you can directly go ahead here and download this project and you can start to code you don't have to follow all these steps whatever i did so it all depends on your comfort that you want to go over this or you want to follow the those two steps all right so once that has been installed and everything is configured so what we will do is we will start try to create our first component okay so the first thing we have to design is the nav bar okay the nav part of our application let me show you so what will target will target this nav bar first and then maybe this left hand side and then this center part okay so let's go one by one so here inside this app i will create a component so for creating a component so we have a command ng g for generate c for component and the component name is nav bar okay so the navbar will be generated now as you can see the navbar has been created and it has updated the app module as well because this is our component all right so we will first go ahead and design this navbar component or better we can add one more component called as our to-do list okay if we need to add it we can do but if not we can directly write the code inside this so we will prefer that we will add one more and maybe we can use it so the second company will create is to do okay so this is going to be second component where we will be adding all our logics for that left hand side and that center part inside this component all right so this is also been created now and let's see if our module is updated or not so yeah you can see these two components are added in the module as well all right so let's first target our nav bar all right so let's go in the nav bar dot html let's remove this and the first thing we will try to do is add the matte toolbar okay so for using the toolbar so let's go on the website angular dot material dot io okay this one so in the components you can see we have a toolbar okay so if you scroll down we have a toolbar we can use this toolbar by importing this particular api all right this we have to import this and let's go inside your app module and just paste below this map toolbar module and that we have to import here inside this imports array so below this i'll say mat toolbar module okay now we can use the toolbar module inside your application so if you want to see it you can just copy some references from the example like how your mat should look like so we can copy this basic one which is this first one okay we can but yeah it all depends on our requirement so i better uh go ahead and write the code for it like how it should look and all that look and feel we can change it by our own so better because i will not be using this color so i will have my own custom color so i will go ahead and add my own okay so for adding the matte toolbar we can just say mad tool bar again you can copy and paste right it is all depends on you like how you want to proceed so it has an h1 tag which says angular 13 to do list to do application all right app let's let's make it very simple and we can also add here some custom styling so i will style it accordingly so i need to have a background color okay so i have a custom background set already so you can use any color which you want to so it all depends on you so i have my own custom created already so i'll be using that this blue color okay let's save this and let's see how it looks so for using this nav bar so we have to use copy the selector and the selector has to be pasted inside your app component.html so this is what the by default angular gives so let me remove all these things and let me just have that app nav bar so once you copy the selector here okay now we have to run the application to see the changes okay so i'll say ng serve and i will run this on some different port 4100 okay so this is how we can run our application on different port okay hit enter and let's wait for it to get compiled all right so our application is successfully compiled and it is running on localhost forward double zero so let's open this application side by side okay so i'll open it here so this is our already created one so we will try to replicate to this same one so you can see this color is like white so we will try to change this so let's go inside your css or not maybe in the html so you can directly change the color okay we can change the color as white so far use fff let's save this and let's check how it looks as you can see it is really angular 13 app okay so our header is ready now now we will try to focus on the left hand side okay of this this one so for that what we will do is first we will try to set the routing okay for this to do application so we'll go inside this approaching dot module and inside this routes we will be adding our first one which is path if our path is blank so i want to load a component which is our to-do to-do list component maybe this one to do component okay so this will load this particular component if i save this and let's check on the browser all right so we have to add some styling for it because it is showing on the top of that so for that okay so because the routing is not enabled maybe that is the reason yes that was correct so we have to write the router outlet for it to display that this one because the message should has been displayed about this to do works okay so let's see if it is working so yeah you can see this to do works is visible now all right so now let's try to style this one not style but maybe let's try to add all the script which is required so first we will create a container okay so this is the bootstrap class container fluid inside that i will have my row okay and inside the row i will divide this like section into two part so one part is for this one and another part is for this one okay so for that i will be using the cool md three so i will divide this into three is to maybe total is 12 so we can divide in three and the other part is into nine so i'll say div dot co md three okay and the second part will be div dot gold md9 okay so this section will have this one this part task name and stuff and the nine will have this part okay so let's see how we can add few things there okay so for that let me first try to add a dev and inside that i will add a matte card because it is a there is a card module which i have been added so for using a card so we can just go here and we can just search here for card in the material so for using a card we have to import this okay let's import this and inside go inside your app module paste this and in the imports we have to add that as well mat card module okay so now we can use the cards so go here and just add the code for it so i'll take div first and inside the div i will have a matte card okay so our card is added okay so inside the card we have a form right so we will create a form for it i do need this action okay so inside the form we have we have to use a mat form field okay so what a form field called so this is the form right material form so we have to use mat form so for that let's go in the form field and just check which one is suitable for us okay so we will see that let's go in the example so yeah we will be using this one this fourth option okay so i'll just copy this fourth one and i'll paste inside this form okay i know this will display a few errors and the reason is because we have to import as well right so you can see we have the api here we have to import it to remove all those error so i have copied that and let's go in the module to import okay so let's hit enter and have this form field module as well okay add form field module so this has also been added and you can see that error just gone okay so now we can use it if i save this and let's see how changes looks okay so we have a placeholder here and we have a card as well okay so now let's we will try to style it a bit so that's the reason i had this div on the top so i'll just say style this and i will have a background okay i'll need to have a background as a gray look a dark gray one maybe a blackish gray so for that three zero three zero three zero so this is the color which helps us to achieve it and we'll have a height of 93 if you put view height and yep that's it maybe let's save this and let's check okay so now this is okay this doesn't looks good so we have to style a bit so let me better copy this inside this div only so that we don't require that extra div okay and for matte card we can add a class we need some margin on the top okay all right so now this looks good that we have a sidebar for this and now we have this placeholder as well so you can see this is not visible just like this what we have here so the reason being is because we have to import uh the input module i guess i'm not sure so let's go here in the material and check what is the exact name so yeah you can see we have this input so we have to import this also matte input module so just copy this matte input module okay okay so it was a mistake so sorry so i'll copy this one and i'll go inside this app module.ts and again i will import this on the top and i have to mention this in this array as well imports array okay the name is mat input module okay let's see what okay let's save this and the compile is success all right so let's wait for it to get compiled yeah it is success and now we can see okay so now we can see we have this thing now you can see this is actually showing something very bad which is sent okay so the text it is showing so let's try to fix that okay so why it is not showing us the icon because we haven't imported the icon module okay so this is the mat icon so we can go here and just search for icons here okay so to use the matte icon we have to again import this module which is mat icon module all right so let's go again in the app module and add this see i'm going very step by step so that you can understand each and every step why i'm why i'm adding this what is the reason behind adding that module and all that okay so that you can also learn okay how to fix these things if we face the same error all right so again let's save this and let's see the changes on the browser if it is same or not now it looks similar to it what we have already but if you see one thing is still like i change it to 100 again and let me again change this 200 as well you can see this form is quite bigger as compared to this one okay so we need of 100 width for this so for that what we can do is we just have to tweak the css okay we have to change the css of matte form field so this is a matte form field we have to change this css so for that what i will do i will go inside the css of to-do component and inside that i will i will just use host and i'll say dot mat form field okay so this is the class of that mat form field and what i want to do is i want to have a width of hundred percent if i save this and let's see if the changes is applied yes now we can see it is taking the hundred percent width for this form okay so let's change some like see let's make it identical to this that we need to have a task name as a placeholder and we can have a hint as add a task name and also this button as well okay so for adding the button okay let's start with the button first because button is also an and we are using an angular material button so for that we have to go in this same website again and we can search for button here okay so for using the button we have to copy this imports and go inside our app module and paste it here the way i did for others okay the same way i'll add it in the array as well so matte button module and now i can use the button okay so let's go inside your to do component.html okay and we can just directly go ahead and add the button okay so we can see we have a hint here okay so let's try to change it one by one so first it was it should be a task name and we can put a hint as add task name okay so below the form field i can add the buttons as well so for adding the button so we will just say button and it is a matrix button so we can add matte raised button all right and we can give a color to it we can just say color as primary all right and so this is not done because we it looks as a pencil form right it look it was like a pencil so for that we need to use a matte icon okay oh no no for adding i think we just can have a text like this i'm so sorry we can have just text like this let's save it and see how it looks this is for adding purpose i'm so sorry i thought it is for update one so if i go here in the application yeah i can see the ad is visible now okay we can add a task name and we can just click on add to add the task all right but uh you can see this is in center so we will try to make that in center okay or like going forward once we see try to first add some functionality and then maybe we can do it all right so now what we have to do is now we can see we have a form okay so for form we have to create a form as well in the component so let's try to create a form in the component so what is the first step i have already like shown these things in my previous video if you don't know how to create form in angular so you can just go here on my youtube channel and you can just find how to create forms and all that you can see we have a login and sign up form validations in angular and all that so i will highly recommend you guys to go ahead and watch these videos like to getting know more about angular reactive forms all right so again let's go here and let's try to add the form so for adding the form we need three things first one is form builder form group and validators okay so first we will try to import all right so let's import three things whatever i have mentioned from where we have to import it it is coming from angular okay angular slash forms so what was the first thing it was form group the second is form builder and we will also add validation so for that we need a validators okay so these three things has been added so the first thing we need is that our form name okay so for giving the form we can just give a name as to do form you can say to do form type form group okay so one person has asked me about this why to add exclamation for this because this exclamation is because it is a strict checking of angular okay that it tells that this is not been initialized and whenever we put this exclamation it tells that this value will be defined in future like in future means in constructor or maybe in ngon in it so if you if you really want to just know more you can just so i will be creating a video soon about strip strip what we say a strict checking of typescript so this comes under that okay so this is because of typescript not because of angular okay so now this form is ready now for the form what i'll do is so we need a form builder so we'll say private fps form builder and we will try to initialize the form by to do form this is equals to this dot uh what was the fb dot group we have to group the form okay so it we were having only one single item so we can just uh group that single thing by just saying item okay and let's try to add the validation as well that it has a required validation so we can say validators dot required okay so in this way our form is ready we can just copy this form name and we can have to add here as well we have a form here so we will add a form group okay so the form group we have to paste the name okay let's remove this form group and let's give the name as to do form okay so this is our form group which has this name to do form okay now you can see this throws an error because we have not imported first thing is our the mean important thing the reactive form because we are using reactive forms so for that we have to import reactive forms module okay and you can see this is auto imported on the top as well from angular slash form so always whenever you're using forms we have to import this inside your app.module.ts file all right now if you go here so that error is gone so this is our form okay and we can see we have a form control name which is items so let's try to give the name as well for this input called as form control name and let's give a name as item okay it should be inside this sorry so yeah so this is how our form looks so our form is ready okay so now all we have to do is we have to create a list okay so you can see we have three list there we have uh let's me just open this application to explain you better so we have three list here to do list in progress list and done list okay so we will be creating thrill list okay in the ui as well oh sorry in the component so let's go into the component and let's try to add our first list so the first thing will be our task task okay and we can give a type to it all right because this is going to be a list and again in the same way we will add in progress list better you can copy and paste if you want i'm just typing it and the last one will be the done all right so this is done so we have three list now task and progress and done all right so why i have added this you will come to know very soon so let me just save this for now and let me just try to complete the ui part and then maybe we will jump to this one this part all right okay so let's come here in the html and okay okay one more thing let's do it we can disable this so we can disable this okay so for disabling it we can it's very easy that we just have to see that our form is invalid or not so we said to do so this is the form so we can copy this form if it is invalid okay the form is invalid so this will be disabled okay all right so let's try to come and design the second part which is the three section which we have all right so for doing that we need to have a drag and drop module okay so this is a drag and drop thing so for the drag and drop what i have used is if you go here in the angular material okay in the cdk part we have a drag and drop maybe here this one okay so for using drag and drop we have to import this api call like this is comes under this api we have to import this import drag and drop module so copy this and go inside your app module.ts okay and this has to be added in array as well this imports array drag and drop module okay let's save this now we can easily use that drag and drop thing so let's go again on this and let's click on examples you can see our task looks something like this only we can dragging and dropping it going on the top so we can just see here how they have actually did it and we can make use of this inside your application as well all right so here we can see we have to use this one so i'll just copy this and i'll go inside our application and i'll paste it in the next section which is our cool md6 so now all the thing will turn inside this cool md9 sorry nine part okay so it has all it is asking for all those lists and stuff okay so the first thing we will try to check okay so how we can design this stuff so we can just go here and try to divide this into some different different groups okay because it was having three groups if i just go here in this application so it is divided into three part so the cool md9 is divided into next three part okay so for that i will have to use little bit of bootstrap okay so i'll just go here and minimize this and this okay so this is this is what our group was so let me just say control z for the first first let me try to divide the divided into two part all right so for that what i will do is maybe i'll just go step by step so it is this div let's take a div and we are using cdk drop list group so we can just a cdk so you can see we will get this option cdk drop list group all right so inside this group we will add bootstrap class called as steve dot row and this will be divided into four like three parts so i'll say dave dot co md four so i will be dividing this into 4 so we will come to know why i did this very soon yep so now you can see this will be for uh to do now this is not how we comment here i'm so sorry so we can comment this by kc so this is for to do part this is for in progress okay and this will be for your done section so we will code this now for to do and let's go this is the reason that i always go step by step so that there should no not a single doubt okay so you can just say thank you to me in the comments not by asking questions okay so let's see how we can try to complete this one as well okay so for that now what we will do is now we will divided this into different different part now we have to use the container okay so let's go here on the drag and drop this thing okay so now we have a group already on the top okay so now we have to copy one single section okay we can copy this section and we can paste it in the to-do list all right now this is asking for data like we need a cdk let's drop data so for giving it this a data so first thing was the task we have already created that so this task is coming from this so this is this actually expects a list so this is the task which we are provided here to this okay now it tells that you need to have a drop method and you need to have this to do so this will also replace by this one so i'll copy this and paste it here okay so now let's create this drop event as well so for that we can just copy it from here in the ts file and we can paste all right so i think this is it all right so let's go here and we can paste it below here okay so we have to actually import all these things from cdk drag and drop we will import this as well and this as well if you go on the top you can see this has been imported from here all right so if this doesn't works for you so you can directly go here and import manually from angular cdk slash drag and drop all right so now this this event is also ready for us so we haven't code anything so this is what angular material provides all right so now i can see that i have used everywhere any any so better we can create a model okay so for creating a model we can just create a folder first maybe not in this to-do list but yeah outside this so we will create a folder model and inside the model we will add our interface okay so the interface theme will be task or maybe i can say i task because it's interface all right task dot yes okay this is not the good name and convention i can say tasks dot ps and we can give the name to it by i task so we can just say export interface all right so we have to export this interface also export interface and we can give the interface name as i task so this has two things it has a description description of type string okay and the second thing it will have is done of type boolean that if my task is done or not if it is done section then it will be true okay so this is how our i task looks like and now we will be using this now this is our type ready so this will use all over here so wherever we have any so now this will be replaced by i task okay now you can see this is imported as well on the top auto imported again this will also change is i task and this will also be changed to eye task okay all right throw some error so let's see how to tackle that okay so this is actually telling for the event so let's try to fix this also because in the drag and drop list it will not be a list of string it will be a list of i task okay so that error is gone so this is what we have changed all those so we have defined the type how what is the type of our array so it is of type this i task okay so this part is also done all right so now what we have to do is so let's try to save this first and then maybe we can see what all changes is required at our point of time so let's try to save and check okay so it's compiled successful and okay now we can see we have a to do okay on the top so now let's try to style that okay so we i can see we haven't imported any styling so what we will do go here in the angular material okay from the css part you can copy all all the css and you can paste it here below this okay let's save this now if you go here we can see a section ready okay where we can drag and drop our items all right all right okay then let's try to style a bit okay so we have this drag and drop ready so what else we require so we require two more section okay so the first section is done which is to-do list so another section will be for your um what we say in progress and another will be for done so let's paste it below and in the same way for done as well if i save this and if i change this all so this is done and maybe i should use gaps yep and this one as in progress okay and this was our to-do let's save and check all the changes so we have three section ready to do in progress and done okay so now let's try to add some some of the validation things and stuff so that we can add we get because our things are almost ready we just have to add few data here and there okay but before that for the to-do list we have copy pasted so we have to change few things so now this cdk dropped this list so this is in progress right so for that we will be using this this name in progress list so i'll copy this and paste here where is that here [Music] in progress and also in the cdk drop list data paste this all right and scroll down for done also we will be using the done and this will also be done okay so one thing you know right we have we were having description okay so we we will be using the description part this item will be used by that all right so for that we will be using the description so because while adding it we will try to add in term of a description that item will be of type description i know this can confuse a bit so let's try to first add it and then the confusion will be clear okay so let's go here and we will try to add our first item so for that the logic is very simple okay so we have an array and we have to push our data inside it so let's try to create a method add task okay so for adding a task so we have this task list so we can say this dot task dot push okay so we will push a data inside it so we will push an object basically inside that it will have a description and second thing it will have oh maybe better what we can do this was a description and the second thing was done done was false okay like before whenever we are adding any data to it like it will be first blank right we don't have to uh put anything there so first thing it will be blank but for adding the description we are taking this from form right so we will say this dot to do form dot value dot what is the form control name it is item so copy this item and value dot item we have to put okay so in this way we have added a task all right as you can see this is of type i task and it has a description so whenever we have to display the array okay so we don't need just item because item is a group right it has group and done so we will be just saying item dot description okay in the same way we have to display this as well item dot description same for the done also dot description all right so let's save all the changes and we will see we will try to add one item and then we'll see how it works all right so for adding the item we have add button on the top but i don't think so it has a method called so this is the add button so we will have a click event and we'll say add task and we will save it okay so there is some error maybe no there is not so save successful and let's go here and try to add a task i'll say new task and if i click on this add i can see a new task has been added okay and we can drag and drop as well this new task here and here okay okay so this is how our task has been let's try to add one more task one more task and i click on add one more task has been added and we can drag and drop as you can see okay so the drag and drop works superbly so this is what how we can add a task okay so let's try to see how we can actually delete delete a task okay so for that first we will try to design because we need to have a delete button okay so we will try to use something like this so it should have a delete and it should have a edit button for this so we will try to add those two now okay so for that what we will do is we have to use the first we have to style it a bit so let's try to see how we can style style them okay so this is our task name so let's try till here okay so this is our description where it was ended and below this description we can add a div one more div okay we will have a div dot i can say a box this is the class we will be creating now okay and inside that we will have a button okay so this button is matte icon button so i'll say matte icon button okay and we will give a color to it color as one and this button will be having a function which will helps to delete delete the task okay and which task i want to delete i can take it by using the index so for that we'll say let i is equals to index in the ng for okay in the top you can see we have ng for so this i will take the index whichever we will select and that i will pass here that i okay so let's copy this method and we have to create in the component as well so below the add task you will see delete task okay and this will be of type number all right so for deleting the task it's very simple what we just need to just say that we have two splice i hope if you have don't know this method we use it in javascript so we have this this dot task okay so for the task i want to splice the item cells is nice so it deletes so which one you want to delete okay i want to delete the item okay which is present from from that particular list to the first so i want from that index i want to delete one item so this is how we can use this delete okay so this has been done so let's go on the browser and let's see how it works so again i will add some random task one okay so we don't have that icon button so for that i'll have to add it now all right then so let's go ahead and add those two buttons okay so one button is already added and we have to add the second button which is for edit so for that we will be using the same and this time we have to use a matte icon last time we haven't used a mat icon so that was the problem it was not displaying so we will be using matte icon okay okay sorry it takes a class so we don't need a class all right so this will be delete and we don't need any class here so we'll remove this this is delete and also we need an edit so i'll just copy this [Music] and i'll paste it here control save and let's try to see how it looks i had a task i can see we are able to see it but you can see both are delayed so we'll have to see what went wrong i think the name i haven't edited so this will be edit and we have to change the color to primary okay now we can see whenever we add a list so it will take that okay we have these two buttons now delete and edit so for deleting we'll have to see if it is working or not if i click on here so yeah the item has been deleted so let me add few more maybe few more random tasks okay let me add one more and let me add one more now let me delete this four deleted one deleted hello deleted and seven deleted so our delete is working okay for total list so we are just focusing one at a time okay so let's try to just see it how we can style because i use that box so i'll style a bit so i have used a class here box so let me just style this inside this particular class okay so i'll go here maybe below this i'll use the claws box and i'll say display grid so that it should display so i'll say display autoflow as column sorry column and grid gap i want to give grid okay column cap white is not visible i'm not sure i'll give 10 pixel so let's save this and let's see the changes so i'm not expecting a major change but yeah it looks pretty better as compared to the previous one okay so this is also working fine all right so let's try to add the same things inside the others so i'll copy this again so i think this is no need to copy we just need a delete one so i'll copy this delete and go in the in progress as i have told you for in progress only delete works okay so this i throws an error so let's see how to fix okay so we don't have that index so let i is equals to index and let's save this and check okay so this actually use this method called as delete task but we need delete in progress so i'll copy the same and i'll paste it here and i'll say delete in progress in progress task i'll copy the same method here and i will paste for this okay let's save all and see the changes i'll add apple in the task and i can drag this to in progress now you can see that icon is not visible and now i can delete also oops the delete is not working oh okay because we haven't called the method so let's try to call the method also delete in progress so this actually deletes in progress item all right so this is because we are trying to remove from task now we have to remove it from in progress so this is the in progress list and from that list i want to remove one item so now it will work okay let me create same method for done as well because in future we need it delete done task okay let's save this so now we have if you see we have three methods now okay for adding a task and also for deleting the three okay so now i think we need one more which is which is our for updating for updating i think i haven't done anything okay so i'll try to do for update so what we can do is okay so whenever i'm clicking on this edit button so let me first demonstrate that what we need and then maybe later on we can try to see how we can do it so whenever we click on this edit button okay whenever you click on this edit button i want to display that on this particular thing so for that what i will do is i will create a method called as on edit okay so whenever i click on edit so at that time i want to so i will be taking two things from the user so first i'll take the item of type i task okay and the second thing i want is the index number okay and i will also take create a property called as update id so which which one i have to update so for that i have taken this update id and also i will create a property called as is edit enabled like whenever we click on edit button okay so it will be uh what we say true and if it is not click then it will be false so this will be of type boolean and initial this value will be false okay so i have added these two property now and this two property will be helping me for achieving my task for on edit and updating the item all right so whenever i click on this on edit so let's use this method also on the ui so let's see where we have edit so yeah this is our edit so let me remove this one with replace with this on edit and this requires two parameters the first thing we already have the index and the one thing we need item so i have passed item and index for this on edit so let's save it and let's try to change write the logic for the on edit okay so whenever i click on this so what i'll do is try to update so i'll say this dot task okay so whatever id which i will get so for that okay sorry sorry first we have to update the form right whenever i click on edit i want to set the value of the form okay so for that i'll say this dot to do form dot okay the controls and the control name is item i want to set the value so i'll say set value value will be item dot description so i want to set the value of the description whenever user clicks on edit button okay so next step i'll do this dot updated id is equals to i so which id you want to update from the array so that i am taking this not to be very specific id but i would say index okay so which index you want to update from the array so this is what it is all right and the third thing will be like we clicked on on edit button right which means our ease edit is enabled correct so we will make this is edit enable as true all right now let's save this okay i'll go very slow all right so now this is done so now let me try to add few fields okay so first of all what i can say is on it should be called yet is called and we have to set the value okay things could look let's try to demonstrate it whatever we have done so i'll add a task add task one and added okay now let me remove this for now okay let's see if i click on this edit so i have to stick this value here wow it is ticking which means this works all right now what we will do now we will update this name but we can't see a update button correct this should be update button like we we don't need to add like if i click on this so one more is added i don't want to add i want to update this name to some different name correct see it is getting added every time so for that what i have to do is so i'll go here okay so i'll create one more button so this is for for this one this is for add button so i'll create one more button called as update okay so it calls so this is add and this is update all right okay so this will call update task so i know the mentor is not created so it will throw error okay and i will have a condition ngf like when i want to show add button and when i want to show update button so is enabled so let me copy this better i can copy the name so this was the reason i have added this method is enabled so you can see on the start of the application it is false which means if it is false then i want to display the add button correct i want to display the add button okay but whenever i click on update okay whenever i click on that edit button so what i'll do okay let me just say ng if and i'll say is enabled so whenever my update is enabled so it will display my update button okay and this is throwing error because this method is not created so i will copy this method and i will create it on the component below this maybe yeah so for updating what i'll have to do is i'll say this dot task okay and i have that id right so i'll have this id this dot update id which which index i want to update so better i can change the name to update index the id looks very bad i think it's not the good name in convention so i'll say update index copy this and change this also and this also so it will update the index of this array okay first thing i want to update is description so i'll say description so this should be updated by the latest whatever the user adds to to form dot value dot item okay also i want to update the boolean which is this dot again we can copy and paste better to save some time copy and we will paste here and change this description to done and it will be false because it is in to do section it is in to-do list okay and once this is updated i want to reset the form i'll say this dot to do form dot reset okay once the form is reset i want to again change the updated index to undefined and this dot is enabled i didn't able to false that edit has been done so you can make it false now save this all okay and let's try to reset the form whenever we add okay so whenever we successfully add so after that we can reset the form so we can say this dot to do form dot reset okay let's save this and let's go on the browser to demonstrate it so we let's try to add to task task one once we add we can see form is reset and task is added let me add one more task task two again click on add task is added one more task task three click on add added so we have three tasks now and i want to update task number three as you can see once i click here i can see an update button now and if i change this name to task 3 updated and if i click on update now you can see it is not adding one more it is actually updating that particular index value okay on that index it is updating that value so this is how our update is also working okay and now let's try to drag and drop okay so this works you can see the edit button is gone and we can complete the task by putting it in the done section okay so you can see it is going in the done but we need two things here as well delete and that check mark so let's try to add those two now okay so for that let's again open up our code maybe first we will try to modify the html okay so for that it is quite simple like it's just a copy and paste in my in my context actually so what we'll do is we'll copy this one uh maybe on the top yeah this box just copy this and we have to paste here after this description so you can see after this we can paste it this thing here okay so now it should have a delete so that's that's correct it should have a delete daily task we created delete done task if you remember okay now we don't need this one okay and we don't need this delete icon as well actually we need a check circle so for that it will say check circle okay and this i is swinging because we don't have the index so i'll say let i equals to index now this will be removed now if i save this okay and now let's go on the browser and check if the task name is added stick it in drop that removed go in that okay can you see this check works that this task is completed okay we can if you want we can change the color also so for that we can just edit this and change by your own so we'll do the do this thing in the last all right so now we can see that all the functionality actually works okay that edit functionality update and everything is working so let's try to demonstrate again for by adding two three tasks ask one plus three six so we have few tasks we can drag it we can i can change the position as well i can again take it to the in progress and we can mark it as done which means our to-do list application is working but we need to style a bit like if you see this one so it has look good looking background and also this one this header part okay so for that header part we will try to change a bit because you can see we need to have this index also like uh how many task is in to-do list in progress and done all right so we will try to add that also so let's go here so this is mostly the styling part now let's try to focus there so let me just open this all right so here in the to-do list so we will be creating a span span tag okay so span tag will be basically helping us that if it is visible or not when it should be visible if we have item more than one okay so after this to-do list we will create a span tag so sorry so space yep span so inside the span tag we have to display the length so we have task okay so this throws an error not sure why so okay task dot length okay so we have this task already this one dot length we are checking the length but when we have to display this so there is a condition so we will have a n g if condition and if if our task dot length is greater than 0 if it is greater than 0 then only we have to display this okay so i'll space and i'll add this so that it should look better okay so now i can copy the same so this we have done for to do so we have to same do for in progress okay so for this we have to replace this pi in progress if then progress dot length is greater than 0 then show the length again we have to copy this span tag and do for the done one so where is the done yeah this is the one so let's paste here and change it with done dot length and length okay if i save this okay let's go on the browser to test if i add a task i can see i can see it like to do minus one like one task is added if i drag it here in the in progress i can see it's added for done also it is added okay so which means that item works so now we just have to style this style this a bit so for the styling we will be just going here and let's create a class for the h2 tag okay so we'll create a class as head title and copy this class for all three columns so for done is done sorry it actually looks the same thing so yeah in progress well paste the same class it should be head not head okay and for to do also we will be adding the same okay let's save this and let's go in the scss so we were having a class head title i'm not sure the name is correct so i'll confirm it yeah it's head title okay and we will try to change the css a bit okay so for that what we will do is we will need a margin and padding as zero first of all so that there should be no gap between them so the margin is zero okay and padding is also zero all right i will give it a background let's give it a background color as rgb i have a color code with me so it's r gp and let's give a color code as 2 to 8 from 22 is the light gray and will give border radius okay this is because we haven't added this so that's why border radius as four pixel will give a color to the list as maybe we have to grip gray color so for that i'll use this code again it all depends on your like how good you are in css you can customize it all right so i'll give your phone size as 1.5 rim and i'll give fond weight as well font width as 600 and inside that we have a span oh so for the span i want to style it like 400 i want to keep it as normal so the font weight will be normal okay let's save this and see let's see the magic how it looks i'm hoping it to be look good okay so for these two it is working but not sure why it is not for to do so we'll see okay this should be head and now it should look exactly the same okay so now we just need to give a margin tops to this particular class because you can see we have already added margin top okay so we will need this as well so we need mt3 so that it should match like we have mp3 here and empty three here for the matte card now it should come in the line yep so this is what how it looks like now so now let's try to add the styling for the background okay so for that i will be using the global styling like because it should be visible throughout so let's try to add the styling globally so for that we have style.scss the global styling file we already have all this pre-built because of the angular material so yeah but we will try to add few background color okay for the body so for the body let me uh it is already there but i'll use this one okay white is not showing okay for the body i will add height let me give a height to the body as hundred percent okay and i'll give a background [Music] okay this is the linear gradient in this we will be using some like to left left hand side so i have a color code which is ff94 okay you can see this pinkish color and also for the second one we have 9870 okay f5 so it all depends again i'm telling it is not like you should follow the same css but yeah it all depends on the way you do and if you go here to see the changes it will not like it will reflect the way it was i'm so sorry it will reflect it and now what we have to do is now we have to center all these things so for that you can just use text center or maybe some bootstrap classes there to make things center okay so it all depends on your css form but you can see most of the part is done that we just we can add any item and we can drag and drop and we can make use of it all right now let me just try to add few paddings maybe i think padding is required zero doesn't looks good so we'll add some padding here let's go in the to-do yep in the scss i will add a padding of 10 maybe 10 pixel not sure how it looks but yeah let's give it a try yeah looks much better so now we can see this looks very good now we can add a task let's add a task and we can drag and drop to play with it okay so now if you want to change this color also so that also you can do let me just try to see how we can inspect this and we will try to change the color as well of that particular icon okay so this is the matte icon so we have to see what is the check box for that all right so for that again i'll go to the global styling because i have to change the color to green so we have something for it already which takes that accent color okay so you can just make use of this or you can pause the video you can just copy these things for your like how we can add this matte accent button in to it and let's save and check the result because we have to make it green color right so again let's add a task to check if it isn't done how it looks okay it's still not taking up that color so we'll see how to fix that okay all right so this is matt accent button maybe okay so let's see in the html all right okay so maybe because of this one i think i have added so let me just try to debug that so this is check circle okay and this should be taking a color so we i haven't provided the color this is the problem actually if you see here i should have sent set it to accent because we have added this css for this class in the global styling can you see this matte accent matte accent so if i save it and now if i go ahead and check again the task and if i drag and drop again now it should be in green color okay so yeah so this was it i guess so if you want i can just again brief it like what all those steps we have to follow to create this application all right so the first thing what i did i created this application and i have added two things first thing was bootstrap for adding the bootstrap we have added here the link so you can also add it this one i'm talking about and second thing you have to install angular material so once that is installed the second thing was i added these two component nav bar and to do okay so once that is added i configured the routing for displaying the to do component which is this one again the component you can see we have two things app nav bar and the router outlet so it displays the nav bar on the top and the router outlet will be helping us to route through the to-do list item okay so this was a brief about what what things we have did and you can see in the start like if you have any issue like creating this application as it was very step by step but if you still face any error any issue like by using any of this step you can just contact me anytime so i have my telegram link in the description you can just go ahead and ping me i will be definitely going to help you guys so you don't worry if you face any error okay so by solving the error this is how we learn okay so don't worry if you face any all right so this was it i think about this video if you find this video helpful you can give a thumbs up to this and you can subscribe to my channel to get more like updated to some more such videos which will be surely coming in future because i'm planning an angular blog application which will be dropped very soon and just still going to finish that application in just upcoming weeks okay so once that is done so the next thing will be the angular blog application all right so till that time bye bye guys and keep learning

Channel: Let's Program

Views: 46,106

Keywords: TODO app, create todo application, todo application in angular, angular 13 code, angular 13 project, angular todo application, to do app, angular todo material, angular drag and drop, angular drag drop, Angular material project, angular material UI, angular for beginners, angular course, angular latest project, angular 13 todo, TO DO Application in Angular 13, Angular Material TODO App, Angular Drag & Drop

Id: WTn2nVphSl8

Length: 72min 35sec (4355 seconds)

Published: Sat Mar 12 2022