Angular CRUD Tutorial - Learn Template Driven Forms in Angular 9 in under 30 minutes

hello and welcome to my channel today we will be learning crud operations in angular so let's get into it so for my angular project in which I have created a new angular project I've created a header component in which there's the D navbar nothing fancy in it I've created an employee component which just has a header of list of employees I've also added the shouting for this so if I go to the app routing wherever it is I've created I've said that for the base path just show me the employees component employees component nothing but the just text for now so yeah so let's start by creating a service for our application so in my terminal I would say ng gs4 service and I will give it a name in the folder called services slash employee so this will create us an employee service the first thing that we want to show in our application is the list of employees so we can we can create a few just random employees for our service I'll wait for this to create now that we have a service in the Services folder I will go to my service and I will create an employee of type employee array so I need to create an employee model so let's do that in our app we create a new folder called models and in that I will create a new file called employee dot model dot TS and I'll export the class employee and it will have four properties we'll say public ID which is of type number we'll have another property called name which is of type string another one called email of stripe string again and a phone number of type number so with that in place I can now call the employee model in our service so with that I will just instantiate I'll give just two values to it I'll say ID of one name to be anything and you can just do this for just any data that you want so now that we have our employee ID let's create the functions for this service so that it can return this one this employees to the component so I'll create an on get method and return the employee employees by doing that and once I am in the component which is here in the employees component I will just create a table and I will display it I on the on the roll I'll create a for loop here so I'll say ng for employee of employees which will get passed through from the component which we haven't done yet but inside the row we'll create four different DDS and give the employee ID over here so we're basically just binding the value into the HTML I'd also give the table a class of table which is a bootstrap class now basically we have to give the component so that this component fetches the employees from the service so I'll inject the service over here this is of type employee service and I'll use this in the on in it so I will say this store employee service dot on gate and this will basically fetch our employees and I will just assign this to a local employees object this is of type employee array and I'll use this to assign the value so now that we have fresher employees in our HTML it should display it and it is doing that correctly so now we have faced it I also want to create another TD which will have an element called all a and an edit button so basically it will act as a head button I also need to put another header it it would be just empty for now the router link for this edit button would be good go to the Edit component so I'll basically say it like this employee / edit and I will pass the parameter as employee dot ID so that the link to the edit button also holds the ID to it you can see in the left hand bottom corner so now that we have our show ready we can add a button to add an employee so we can do that by adding a button over here let's click that a class of button and button primary and say create or add employee rather button we'll use an anchor tag so that we can go to the component will give a route link of employee / add / 0 I'll tell you I am using this 0 so that we can check if the path contains 0 it will be in add mode or otherwise it is an edit mode and you say add edit component over here which I haven't created yet so I will say ngg see pages slash employees / edit this will create a component under our employees folder inside our employees we have this this ready so in here I will mention the path as employees or employee / ad / the ID and the component would be the Edit component and similarly for the edit mode I will have the path as employee / edit / the ID of the employee and the component would be the same as the edit component so now that we have a routing ready let's go back to the button and this outer link should take us to the to the edit component yeah it goes to the edit component we can give this a class of mt5 which gives a margin top it's back here and maybe in important of three suite now in the Edit component HTML will basically first have to see if these route has a zero the idea of zero it's basically an ad compared mode so we'll do that by introducing the activated route so we'll say private route of type activated route and import it from angular router and in the on in it will check if they're out dot snapshot dot param map dot get ID get the ID here and save it in somewhere locally soft type number what I can use number here like this and assign this this tone ID is the ID that we caught from here it would actually we have to convert it to a number because this this gets a string so I am explicitly converting it back to a number and I'll also introduce a header which will be a string and in header I will say this dot head is equal to if the ID is equal to zero then it's add employee otherwise it's in edit employee and put this header in n maybe a container with a margin top of five and an h2 tag and put the the header over here so it's a dynamic header it changes as per the mode so as you can see it's an ADD employee now we just remove the extra curly braces from here all right now that we have the add component let's create a form over here by for doing that we'll say a form element we don't need the action in that we will create a div form group class it's basically bootstraps form classes I will create a label and an input type of class form control let's see it back in action nothing is getting displayed all right it's it's coming over here I may have misspelled it and the label would be the ID this would we will just copy some more like this so we'll basically copy three more times for the name for the email and for the phone all right I form is in action now and maybe one more for the submit button I'll do that by specifying a button of type submit and call it save and in the form will say on ng submit do an on submit create a local reference of the form and assign it to ng form and assign this local variable to our on submit method we also have to give ng model to our input classes and also the name property so I'll do that in just a second all right so now we have our form ready all right sing there's some error we don't have the onsubmit method so let's create the onsubmit method over here in the Edit component on submit basically just write something to the log and see if our stuff is coming through we import the form is of type ng form so it gets imported from ng forms which is basically coming in from app dot module in the form of forms module over here that is important in here will just write the value of form dot value that is coming through so let's test our form here now I'll also give a class to be to the Save button alright let's test our form I'll have the console open if I say three let's try to save it it gets populated with all the details correct details so now basically we have to go back to a service now this is all good we'll go back to our service and implement a method over there so we'll say on add this dot employees dot push the element which is an employee which is coming into our method it is of type employee so this will push it now are we actually passing it through let's check that so in here instead of console dot log we'll say we create an element a local element employee is equal to is of type employee and is equal to an object which takes an IIT is formed dot value dot IIT and similarly takes our name and email and a phone and in here takes a name email and a phone and pass this employee to D service so this dot we don't have service over here so let's inject that private employees service is of type boy service so we'll say this dot employee service dot on add and pass the employee object in here so let's see this in action so once that is done on submit we should route it back to our home page so let's do that as well we would need these outer the from from angular we'll say private router of type router it it's taken from angular slash outer and we'll use this router to navigate back to the home page router dot navigate by URL it's going back to the home page so the path is empty so this should navigate us back and also show us the the newly added employee so let's try that once this is done home page we don't need to console add employee but it's a three three three and million a two and three if you save it we can see the new employee populated over here so that's good so now you implemented the displaying of the employees and also adding a new employee so let's work on deleting one all right to delete an employee we'll go back to the employees component because we need to create a button which would say an X you can give a class it's fine but on the click of this button we would say on delete and also pass the ID of this employee employer ID we don't have this method so let's implement this method in the TS while if we say on delete which dixon ID which is of type number will see this dot employees service dot on delete and past the number over here so let's implement on delete in the employee service let us say on delete it takes a number so let's find this employee first so we'll say let employee is equal to this dot employees not find X dot ID is the I that we have sent if we find it we will find the index of the employee now so the index would be this dot employee start index of employee zero and then now we will slice it so we'll say this dot employee starts splice with the index of that we found comma one this should delete the employee that we were searched searching for or we wanted to delete and showing something doesn't exist as of now we say it's deleted it's a wrong spelling on delete which works now so this should basically delete our employee let's test it now again we just have to employee so I will try to read the second one second employee works and we'll just try to just do the first one first one works so really it is working fine as well so let's work on the edit component now as you can see the Edit router goes to the employee / edit / - so if we go back to implement the Edit one we need to populate these fields with the details of that employee so let's go back in the edit component when the page has loaded or is loading we need to fetch the details of the employee so we will create a local employee which is of type employee and give it a new object we'll say the ID 0 the the name is empty the phone 0 the email is empty I'll tell you in a moment why we're doing that employee so let's assign we'll say if this start ID is 0 which is an ADD operation so if it is not zero we'll fetch the employee and we'll store it in here we'll use the employee service dot on get employee which we haven't implemented but we'll do that and pass the ID so now let's implement the on get employee on just the single employee on get employee which takes in an IIT and it is of type return this dot employees don't find my ID matches then return the employee back so when we are returning the employee back it gets stored in this employee object a local object and we just need to bind it to our HTML now in the Edit HTML we'll say the NT model we'll find it to the employee ID we'll do that with the other properties as well now that that's done let's see if we are able to fetch the employee it shows us an error in the edit component basically let's see what it says we'll go back to the edge component on TS this cannot find name idea because it should be this dot ID now that's done and let's go back to the home page and try to fetch the details so one it works fine you can see the first employee we get all the details back and if we try to update it nothing would happen because we haven't implemented updates so let's do that on the edit component when the form is submitted if this dot ID is zero that means it is in add mode add the employee else this dot employee service dot update or we can say on update and pass the employee object and route after successful thing so in the service we need to implement the on update method which takes in an employee of type employee let's find the employee first we can use this to find it now we can say old employee to just put them name to match and we can say employee dot IT so once we find that employee we will say old employee dot name is the new name we'll do that two more times for email and phone that's done and hopefully it should update it so let's let's see if we go back edit anything if we say employ one was say employee Samir and save it this updates it correctly so that's working now and if we check the existing functionality if we add an employee called three say Samir and Meili nadir calm with one heart monitor and say three three three and save it it works perfectly and to delete it if we delete the center one it works fine the first one works fine all of it works fine so now we have finished our Crudup raishin we saw how to delete add edit and update and show the records in angular 9 thanks so much for watching and if you liked my video please give the thumbs up and subscribe to my channel thanks so much

Channel: Sameer Saini

Views: 36,708

Keywords: Angular, HTML, CSS, Bootstrap, SPA, Website, Application, Routing, CRUD, AngularForms, TemplateForms, Form

Id: hCbK0EVLUX0

Length: 26min 1sec (1561 seconds)

Published: Fri Apr 24 2020