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

hi friends welcome to arc tutorials we are continuing with our angular crud full tutorial series this is part 11 of it where we will actually implement the crud functionality end to end from services to components to template it's going to be a coding heavy kind of an episode where we will code a lot so make sure you pay really really close attention to each and every step that i do in this particular episode again just for friends who are joining us new we are trying to build a products feature module in our e-commerce shopping cart application welcome back friends my name is sridhar i bring over 10 years of experience as a full stack developer i bring knowledge on modern web technology stack like angular node express mongodb exure aws and much more i'm here to share my knowledge with you and i'm also here to learn from you all so during the course of this tutorial series where you are building your own feature modules if you have any doubts any queries just ask me in the comment section below i'll try and help you as much as i can 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 to learn each and every step carefully in order to learn end to end how to do crud operations just to recap we are trying to build a product feature module for our ecommerce shopping cart application so we'll learn how to build it from scratch all right so we have seen and covered a lot of ground we have set up the project we have installed a new brand new angular application we installed bootstrap for designing our website we have we have created a feature module lazy loading module we have created components we have set up routes we have created service and we have created a model in the previous episode today is an important episode a little lengthy but it's very much required because we are going to start crud operations today i will not waste much time today on explaining things but just to highlight correct stands for create read update and delete right so we are going to implement the below uh components and functionality uh view products we all products update delete etc search by category so these are all the components that we have so we need to write methods for it i will try and write all the read and update or create in this episode and post and delete in the next one so that way we can split down the functionality otherwise it becomes too lengthy of a episode all right so let's get started okay so let me show you so this is what we have ended up at so we have a products uh page where we have list products right so this is how it looks so let's start with first what i want definitely is i don't want the routing to be a separate page which is list products right instead what i'll do is i will make the path itself to the default route so when i go to products now i should see the products listed right so now if you see the url i have my products this is the dummy template we took so if you are trying to figure out and build a template you can check it out as well i'll do for some quick css changes first and then we will jump right into building our framework so first thing uh what i'm going to do is i don't want this header to be fixed right it looks a little odd for e-commerce right instead i want it to be a free flow so you see it's free flow and there is some padding at the top so i will remove that as well and if you see our style.css okay so we have the body padding all right so this is done now it looks much neat and clean with the entire scroll right so let's get started and let's fix one by one so first i want to fix the sidebar right so what we'll do we'll go to our sidebar component and we'll need a service for it right so i'm going to product service or you can write a new service for framework but i am writing it here since they are part of the product so i'm going to say get categories right and what we'll return is this dot http client dot get http client dot so here i have to get this url right so i have to make a get call to return all my get call for category so what i'm going to say is category url so what we'll do here is we'll say return me all the categories so i have added that already so let me show you that so i have my categories url pass it here close it here all right and as per if you want to check out the i have added a new endpoint which is categories right so we have some categories that are here in our db.json so let's quickly fix it up so what i'm doing is i am i'm going to say polo t-shirts i'm going to say soccer t-shirts so let's say we are trying to build a t-shirts uh e-commerce right i mean you can choose anything that you want casual t-shirts okay so just put in anything that you want and i've taken few images to make it look good and let's modify these also right i'll show you that we'll we'll modify them okay so first db.json is done then we go to our products.service and we say return the categories and it's always a good idea to create a site framework of the category product right so here i'm going to say it will return of type category this will return an observable of type category okay so we don't have it since i created under the site framework i will go to that particular page now let's go here inside here let's create a new file and call it category.ts right so this is nothing but like simple like how we had the products page uh we'll have something similar lines so you don't need all of this right we just need a simple category and category id so i'm going to say category and i'll say category name okay so i have this now fixed right so now if i import site framework slash category all right so now we have our service done where it will return us the categories right that's what we are trying to attempt first so let's go to our sidebar and let's inject the service here right that's the product service and then we are going to use that instance and say dot get categories right and this will return an observable so we have to subscribe to it and then we are going to say i'm going to create a variable and say category list is of type category so it's imported here already and here i'm going to say this thought category list is equal to data all right so my categories is done now i'll go to my html right from sidebar component i have created a variable where i'm reading the categories so in the sidebar component i will go here and i will just take a simple list link and here i'm going to loop and say let cat off category list right and here i'm going to print the category name i'll say cat cat dot category name all right so now it will print me all the categories in the sidebar so it's not showing up uh let's see why so it should be cat that cat of category list category list is here and you're passing the data from products okay let's category dot category name have we closed it yes okay that's so whenever something doesn't work like let's check the name of the in the db what it is there so in the assets data db.json what are we calling it here we are calling it name that's why um it's not working so i'm going to say category name so make sure you get these names correct because these are the ones which cause mostly the problem all right so we have our component and category name so now it is showing the t-shirts right also we have to change so this is how we have done our sidebar categories now we can give them a link and make them clickable by type i will show you that also in just a bit we have a lot of work today let's get keep going again i'll encourage you if you have any doubts just keep dropping them in the comment section i'll be happy to take a look and help you so now you see we have changed the brand name we have we are listing down all the categories right so you can throw in some more categories if you want that way the more the data the more beautiful it will work and look all right four or five and i'm going to say here shirts or i'll say men's shirts men's shirts i'll say shirts let's keep it simple and i'll say shoes right so it's an online shop where you can have different categories you can you're selling t-shirts shirts shoes etc you can make an e-commerce website for mobile phone electronics anything that you want right all right so we have got it here all the categories are listed beautifully now let's fix the view all page so for that let's again go back to now to the view all products and this is our component okay so first thing let's check what is the service that we will use so here so we have get all products that i have implemented right so this will get it is nothing but it is calling the url and returning us the observable right so we'll use this into get all products so what we will do go to view all products and inject this service first so we'll say products products service product service okay now we have our product service i'll say ngon in it i will define here i will say product list is of type product okay and then i'm going to say here this dot product list product list dot sorry this thought products service dot get all products start subscribe and here we will subscribe this and assign the value of this dot product list is equal to data all right so what i'm doing just reading the parameter assigning it to a variable and here we have some work on the template because this looks like this now okay so what i've done i have created a good beautiful data so what we'll do we'll delete everything else except for one entry of the item which is this because we have to loop it so i'm going to delete everything else here so if you see our code now our code is just simple having one okay so we have just one simple div that's for the entire thing right so now what i'm going to do i'm going to use again ng4 equal to let product of product list okay and then now let's start mapping all the fields so here i'm going to call and use interpolation again and say dot product name or let's see what is there in the db name i don't recollect it okay so here we have product name so let's start mapping it one by one we have the product name then price rating so we have the product name we have the product description [Music] okay product dot description this would be price again this is a classic example where you can use a pipe which is your currency pipe that you can use here and say price you can show the ratings here and say so map all the things that you want to show here okay this is for each product now see it's showing headphone headphone one price it is showing stars it is showing right and one last thing instead of the dummy image i have downloaded few images kept it in assets folder already so you see these are the images i have used for temporary purpose you can download some for yourself and here you will say product dot product img which is right so now you see it started taking shape of a real application and let's change the little bit details on db so it's no more headphone um let's just call it casual t-shirts okay and categories two and here i'm going to call it the second one is party t-shirts you can call anything these are all this is the e-commerce shop that we are setting up um so you can you are free to use your creativity in how you want the names how you want the design that's up to totally up to you and this is also sports right so we can add one more with some i have some more images so i'm trying to use them here okay and this will be five this will be six and let's keep going let's keep rolling and some more images right so these are polo t-shirts um so let's do that ids five and six this is five this is polo t-shirt t-shirt and this you can say golf t-shirt right and in the category i'm going to give polo is one follow is one so i'm trying to give some repeated ones so that way i can show you some more combinational things right um and then the third one will be sports so the third one will be the sports fourth one is also sports okay so we have the data it starts showing up now we have some categories which are listed we have the t-shirt soccer t-shirt polo t-shirt right so let's just change the name so that way this i'll say sports jersey right so you have the sports jersey polo t-shirt golf t-shirt so this is how you can customize the look and feel now you see it is starting to started to see show as a e-commerce website right so you have some price that is there and yeah so that's how uh will this design okay very cool so so far we have done the view all page now let's do a uh category link so we have to link our category and then we'll do view all by category which is on the same lines that offer similarly when i click here i should see this only which are that particular category right so let's do that uh first let's go to routing module uh products routing module okay and here i'm going to say view all by category right so here i'm going to change my path as slash colon id okay view product should be colon id here it should also be colon id delete will also be colon id okay so i'm adding category slash so when i do this it will go to view all products right so first let's link it in the sidebar go to site framework in the sidebar in the html instead of a href right so now we are going to give use router link equal to right so this is this is where um we will name it right so what we can do here is instead of doing this ng4 on the link i'll do it on the div and here we will give the path of it like which path it has to go so i'll say category slash um so this is the id of it right so we can say cat dot id and we can pass it like since it's an id we are trying to build okay so what i'm going to do i will use href only for now so it shows cat id and we can use simple router link equal to category.id okay there is some mistake so what i'm going to do is category okay so let me just quickly gap the the api link sometimes you don't remember everything so it's always good just take the value put it directly okay so we are going to do this and since it said directive we'll bind it here and say category slash we'll have to pass a parameter to it right it cannot be simple straight so let's see if this is pointing no it's still not okay so here router link cannot find module uh category okay there is sidebar let category list there is an error let's just remove it here okay so whenever you see such errors all you have to do is first restart because it's asking us to restart in the meanwhile let's fix up the other one which is view product so let's go to the product routing view product colon id right so in the view all products i'm going to link it okay and we will link here to the click and we will say router link equal to view product slash product dot product name okay so here it says casual t-shirts party t-shirts but why is it saying product name it should be id so now you see view product one view product two three so this link is done so on the similar lines let's just link the categories also i don't know why that was giving error let's go here into the sidebar template and here i'm going to give cat dot id okay uh sidebar component view product okay it's giving an error it says uh isn't can't bind to route since it's not resulting the property of view product why is that happening let's see here okay so there's some errors with respect to this uh let category of cat id we have the router link view product slash cat dot id let's see the id it's their id is there okay we'll see this friends i'll probably correct it later i don't want to spend too much time on it but we'll fix this up later i'll just give a chat here okay so that's how i can quickly do it i'll say category slash id and now you see these are hyperlinked with the correct value the this is also linked and beautiful so here instead of uh view product i'm just saying product slash id right so that's simple url and in the template also we have to write the same view all products the html i'm just calling it product okay so we have the category we have the product linking just look at here in the bottom you will see the category list and the t-shirt and the product ids right so now our sidebars are our categories are linked we have our main thing right so what i'm going to do here is i'm going to get the details like this for example i'm going to copy this template as it is right this is what i want for view products by category so i'm going to show use the same template okay except i'll add a new h2 and i will say search showing category results okay so showing category results it says property product list does not exist okay okay let's fix this that okay so what we'll do we'll we will implement simple uh we'll will have a simple this dot activated route to capture our id of the category that is searched right so what i'm doing here is i'm capturing the id using the activated route so import that in this and then this dot activated route dot query params and category is the search category okay so now what we'll do we have got the search you we will use this category id to make a call right so we are saying now we have got the so now we will say after this you should say get products by category okay so this or we can just i don't want to waste time but i'll just map it here we need a product service also so what we'll do is private product service product service all right and we'll use this dot get search category products that's the method that we had written dot subscribe data okay and here i'm again going to have a product list of product okay so this is the placeholder i have and then i'm going to say it here this dot product list is equal to data all right now it says expects one argument which is nothing but our category id so we will pass this id here okay and shadow name data right since there is already data here i will say this here as category data and we will pass it here all right so now let's take a look at this method which says it will search all the categories and will give us the category products right beautiful so now let's try this out so here i'm saying category one okay there is no route it seems let's see let's see this one more time and the route that we have set up is category slash id okay very good and in the in the sidebar what's the url let's see here it is category slash okay so this it's not finding the route but let's see why maybe we'll restart once all right let's go here to products routing module view all products by category component okay so let's just there was an error so let's see what error is that and we'll fix it i hope you're following this lot of code that is going on good take it easy and check out and check out each and everything that i'm doing carefully so you understand but see how easy it is it's not that great or any rocket science that it's tough or anything of those lines so when i see products okay so we see the product now we try and hit category it is not finding the route right so what we'll do we will go ahead and use the view products by category id okay and what is happening in the route here is it's taking the activated category because there is no category dot category it's id right data dot id that's what we are passing and in the route we have to see we are passing the id so we have to capture that right so now it will work because okay let's try one more time okay some error it seems let's see what is the error it says cannot convert okay so it says url segment it is taking as category hyphen 3 okay so that's why it is failing so let's see why here we are passing the category in the sidebar in the sidebar we have category slash three okay uh category dot cat dot id uncaught promise did not meet category three but why is it saying category three is the question category two okay all right that's because we have to put it's inside the products category okay that's why it's not missing so now you see okay so now it is showing showing search results for category so so far so good i gave the wrong route but we are learning together here right so that's why okay so beautiful so far so good now let's see why it is not written in the data so what we will do here is in in the http it's not returning us the data so let's go to that service and let's go to search products category products and this is what it is making a call and let's see the category so here i'm going to say localhost category equal to 1. so it's not giving any value because it should be category under products what is the id it is not category right it is category id that's what i think it is so this is the category id right so we are going to say category id equal to one uh products question mark category id equal to one so that's the url we want right so we have to tweak it again now and what we are going to do is in the service we are going to make it category products category equal to id okay perfect so now if you see if i say one it's saying two and it is returning all okay so now let's see the data again this has got to do with our data so see category id is 2 3 3 okay so and we are going to replace this but it should not return all so i'm going to fix that now here in the product service so this is the url and let's see it here one more time it's equal to two so it should not return all right it should be category id so now it's so that's the mistake so when we do these are common mistakes that a lot of people end up doing right so this okay so now category id is three now it is not showing any results but is the call correct category id question mark products category id equal to the category all right so far so good let's see our template now so here i'm going to set this dot product list and in the template here we are saying product of product list and let's just do it here it's showing the categories and inside the category let's see if there is any error okay no error okay so no error but it's not showing data so best way to debug is let's go ahead and put console.log for our category data okay so this way we will know what is being returned okay so in the warnings we see there is an array of length okay let's do try with two and it's giving array again i is off search category now let's console.log and check what id we are getting so this is how you go about debugging things right so it's coming as undefined that's why it's not taking right so what i'm going to do here is in the products products category slash id right so here it is category category slash i colon id and we have to read the id of it so we will go here and data so let's just console log data right so we will know exactly what is being captured so you see this is all coming empty okay so that is the main problem that it's not getting captured the value all right so since we have said query params that's why it's not working it here it should be params right because it is a url right so that's the mistake that i have done so now if you see now it's working perfectly fine so for category two there are two and then for category one there are two polo t-shirts for soccer t-shirts or casual t-shirts so these two are reverse right um and then shirts there are no results right and so this is how now category search is working so what i'm going to do category 3 and category 2 so i'm going to just change them so so you can kind of start getting the feel and vibe of that it's a e-commerce website right that's so simple okay okay so here we are done so now you see soccer t-shirt it shows the soccer t-shirts casual t-shirts and then polo t-shirts right so we have got all products right so we'll add one more link in the category and save view all products right so i need one link always at top and i'm going to call it all products and i'm going to link to products okay so now you see view all products and you can give some alternate color or highlight and background right style background iphone color and you can give some color highlighting any color that you like right so we don't want it in the loop because this has to be only the first one so what we'll give is view all products right or maybe not this color fffcc all right so we have view all products polo t-shirt so this is now coming up like a real website you can see e-commerce website that is built uh you can drill down by the type of category of the product now let's fix view product also in today so this is how it looks we created the route so when you click on it you see the details of it so we are capturing again with product right and you go here and you can check the product right so let's fix that page also in this episode quickly i know it's been becoming a lengthy one there is so much code i understand again i'll request you if you have any doubts just ask me in the comments section i'll be happy to help you all right so here i'm going to we will need the service it's been a lengthy day but we are learning right so that's important and here i'll say view product and we have to pass a product id right so what we'll do is we will import the will import activity route activated take it out all right and here in ng thing we'll capture that first we'll say this dot activated route dot params dot since it's an observable it will have to subscribe and we will get that data so here i will say product product id equal to 0 right and here i'm saying this dot product id is equal to data dot id okay and then we are going to call and pass it here and say this dot product id dot subscribe and here i'm going to say product data okay and i'm going to create a new so product details are of type product right so once we have done this this dot product details is equal to product data all right and in the view just go and change again and here we'll say directly now product details dot name or click on it now name is not showing because i think it is product name right so it shows casual t-shirts right you can again have an image of that particular product right so i'm going to say product details dot product img right maybe you want to fix the size again this is up to totally up to you how you want to design the page but usually it's a good good option to have beautiful images when you're working it gives so much motivation right so height i'm going to reduce okay and you can use css to fix the sizes so i'm not that worried and then similarly use all the details and map so that i'm going to give you as an example and homework for you okay so try out this these three so if you see now the application is mapping the product product description goes here you can put ratings right okay and we don't need this card so all right so we have the image we have some description let's give some margin bottom so there is some space between these two right and yeah so that's that's like you have the product you click on it you see the product you see the product details you have the soccer t-shirts you have this soccer t-shirt details stars rating and you have search by category right and you have list all products so you have products category search view all products and so let's just quickly recap what all we have fixed we have fixed get category show all categories we fix that search by category we fixed it we did view all products right we did view all products by category okay and then we said view a specific specific product right so these are the five things that we have fixed end to end which are now working in the route along from service to category to entire thing that's that's how any e-commerce website is done um i want you to so there are still will create product create product uh delete and update product so i'll cover this in next episode it's too much for in one episode in the meanwhile go ahead try it uh fix all these five in your feature module these three they are related because they have to do with form so we'll set up that form and we'll see it in the next episode i hope you're enjoying this e-commerce application we are building huh it was too much today so i hope i am enjoying uh definitely and it's so much fun when you when i hear that you guys are all learning a lot from it that's really encouraging and motivating we are in this together we'll learn together all right so give it a try let me know how it goes i'll be happy to help you if you're stuck thank you so much again for joining see you in the next episode we will continue using post and update crud operations thank you so much again

Channel: ARC Tutorials

Views: 11,926

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 feature module example, angular feature module routing, angular feature module, angular crud live example, angular crud project example, angular 9 crud

Id: UWwgjE6-ia8

Length: 45min 53sec (2753 seconds)

Published: Tue Aug 04 2020