Todo List In Angular | Angular Todo List Project | Angular Tutorial For Beginners | Simplilearn

foreign and welcome back to another video by simply learn this is anubhav and in this video we will be creating a angularjs project but before we jump to the coding part if you haven't subscribed to our Channel already make sure to hit the Subscribe button and press the Bell icon so you will never miss any update from Simply learn so without further Ado let's see how our application will look like at the end of this video so let me show you however application will look like so like this our application will look like here you can add anything like like share and comment you can also remove it or Mark as done like this you just have to click and just remove if you want from here you can just write anything and just add like this if it's done or you want to remove it so before we jump to the coding part let me just tell you about a angular overview so what is angular angular is an open source JavaScript framework written in typescript Google maintains it and its primarily purpose is to develop single page applications as a framework angular has clear advantage while also providing the standard structure for developers on a team to work with it enables users to develop large application in a maintainable manner so there are so many advantages using angular but the two I love the most is data binding and browser compatibility you can also check out our videos on angular for deep understanding so what is data binding angular enables users to effortlessly move data from JavaScript code to view and react to user and events without having to write any code manually and the browser compatibility as angular is a cross-platform and compatible with multiple browsers an angular application can typically run on any browsers for example Chrome Firefox and others such as Windows Mac OS and Linux so let's open our Visual Studio code let's cut this first thing we're gonna do is we're gonna create an angular project for that let's open our command prompt in this command prompt we'll write a command npm install I think globally at angular CLI press enter so for this you must have node.js and npm install in your system it'll take a couple of seconds to install the files let's wait a minute meanwhile let me tell you why we use angular JavaScript is the most commonly used client-side scripting language it is written in HTML documents to enable interaction with web pages in many unique ways as it is relatively easy to learn language it is well suited for Developers for modern applications let's wait a couple of seconds more so whatever angular application is installed so now we're gonna create a project for that we're gonna write NG new and the project name here I'm gonna write angular ah press enter we're gonna ask you a few steps yes I'm gonna type CSS and it will install all the necessary packages let's wait a couple of seconds more let's discuss some other things about angular JavaScript idle for developing single page application that we all know but that requires modularity testability and developers probability perhaps not these days we have a variety of Frameworks and libraries designed to provide alternative Solutions with respect to where front-end Frameworks angular addresses many if not all of the issues developer face when using JavaScript on its own so angular is the best app or tool to develop applications so angular is the one thing I love the most so let's wait more seconds so all the packages are installed successfully so now let's now open our Visual Studio code let's cut this and inside this let's open our folder you can check the path of the file where you have installed this so in my system it's in the user yeah and angular wrap is here so I'm gonna open it so this is what it will open most of the code we are going to do is in this source file so we're going to open this app so let's delete this we're gonna not need it and or application we don't need routing as well and now let's open style.css let's delete this and let's write some Global styling here let's write margin if it does zero bad thing zero Order Box and fun family let's save this file and let's open index.html so here it's angular app now let's just run this and see how it's looking for that let's type control and backtech to open the terminal or you can also go here let me just first zoom out a little then new terminal inside this new terminal I'm gonna write in this earth open let me show you so we're gonna type yes enter let's wait a couple of seconds so as it's saying this can't compiled so let me see the issue here it's saying most of the times the app routing the file that I have deleted so because this file is has been called somewhere because of this this error is coming so I'm gonna go here and see where this file is called so we're gonna remove this part this app routing module part now let's save it now let's see where are the issues here again do the compiling until it's being compiled we're gonna see if where are the HDM file the CSS component is empty in this HTML only the issue is coming so it must be in the last of this yeah let's remove this save this file and as you can see it's compiled successfully we're gonna go again to a Wrangler application as you can see it's showing this store to create a new component we're gonna write this command NG generate component and the file or the project name angular material for that we're gonna write this command and like this there are so many other commands also if you want to learn angular you can just click on that and it will open the angular Iota tutorial part so we don't need that let's delete this and the application that we have created let's delete it also let's minimize this and let's work on our code minimize this as well you don't need components so let's delete this file let's delete this and here we'll write app it's there I'll use a twin tag and inside this I'm gonna write from simply done let's save it and see on our browser it's saying hello from simple isn't it amazing let's write here angular to do app let's just save it let's say angular21 now let's make it under editor let's write this one between this so we'll make this under header it's working fine no I'll create a component for that I'll create a new terminal in here I'll write a command Ng globally component components in that I'll write two two enter so as you can see here component inside this app has been created under to do so here as you can see so many to do components and TS file has been created a typescript file so everything looks good here we don't need this file so we're gonna remove it so let's minimize this and inside the components folder HTML let's delete it and create a class to do inside this class I'm gonna create another class let's name it as to do let's make this as to do's and this has two after that I'll create a class of ID so that we can fetch the numbers as for the junk data I'll write zero like that we'll write F class content whatever we're gonna post inside that so I'm going to write content and inside this I'm going to write my two two after that I need it there now we can create a button of class delete and then inside that I'm gonna write oh it's fine let's see in the browser how it's looking wait a couple of seconds and then read a code so first we're gonna call it inside this okay that's right amp tutus it's not fit [Music] let me see tool okay let's first see in the modules that should provide that two two component is automatically as you can see here the 2do component is automatically has been imported in this see the issue let's first see the component name inside this file okay the component is app.22 that's why it's not fetching let's delete head now save it compiled successfully zero my to do and remove button let's move forward now so this is fine but we need to Loop this how many times so because of that we can't write it so many times for that we're gonna do create a array inside this to do component under this Constructor now we can use angular engine for that I'm gonna write title here I'm gonna write two two not component let's see so let's save this file in will go back to our to do a company dot HTML and inside this we're gonna call this class so the name of the class here is title that's why I'm calling this here let's see you will see to do if we'll change this to to app now let's save this it will show us to do app okay so this is how we can inject our variables inside the Dom so now let's delete it to tools let's add here now let's save this let's compile Ireland satisfied only title so we have created an area so let's create a file because we don't want to access it from here so we create a file let's name it as to do well let's models first let's just create a folder first inside these models will create a file you to dot screen inside this we'll explore class to do yeah well if the content but freeing and it'll get completed we'll get cool so as you can see here and then and so guys oh sign it's looking fine now let's save this file let's move forward let's first import you do we'll import this module to dot TS file so let's end this 2-2 from take modules one two this is the path of this so let's see save this we have to write doodle array components are done so we will this is a keyword so this array exit this here I will write content let's it's true complete completed okay it's content what we are going to show so it's will come under okay first content and here we'll write true so it's fine we'll create two so we'll copy it from here paste it under there it looks let's save this the error is coming can't fetch it so I guess the reason behind it is it's switching in yeah let's save this still compilation error is coming deleted let's try similar only we're gonna have to work on our codes let's minimize this now here we'll call it function attribute for the asterisk equals to let to do equals and then let I equals to index and they can become the hairs so this looks fine save it so it can't fit it so you know as the index here it's not fitting oh okay we have declared here as I as index so we're gonna write I let's save it quite successfully one okay fine before we go deeper into the code I'm gonna copy the CSS file from here let's copy this and we're gonna paste it component part there are just simple CSS commands we'll get this code in the description box let's save this let's cut this is not fetched C oh mistake these CSS should come under total company.css let's save this save and cut this also on this now we'll open a gram so our application is going to look like this is buttons are not functional right now but we'll make it functional so let's let's style it remove will remain the same because it is coming under the button part now we're gonna call methods and the methods are like just functions okay no index at to do it complete when it will get complete then Mark as done otherwise empty so it's done it's completed okay let's see this now what we're gonna do is we're gonna make method or function so that whenever we click on this part will just get cut or Mark as done Sudan I'm gonna go to this to the component and under this I'm going to create a method done and I'm gonna pass the ID and inside this this dot map don't worry I'm gonna tell you how this is working and what I'm doing it's not fetching V and I just wait where I'm gonna write see if I is equals to equals to ID then P Dot P did we'll get cut or equals to not V Dot dot completed or if not then return V so what I'm gonna do here is okay this is left I'm gonna pass the number here by the number inside this ID things look normal let's find the issue here what's the issue okay we have declared V and I but we can't fetch it because it's under this only so to access this V and I here also okay check this let's see it's second and it's coming like this let's go back to our code and make it as only let's make this also this both are coming like this okay let's The Click function side and side over component EML okay here only clear click whenever we click on any item I'll pass through dog see and here we're gonna pass inside toggle hi so I will call this will pass through I save this here also in the delete path we're gonna do it later let's save it first see whenever we click on this LDL leader like this fine let's just go back to our code after this we're going to create a delete method let's name it as delete total this will implement inside remove like so to delete we will not write again this to do news equals to this Dot to do filter method I will call B B again stem will not repeat old mistake run right not equals to 2 by D when I is not equals to ID remove it this is a function so we're going to call it like we call inside our toggle done so we're going to save this going back to our code after this right click when I will click it will call it to do and inside this will pass index save this coming back to our component let's just create bar add to function so let's first declare here giving her number is whenever will put the number only that time it will work so we can't add a string here so that's why we are declaring here number let's just delete this from now save it and see the remote function is also working now going back to our code what we'll need is remove or ADD so now we'll work on let's let's create first thing we're gonna do is inside this dot HTML so we're not writing to help create a class there class name and inside this let's try create a form set this form will create input from the user so what he or she wants to enter in this or first thing we'll need is the text next we need is the name and put to after that please holder inside that box that will get created all right enter your after that you get the class of of input to do I have declared here as to do input no your hand let's one thing I'm forgetting is the in the model will get red because we are not so this is coming red because we haven't created this input to do the component so we're gonna create it right now only first here first let's just save this okay and let's delete okay let's just delete this save this it's coming red okay let's to do is a string of declaring what will come under the string is a Boolean only or not Boolean string value only let's open this here I'm gonna import huh Ng module triangular code I guess only module is already fetched so we're gonna need only import ant forms module angular oh let's see this hold it inside our side over app module see yes here we're gonna write this module with this app.euver even um this save as so I've called this one so it's working now this still is not working let's delete this so everything is working fine now there is no nothing and you can add it's not adding now everything is done you cannot see it and inside this we will call this Dot doodles dot push it content which will come under this will be content whatever comes under this and two two and then completed then false let's close this and after this let's create the empty string here called to do let's run this I have here looking for hello from another click on let's mark it as done we can also remove it yeah and we can also add it like share if this is Mark as done click here as done okay so with this we have reached the end of this tutorial thank you for watching and please subscribe to our Channel stay tuned to Simply learn thank you foreign [Music] hi there if you like this video subscribe to the simply learned YouTube channel and click here to watch similar videos turn it up and get certified click here

Channel: Simplilearn

Views: 14,680

Keywords: todo list in angular, angular todo list project, angular todo list, todo list in angular code, todo list app in angular, todo list in angular 14, todo list in angularjs, todo list in angular 12, to do app in angular, to do list angular, how to create todo list in angular, angular todo list tutorial, angular todo app tutorial, how to make todo list in angular, todo app in angular, todo list, angular 12 todo app, todo app in angularjs, simplilearn, angular todo app

Id: fFkF_TOkG2I

Length: 50min 0sec (3000 seconds)

Published: Tue Nov 15 2022