Angular To Do List App in 30 Minutes

quick demo of this video here we'll build an angular to-do app from scratch using Firebase this is the final project to insert a task provide the title here then click on this plus button data from this application is stored inside this file store DB here once you complete a task you can update the status like this the list is sorted such a way that always incompleted tasks will be there at the top of the list to permanently delete a task you can click on this trash icon here this app creation exercise will definitely teach you a lot about angular Basics and also integration with ADB lag Firebase so I'm sure you will find this tutorial helpful for your upcoming angular projects hence please watch till the end of this video and also I would like to ask you a favor if you find this video helpful please consider subscribing to this channel if you haven't yet and also please like and share this video with your friends and colleagues let's start with creating a new angular project inside this folder for that first of all we have to open command prompt from this same folder directory here so here is the shortcut just replace this folder path with the command CMD then hit enter it will open the the command prompt from the same directory as that of this folder here now in order to create a new angular project you could do this NG new the name of the app which is to do app hit enter during the process it may ask questions for initial configuration of the application so currently it is asking would you like to add routing into this application press n for no hit enter with stylesheet format would you like to use I will stick with CSS now currently it is installing some default npm packages into the application it may take a while based on your internet speed so please be patient finally here we have done with the app creation command as a result of that here we have the new folder with the same name as that of this project here to do app now in order to open this project folder inside vs code editor first of all we have to navigate into this folder to do apps so here we go CD the name of the folder hit enter currently we are inside the folder to do app now to open the folder inside vs code editor you could do this code space period or dot simple hit enter so here we have opened the project folder to do app inside vs code editor now before going further with the app development first of all let's look how this application looks like that we have to run this angular project here so open a new terminal now the first thing I want to do inside this terminal is that I want to hide this entire path trajectory here it's too long so that you could see the entire command that I'm gonna type here in a single line so here is the command prompt then dollar G this command will only work with command prompt as you can see inside this vs code terminal I am using command prompt you could see that inside this drop down here by default I'm using command prompt if you are using Powershell or other command tools inside this vscore terminal this command will not work okay hit enter boom that's it now in order to run an angular project you could do this NG surf hyphen o hit enter it will compile the project and open the same in your default web browser so this is how the default angular project looks like now I'm going to create a Firebase application for saving the data from this angular application here so first of all let's go to the website firebase.google.com now click on this go to console button now let's create a new Firebase project I will name it as to do app now inside this step disable this Google analytics which is not needed at this stage you can enable that if you want later okay so go ahead with create project so the new Firebase project is ready let's go ahead with continue now let's create a DB inside this Firebase project for that go ahead with fast store let's create a database so here we have two modes production mode and test mode in production mode we are not allowed to read or write into the database without authentication but in test mode we are allowed to read or write without any authentication so to get started with the development I will go ahead with the test mode later once you publish this application you can switch into production mode and you can customize the access rules as per your requirement now click on next now from this drop down we have to assign a location for the Cloud Server for this application so it should be near to most of your customers location okay once you set this click on enable so here we have created a brand new file store DB in a bit we'll be inserting task records into this DB from this angular application here we have configured this faster DB in test mode meaning we can read or write without any authentication and which is specified inside this roles app here so if you want to change any of these rules you can do that here okay so back to the data now we have to integrate this Firebase project into this angular application here for that back to the vs code let's open one more terminal and let's hide this long path here to clear this command tool you can do this type CLS hit enter now in order to interact with this Firebase project from this angular application we are going to use this npm package here angular forward slash file to install the same I will copy this command from here and let's paste it over here inside this terminal hit enter once it is done let me close this terminal here back to the Firebase project overview now under this get started session you could see this option for web along with Android and Apple click on this web option here to register this app let's provide a nickname register the app and then just copy this Firebase configuration object back to the editor open environment.ts file that's where we are going to save the configurations I will paste it over here like Firebase config that's it so I have assigned the copied object into this property Firebase config now let's pass this configuration object to the module that we have just inserted which is angular forward slash file for that open the default module.ts file which is app.module.ts now let me switch into the Zen mode of this vs code and thereby you could take a lot of space from this editor here so here is the shortcut for switching into the Zen mode hold Ctrl then press K release both of them then press is it that's it here we are inside the Zen mode now if you want to see the files or the project folder just press Ctrl B so here we have the Explorer through which we can open different files from the application to quit this mode double press Escape I like this Zen mode let me know what you think now we we have to import these classes from angular 5. so here we go from angular 4 slash Five forward slash Compact and we want to import angular 5 module now let me duplicate this we also need to import the file store module from compact forward slash file store let's import angular faster module now inside this Imports array we will do this from this class angular 5 module we have to call this method initialize app into this method we'll be passing the configuration that we have saved into this uh environment.ts file here so here we go environment dot Firebase config inside this environments folder we have two environment file one is with the extension.ts and the other is with the extension prod.ts this environment.ts file will be used when we are in testing mode or development mode and when you publish this application into a server this and your government.ts file will be used so most probably you will be using the same Firebase application so I will copy paste this Firebase config into this production environment also there might be people who are seeing environment.ts file for the first time angular configuration details are stored inside environment.ts file okay so that's what we have done Firebase config details is saved inside this environment TS file and we can access that through all the application like this now after this class we have to import this angular 5 Star module so let me paste that here now before going forward inside this project folder here I will create a text file app structure.txt inside that I will paste the app structure that we are going to build in a bit so first of all we have an SRC folder which is here and then app module folder inside that we have the app dot module.ts file which is here already now we have to create this component to do let me open the terminal for that you can press alt here because the menu that we have seen outside the Zen mode is not showing here in order to show the uh menu you could press alt then go to view then terminal or you could use this shortcut here Ctrl then backdick now to clear the accessing commands I will do this CLS Now to create this angular component here you could do this NG G4 generate C4 component and the name of the component which is to do now if we execute this component creation command it will create four files like this one for style sheet one for HTML one for testing purpose and here we have the original typescript file among these I want to skip these two files the component specific charge sheet and this test file here for skipping the start sheet I will do this hyphen s and in order to skip this test file here I could do this Double Dash skip test hit enter boom here we have the component to do with the corresponding HTML and typescript file now we have to create a service class called to do so here we go NG G4 generate S4 service and the name of the service class will be to do and we want to create this inside the fold dot share shared forward slash to do here also we have to skip the test file Double Dash skip test hit enter there we go here we have the new folder shared within that we have the to-do service class file so this much is already been here inside this project and here we are saying that inside the environment.ts file will be saving the Firebase connection details that we have already done now inside this index.html we have to have the CDN path for bootstrap and for an awesome icon so let's start customizing by adding bootstrap and phone over some icons into the application so go to the website getbootstrap.com let's go to the documentation you can see the bootstrap CDN reference for its style sheet here you could see the same inside this uh launching page here here we have the same CDN reference so I will copy this from here and let's paste it inside this index.html which is the root HTML file for any angular project so I will paste it just before this head and tag here like this let's add phone our sum icon CDN reference so for icons CDN reference copy CDN reference from this website cdnjs.com and I will be using this file here all dot main.css copy the link tag and let's paste it over here now let's customize this default angular application as per our requirement so everything starts from this index.html the whole HTML wrapping for this application is defined here now inside this body type the default app component will be displayed which you can see under this app module here app component so here we have the corresponding selector so in order to display an angular component in an HTML file attack with this selector is to be created that's what we see inside this index.html here app hyphen root so when this component is printed corresponding HTML app component.html will be displayed now this whole code is responsible for the default view of the application here so first of all let me get rid of that first of all we have a container from bootstrap and then a div with the class Row in order to align the content at Center we have justify content sender class now here we will be showing the component that we have just created which is to do component here so here's the corresponding selector app to do so let's create a selector with that app to do hit enter that's it now I want to wrap this component within the uh bootstrap grid like this div call md5 okay that's it let me save this so here we have wrapped the to-do component with the bootstrap grid system so here is the component to do and here we have the corresponding HTML inside that we have a para with the text to do works so it should be displayed in our web browser so let's check that here that's it inside this component I will wrap everything with bootstrap card element for that you could search the same inside the documentation here card and you could see the various examples so here we go first of all we need a div with the class card and let's apply some Shadow and let's apply some top margin of syringe 5. now here we have the card header let's align everything at sender inside that we have the app title within this H1 header and which is having this bootstrap class display 6. and also let's make it bold so here we have the app title to do list so here we have the card head up with the app title now let's go ahead with the card body we need the padding from all the sides of the range 4. now we need a text box and a button to post a to-do task if you want to know more about bootstrap form controls you can search like this for okay so here we have various form controls actually we are going to use input Group which is a combination of text box and a button like this a button attached with a text box so here we go div with the class input group inside that we have the text box with the class form control now let's assign the placeholder here as something our title goes here and here we have the attached button with the class BTN inside this button we want to show a phone over some icons so let's search that here phone our some icons so here we are inside the website phone osm.com forward slash icons so let's search for the plus button now make sure to filter the search result with this filter option here we are only allowed to use these icons since we are using them for free now let me choose this button here circle plus copy the corresponding eye tag by clicking on the element here back to the vs code paste it over here boom that's it now let's make this uh icon a little bit larger for that we could use this class uh from font over some icons which is for hyphen XL now when we click on this plus button here we have to save the corresponding to do task into this Firebase DB okay for that let's add a click event to the button so here we go click so we'll call this function on click now into this function we have to pass a reference to this text box here then only we will get the text that we have typed into it okay so here we go it starts with a pound simple like this and give it a name like this title input now let's pass this same here without the pound simple so here we have given a local reference to this input text box and we could access the control or element within this function here on click so let's define this function inside the uh corresponding component Clause typescript file here so here we have the function on click and for this function we have a single parameter title input which is of the type HTML input element now we can retrieve the text that we have typed into this text box with this reference like this title input dot value okay now we have to insert this two tasks into the Firebase DB here that can be done within this service class to do service so first of all let's import the required faster classes from the module angular file compact 4 slash file store we have to import angular firestore and then this class representing the angular file store collection now let's inject this faster class into this service class here like this private faster which is of the type angular file store now we'll be interacting with the Firebase project with this file store object here now in order to save the collection of records from the DB we'll be creating a collection like this firestore collection which is of the type angular file store collection now as you can see here we have a red squiggly line indicating we have to initialize this uh property within the Constructor this dot faster collection is equal to faster collection within that we'll be using this label to Do's now inside this first store DB we'll be creating a new node with the name to do's and under that will be saving all the uh to do tasks so with this faster collection we have a reference to the collection so rest of the operation can be done with this object here file store collection so let's check how to add a new record into the collection for that I will create a new function add to do which is having a single parameter title so this is the task that we have typed inside the text box here that we have already the inside the on click event and we'll be passing the same into this function in a bit so now we have to save this title into this first collection under this node to Do's that we could do this this DOT first collection dot add function can be called and we'll be creating a new record with this function so we are passing an object like this we'll be passing type till is equal to title so the new record will be having a property title and into that we'll be saving the title from the uh text box this is this property is receiving value from a property with the same name we can even simplify this index like this along with this property we will be having a property called is then indicating whether this to-do task is completed or not for new records the value will be false currently that's enough now back to the component Clause here to do component now we have to inject this to do service into this component to make use of the function that we have just created so here we go private to do service which is offset type to do service Clause just select this item from the auto suggestion corresponding import statement will be added at the top like this and now let's call this function add to do inside this on click even here so here we go this dot to do service dot add to do method can be called into it we can pass the value from the input text box like this so this will create a new task inside the app after that I want to clear this text box here so I will do this let me copy this and let's assign it with an empty string okay and we only need to do this when there is a value inside this text box here if the text box is empty we don't want to push the empty string into the Firebase DB for that I will add this if Clause here this operation will be only happened if there is a value inside the text box let's take that here back to the application let me create a new task click on the plus button the control is cleared now let's check whether it is inserted to the firestore collection here boom that's it so under the collection so a new collection is created with the name to Do's inside that we have the document here and the values inside that can be seen here for each record we insert into the collection there will be a corresponding ID which you can see here so this ID is used to uniquely identify each of your course inside the collection now let's check how to retrieve all the collection from a fast store collection like this that we can do inside this NG on a lifecycle hook here we'll make use of the five store collection that we have inside this uh service class here file store collection so here we go this dot to do service that's how we have injected the service class here from that we can access the faster collection and then we can make use of the um observable that is returned from this method of value changes if you hover on this function you could see that an absorbable is returned from this method that means whenever value changes inside this collection the Callback function that we are going to Define here will be invoked so we'll subscribe to that like this subscribe and within that we have a call back like this so whenever there is a change inside the file store collection meaning insert delete update operation whatever it may be this subscribe callback will be invoked so that's how an observable work now in order to store the return collection of Records I'm gonna create an array here called to-do's which is of the type any array and let's initialize that with an empty array here now we're gonna populate this inside this callback here so here we go this dot to those is equal to item meaning so this callback parameter item will be having the collection of a course that we have inside this faster DB here now let's render these to do tasks inside this component HTML so here we go to do component.html so here we have the input group just beneath that here we have the bootstrap list element with the class list group and each of the item can be displayed with this Li element having these class list group item now let's Loop through this array to do for that we can make use of this ng4 directive star ng4 let item of to-do's inside the LI element we'll be having a span element like this now let's display the to-do task title it can be accessed with this iteration variable item item dot title which is the property that we use to save inside this faster DB here title okay now let me save this and back to the application boom that's it here we have the to-do item now along with each task we need an element to change the status of the task for that I'm gonna use a phone over some icon here so we'll be using the itag with this bootstrap class text success and we'll be applying the corresponding phone awesome class for the icons using this ND class directive that is if item is done property is true then we will be using this class here for solid for Circle check so it will be a circle with check mark otherwise we'll be using the font over some icon like this for regular fast Circle so this will be a pure circle now let's check how this looks like so here we have the font over some icon now when we hover on this element we want to change the cursor style that we can do inside the global style sheet here styles.cs which is the outside this app module here styles.css so here we go within this list group item class if there is a span and if we hover on that we want to change the cursor to pointer okay let me save this that's it now if we click on this I tag here we want to change the status of this task that is we want to change this instant property for that I'm gonna add a click event here so here we have the click event on status change for now let's not pass any argument to this function here let's define this function inside the component inside this function we have to change the status of the corresponding record so we need a way of uniquely identifying the record inside this collection here that will be this unique ID here now let's check whether we are retrieving the same inside this NG on a lifecycle hook here for that I'm gonna just print this parameter item back to the application let's open the dev console see here we have the array and it is only having these two properties is then and title we have to retrieve this ID here for that I'm gonna do this and do this value changes method we're gonna pass an object as an argument saying we need the ID field within this property ID backwards V application that's it now we can uniquely identify a single to do task inside this collection here now back to this function on status change into this function we need two parameters ID which is of the type string then the new status which is of the type Boolean now in order to update the status I'm gonna Define a function inside this to do service class here update to do status having these two parameters ID new status we just need to do this in order to update our code from The Collection you can call this method dog to uniquely refer a document inside the collection by passing the ID that we have now we just need to call this method update and just pass an object with the updated properties so we just need to update this property is done with the new status that's it now like this we may need one more method for deleting error codes so here it is delete to do we just need one parameter ID which is of the type string to delete a record we just need to do this just call the delete method instead of update that's it now back to the component here let's call this service method here to do service dot update to do status and let's pass these uh arguments here now let's pass the arguments from this uh on click event here so first of all we need the ID which can be passed from this item iteration variable item dot ID along with that we have to pass the updated status so we could do this item dot status so this will return the current status we just need to change that uh to the opposite if it is pause we want to return true if it is true we want to return false so for that we can use this negation operator here that's it sorry the corresponding property is this one is done now let's try that here see this task is updated and you could see the same here now let's change the status back to its initial stage boom that's it see property is reset to false so that's how we change the status now let's check how to delete and entire task before that let me add few more tasks here called Mom client meeting now suppose we have done with the gym workouts and then we'll be changing the Status here so in a to-do task it is better to sort these items such a way that we already completed tasks will be listed at the bottom for that back to the NG on a life cycle hook let's remove this log statement here on this retrieved array we're gonna call this sort method and here we have the Callback function with these two parameters a comma B which is the comparison function in a sort method we have already discussed these in our JavaScript course so I will do this is then minus B dot is done for those who don't know the comparison method this is how it works currently we have the shortest compact syntax let me expand that here here we have the function body returning the value of this subtraction here it is explained in mdn documentation here so this is how it works if this comparison method retains a positive value then a comes after B if the comparison method retains negative value then a comes before B if it returns 0 then there is no change so that's what happens here actually this property is of the type Boolean but in this context it will be treated as a number so Boolean true will be treated as one Boolean fast will be treated as 0 so 1 minus 0 meaning this record a comes after B that is the record with is done property as false comes first if you are confused about this RM method sort I have explained this method in detail in my JavaScript course I have given the link in video description you can check out that from the if you want to be comfortable with angular or Firebase and related languages like JavaScript or typescript trip I have given some course recommendations in video description make sure to check it out now before implementing the final delete operation let's put these elements in their proper place in order to highlight this card here we already have a shade added to this card element along with that let's apply a background color that is slightly different from the Pure White you can go to index.html into this body let's add this bootstrap class BG light so instead of pure white here we have a light white color now let's add some padding to this card header here so here we have the card header let's apply some padding vertically off the range 4 and let's remove this border here for that we can add this class here border hyphen zero that's it now let's customize this input group here instead of keeping them outside this list I'm gonna paste them inside a list item like this so here we go Li with these classes list group item and let's move this input group here now here we have a lot of border so I will hide the border of this input text box here so here we have the class border hyphen zero and let's apply some padding vertically off the range three so this is how it looks like now I want to hide this Shadow here that we can add this glass Shadow none now let's customize this button a little bit it will change its color to Green so we can apply this class here text success and we also need to hide its border boom that's it now instead of keeping these list items stacked one over other without a gap let's add some breathing space in between them for that I'm gonna add bottom margin for each of the list item here so here we have applied the bottom margin for the list item containing the text box now let's apply the same for each of the to-do task items so let me copy this and pasting over here so this is how it looks like here we have some margin but you can't see it properly so I will add some border for each of the items here see this is how it looks like now let's add some padding for these task items here vertical padding of 0 inch three we have extra padding for this first input group here let's remove the default vertical padding so everything is of the same height now let's apply round corner for each of the items here for that we could do this rounded off the range three let's apply the same for these items also that's it now let's implement the final operation which is delete for that I'm going to add a span element after this to-do task here so here it is span and we want to float that to the right side so here we have the bootstrap class float end and let's apply this color text secondary inside that we'll be having this phone over some icon for trash can for solid for trash can save this back to the app so here we have the delete icon let's implement the on click event click we will deal that inside this function on delete into that we have to pass the corresponding of record ID let's define this function on delete inside the component here for this function we have a single parameter ID of the type string inside that we just need to call this a service method here delete to do so here we go this dot to do service dot delete to do and just pass the ID here let's check the same here currently we have three records and I'm gonna delete this record here for client meeting so here it is boom that's it see the corresponding record is deleted from the file store DB that's it guys you can download or clone this project from the GitHub repository Link in video description for more awesome videos like this please consider subscribing to this channel if you haven't yet please like and share this video with your friends and colleagues so that they can also benefit from this have a nice day bye

Channel: CodAffection

Views: 18,064

Keywords: to do app in angular 14, to do list app, how to create a to do list app in angular 14, angular 14 sample application, To Do List App Using Firebase, Firestore in Angular, Angular Beginners Tutorial, Angular Project

Id: kzl4IKAC8O4

Length: 34min 9sec (2049 seconds)

Published: Mon Oct 31 2022