Angular CRUD with Web API Tutorial Part #12 - Feature Module CRUD Tutorial

hi friends welcome back to arc tutorials we are continuing with our angular crud full tutorial series this is part 12 of it where we are trying to build crud operations including the methods like create update and delete in this particular episode just a quick recap in this particular series we are trying to build a feature module called products for our ecommerce shopping cart application welcome back friends my name is sridhar i bring over 10 years of experience as a full stack developer and i am here to share my knowledge on modern web technology stack including react angular node express mongodb and much more i'm also here to share my knowledge with you and also to learn from you all i know a lot of you are building your own feature modules as part of following this particular series i encourage you to write to me if you have any doubts any queries during any of this particular series tutorials that we have covered this is part of the angular crud full tutorial playlist the playlist link is in the description box below make sure you check it out we are trying to build a complete feature module called products for our e-commerce shopping cart application called shop for less right so we are almost nearing to the end of this particular series where we are building an end-to-end feature module and application from scratch today we will be learning how to do the thread methods which is create update and delete for our feature module so crud methods stand for create read update and delete so in the previous episode we have done view products view all products view by category today we will attempt add product update product and delete a product those are the three use cases we'll see in this particular episode all right so i've done some ground work to show you how things are set up right now let me show you so when you go to products we see the products that are listed we can search by category right we can search by soccer and we can see view all we can also click on an individual product and see the details right that is what we have done so far um additionally what i have done in the interest of saving time i have created a form already for create and update i don't want to do that repetitive of the form again so i've created that form again but i'll just capture some high level notes for you on create and update because it's important that you should know these details okay so i've created a form okay this is a bootstrap form right nothing nothing nothing crazy uh just simple just simple form with some fields right now to you can go to create product and you can see it's a simple basic form right so it doesn't have anything it's blank it has some drop down some text area some default values that you can put that's simple as that some of the important things to know things that i have set up in create forms template and component are so if you see here some of the important things that you should know are first you have to give this form a name right a template variable name using ng form right so that's an important piece of information remember uh give the form a name using template variable which is nothing but be defined using hash sign okay like this now second give all fields right give all fields a name attribute name and ng model okay this is mandatory so if you go and see my form i have given name equal to product name and ng model so this is nothing but one way data binding right so this is one way data binding right and finally in the template once on submit i'm calling a product and sending the entire form right so how do you do that you just add the submit and submit the form right and on submit event send the entire form right so these are some of the important things and where you will get errors right i can say common mistakes that a lot of people do are they do not import forms module in app module and since it's a feature product feature module right see product create product is inside the products feature module hence you have to import it in the products module as well now this is a common mistake a lot of you will do you will import it in the app module but you will think see that it's not giving so let me show you that error once so i'm going to comment the forms module in the products module okay see but i have it in my app module i have the forms in my app module i don't have my forms in my product module all right so now it is giving me error that it will say ng form is not a known element see ng form is not a known directive right so that's one of the common mistake a lot of you will do remember whenever working with feature modules you have to import the forms in the module the feature module as well as in the app module now that's number one mistake number 10 uh not binding data using ng model okay not using ng model again this is part of forms module so if you see error in ng model which means forms module is not imported right so these are some of the common mistakes that will happen right now let me quickly show you in the component what i've done i have defined the method i'm capturing the form right and this is the same object that i've captured the details right so if you see if you can say console.log form dot value you can see the entire form value that was submitted from the ui screen i am creating a new json object called new product and assigning the value from the form like form dot value dot product category dot product name description so these are all the values which are entered by the user except for id equal to 10 right because this will be a unique id right so remember id field will be auto generated and unique that but in my in our case i have stubbed it okay make sure you don't you know this fact all right so once you have it then i'm calling the product service and calling the create product because we implemented it in the previous episode when we defined our service and passing the new product and subscribing it to the data once it is done it will reload and add it to the screen okay now let me show you that one by one so we are in create product there is no error here it's compiled successfully so let's say i'm going to add um say golf t-shirt right i'm going to say golf t-shirts or say soccer t-shirts or say um ping pong t-shirts right i'm going to category 1 2 3 so they are sports category this is new line of sports t-shirts give some rating to it initial color again that's up to you whichever color you want whether it's available or not product price give a value to it right again these are free text right now but feel free to um kind of put validations etc so as as for the functionality i'm not putting any validation but feel free to add them as you feel along so now i'm going to show you that when you submit it will print the entire form right it will print the entire form here and the object and it will process the data okay so and i also see some error it says internal server error okay so let's see that why okay because maybe this id is already added that's the one of the reasons that it goes like that let me try and add it again okay ping pong t-shirts category one product this is this is new line of products rating two product color red is available yes product price 200 reviews are three or two and then now see console clear error and submit okay so it has submitted and it will reload the page which means it has submitted and how do we know that let's go to view all products and you see ping pong t-shirts added the price is 200 this is new line of products right so simple right create is simple now this is this is pretty straightforward use case you just have to create an object assign all the value from the form to the object pass that object to the create method and in the create method in the service we are doing a post right because we are creating a new resource so this we had learned in the in the episode where we have created the services so that's pretty straightforward code of create right now talk about now let's talk about update code right update code is exactly same like create except for two references one first we will capture the product id of the product that we are trying to edit right second we will first read the data of the product or i should say read the existing data of the product the third step is we will use two-way data binding to map the fields on the screen and finally we do a put method call to update the product simple right something similar on the same lines like create right so let's see that now so what i've done in the view product let's throw in a link like this ahref which is product slash update product slash product id so what will happen when you open any particular product you would see a link it says product you see here in the below bottom it will say update product slash 4 right that's the product id which is 4 now that's the route we configured now in when we say update product go to component in the ng on it we are capturing the product id this we have seen when we were doing the routing setup so we have got the product id that is nothing but the four now using the product service we are saying view product that means view product we used it in view com view product also again we are calling it here so that we can pass the product id and get the existing data of the product okay so this is important because we are getting the product data now once we have got it i am capturing it into a variable which is of type product now we have the all the details of this particular product in this particular variable so let's go to our html and we will use two-way data binding right so if you see here this is extremely important right in the in the in the create we used ng model right for data binding and we know that we it was one way data binding in the update we are using two-way data binding something like this right so using this banana operator right so you have the square bracket and then the method operator so we have it here let's go to our template now we are saying ng model equal to product dot product name right now take that similarly and put it for all the other places wherever you have it let's say here like this and this is what we are calling it as product category right and but this should be the same name as that is available in our product right so we'll have to check that here and it is called category id so this will be category id let's see that now i'm in the products page click on update product you come to update product you see the value you see the value 3 here now i'm going to add it to the description here i'm going to add and for description we call it as description okay so here we'll say description right so product description goes here now the next one is product rating right so again this you can leave it as it is because we again we want the user to select it right so i'm not going to map it here but if you want to show you can always loop and check which one was selected assign that to it product color let's assign it here quickly i'm trying to keep this tutorial easy and simple for you and not rush you at the same time don't want to complicate things for you all right so i understand the idea work with few fields if you are a beginner you will know the importance of working with small pieces of code all right so finally i'm going to map the price right so we see the value here if you are really not sure what the values were so go here go back here and we said sports jersey right so now see here sports jersey the value is sports jesse you have value two third two three three zero you have two three three zero right the product description goes here that is what is captured here right so this is how you are reading the value right so now we will put this and say this has to be update product okay so now you see it says update product so now we can change the details so i have called on submit we are calling a method update product and we are again sending the entire form now you can call it update product form here or you can leave the same form that doesn't matter whatever name so let's define the update product here and here i have update product it is nothing but a simple form right so what we'll do we'll introduce our this dot product service dot update product and it will take two parameters product id and product body so we know that this dot product id is the one that we are working with and next we are going to take the entire object which is form dot value okay but before we do that it's always a good idea like how we didn't create product right always build an object always always build an object never directly do it so again here in the update form i'm building this object date product object and here i'm going to give the value as dot id now see it's important to see what is the values that are capturing right so to start with first we'll just do a plot form and we will just comment off this entire thing for now so remember friends this is a gradual process you will not get it right i mean i have i sincerely hope that you all get it right but even if you don't get it remember that you need to debug you have to learn to improve your debugging skills right so it's not printing any update product update console.log form so here we have update product and we have update product form is ng form and let's see it here cannot be of product name on line number five cannot read property of product name product dot details product name okay uh just one quick second let's see where else it is saying cannot read property product details dot product name okay so let's do one thing because it's mapping twice uh that's the problem so i'm going to get rid of it here okay so this is the same name that we will map it here okay so now we should not see that error okay so category id description okay let's quickly check this out product name of undefined product name of undefined uh cannot read property of undefined okay let's just hold on to that thought for one quick minute let's go ahead clean this up first okay so it's submitting the form i think it's some value that has got changed so we will get back to it but what we'll do is we'll continue building on it on the product because it's not finding it here okay so what i'm going to do i'm going to map it here each one of it and we're going to go into product details dot product details dot product name and we have mapped the data here in the product details product data okay let's build on it that will not concern us we can see that later okay so once we have it here we have the form that we are reading you see this values now take that values as it is and map it into the form okay so we will now have the new name product name description and then we have the product available [Music] that's form dot available i'll leave it at one and then rating pricing that remains same category id should be your category id okay perfect so that's the form we have got now we are good to go and uncomment this here and we are going to comment this off here dot subscribe data and let's console log the data for now right and this will be the product id the form value that we are passing okay that duplicate identifier update is never reassigned so we can use it as a const because we never we are not updating that value anywhere right okay so far so good now we are calling the progress and updating the service so what i'm going to say i'm going to say jessie's sports jersey 2 right so now we are calling it sports jersey 2. so it has updated let's see it in our console okay now let's go to view all products it still sports jersey so let's see update product now we have got the product details and we will check for the call that is going out uh it still says cannot read property of update product name product detail start product name okay let's just check that for one quick minute uh for for some reason i don't know why it is not binding that data let's check it real quick no that's not the problem okay since i'm doing a live coding i don't know well we'll take a look at it i'll debug it later uh when we have time okay uh product details dot product name the best way to do that is sometimes just console.log they start product details so when you do that you will know what object you are working with that's the easy way to debug okay so here it clearly says there is product name right uh so there is no reason why that message should come anyways we'll see that later or maybe i complicated it multiple times product name okay product name the sequence should not matter okay friends i'll see that later i don't want to waste time on it uh let's get going here and call this form and see what's happening here so here i'm going to say sports jersey 2 and in the console i'm going to go so here it says url not found right that's because of the error in the api so let's go here it should be product slash should be product slash the product id now it should work so i'm going to say clear errors i'm going to say sports jersey 2 and saying product 2 it got updated now let's see now it shows product jersey 2. so go to view all products scroll down so now you see the product jersey is updated with id as product jc2 again we can update and i'm going to say this as 3000 update the product once it's updated it will reload and if you go here now it says 3000 so this is how we can achieve the create and edit edit functionality on the screens i will leave delete as a homework for you guys for you guys to try okay but i'll give you some steps that you can follow so just go to your view product throw in a link just like how you gave it for update just throw in one more link and say delete product here make it delete product and now you would see when you open any of these products you would see two links one is update product one is delete right so when you go to delete you can maybe show a model window right so create a link first like how i did in view project view product and then this is optional okay optional is to show a model window or confirmation confirmation to delete right on successful safe yes then just go ahead and delete it so how do you do that by calling product service dot delete product method right so before that you we are already anyway capturing right capture the product product id of the product and for these call the method which is delete product right it's pretty straightforward if you see the delete product we already are already capturing the product id so all you need to do here is something like just call the method that's all you have to do right so here i'm going to say product service dot product service okay uh private and then once you get that id then you can say this dot product service dot delete product and here you're passing the id of that element so say dot delete element dot subscribe data right so console.log deleted product and it will reload and show you the output that's all i think all you have to do now is put that model window like i said delete product data okay cool so we have the element we are passing the id now let's go back to all products and try and delete one say this one so i will go and say product delete works so it would have got deleted now you should not see okay it's still not so there was some error let's see that uh open this and say delete product so there is an error it says delete product slash 11 the url response is wrong so let's see that first quickly and here i'm going to say dot delete product url this should be products not product yep so now it will reload and it will tell us that it's deleted product right so now you go to all products you will not see the ping pong right similarly i'll go to formal shirt i'll click delete it says delete worked now you see it's not there right so it's deleted from our json object all right that's so that's how you achieve create update and delete uh for our feature modules uh give it a try uh it will not you'll i'm sure you'll run into some issues do let me know what they are i'll be happy to help you and debug these are long series uh thank you for having patience it's too much code uh in one episode but give it a try take it easy do one method at a time i'm sure you'll get it right all right in the next episode we will just do some testing manual testing about our feature module and then we will close this particular series and start a new one thank you so much for joining see you in the next episode i hope you are enjoying and learning as much as i am excited to share my knowledge with you thank you so much

Channel: ARC Tutorials

Views: 7,455

Keywords: angular crud with web api, angular crud tutorial, angular crud operations, angular crud project, angular crud example, angular crud with json server, angular crud application tutorial, angular crud table, angular crud mysql, crud angular 9, crud angular 8, angular bootstrap crud example, angular bootstrap crud, angular crud project example, angular crud example project, angular crud, angular crud live example, angular module crud example, angular 9 crud tutorial

Id: RvTlsix8ud0

Length: 31min 29sec (1889 seconds)

Published: Sat Aug 08 2020