Ecommerce App with Angular | Angular 17 Project | Admin Application

yes so welcome back to Learning Partner in this video series it will be couple of mix episode right because it's an e-commerce project so I cannot cover everything in a single video so I have to cut it into at least two to three parts right so the e-commerce application and the type we are taking is Big basket means the daily items what we purchase from the BK so we are going to cover the basic flow of the e-commerce application along with uh whatever the things we have in the big basket just like that we are we will try to cover right so whenever we talk about e-commerce application obviously there will be products right let's just write it down what we are going to do so obviously we are going to show the products and before coming to it whenever we talk about e-commerce application there will be two sides first is the admin site and second will be the website right now admin site will be for the vendors or let's say whoever have created that website right or owners what they will do they will add products right they can see cart sales orders and customer also offers everything whatever you are seeing over here everything is dynamic everything it is coming from backend only mean database only whatever the offers you can see get it at 60 get it at for this is nothing but offer right original price is 64 but you can get it at 60 then these are the various offers everything whatever you see is coming from the database right so this all things like like uh if you can say category also like what are the categories we have this is the parent category that is fruits and vegetable inside that we have again child categories again just like that again we have child categories Baker and cak is the parent category for this Baker and category we have some child categories so everything whatever you see comes from the database so whatever you see that gets inserted I mean the data get prepared by the vendors or the owner right that on the admin side now what you ing is the website whatever you whatever the vendors or the owner add the products create the products and everything on the website we can see it but website is mainly useful useful for the customer who are going to purchase the product right they will select the product whatever the quantity they need they will add to cart it and once uh four to five six items they had added then they will uh process right then they will make the order then delivery location and everything that will come come upart once they do the order then payment Gateway will be there once they make the successful payment then order got placed and Order get visible to the vendors right in the admin panel then their mechanism again their mechanism is there for the delivery and everything but we will try to cover the basic things so admin part in admin part we are going to uh see like category means nothing but category cud creating all the categories and updating and everything after category is created then we have to create the products again it is nothing but cow only right but uh when we create the product we need to select the category also like which category this product is going to be right then we can show the cards whatever the cart item we have customers and orders these are the five to six pages and again login page will be there right so these are the five to six pages which will be there in the admin panel right only one project will be there but admin uh part will be in the single project and website will will be also there right then in the website this is admin then website we are going to display all the categories then products customer can login means sign up and login right customer first need to sign up himself and then login once customer sign up uh login then he can add to card he can see the card like you can see over here okay it is not yeah currently I'm not logged in so I won't be able to to see right so here we get that whatever the items I have added to card that I can see it over here so that is nothing but card then orders whatever the orders I have created their uh status like is it delivered is it output delivery whatever the things so all these things we are going to cover so two major model will be the admin model and the website model now the theme I will be using is this uh there is a website theme wagon right so there uh I have find the per template which suits our need right you can see just just like the big basket we have this template don't go uh try to design and everything by yourself just Google any template and use that because UI designing is not our Focus writing functionality and completing the project is our Focus right so don't waste your time in designing just go to the Google and try to find any template right so this is the bootst 5 website I have downloaded it also also and the API I will be using is on the pre api. Min project ideas.com and you can see your controller big basket so all the functionality which we just discussed it needs whatever the API it needs all are over here right so just uh just for the initial purpose we have this much but I will be again adding some more apis but just to start the work these are the apas we are going to have now coming back to angular side I have just created a project let me show you the package. J so project is with the angular 17 so whatever the new things we have in angular 17 we will try to cover that also so that you will get the idea like how angular 17 is different now right then bootst I have already installed and font J font awesome is already installed so in angular.js I have added this right now coming back to what are the components we are going to need first in the apps in app component first I will create the folder like pages and inside Pages as as we have discussed like we have two major modules so again I will create a folder over here that is admin and in Pages only again I will create website right so uh we are going we are not going to do the lazy loading and everything so just to uh separate out the code and admin folder is created and an website folder is created now in admin folder whatever the components we need that we are going to create so these are nothing but component category component we are going to need products cart customers orders and the login right just like that in the website also we are going to need some more pages like landing page right then product view page product view page as in when I click on particular product so you can see that particular product is getting open right what are the images multiple images I have offer I have at to cart same thing whatever you things you can do it from here that also you can do it but just here we are showing the single product right this zoom and everything we are not going to do but whatever the things we can do that we are going to try right so in website let me just get the component names so as you can see in admin we are going to create this much of components in website we are going to have a landing page right there we are going to show the this page where we are going to show some product uh offers we are going to have some categories and everything right then once we click on any product we have to open the particular product particular product right so product page this component will be responsible to show the particular product information just like this see here it is only showing the capsicum details whatever the product we have created right then we are going to have a card page then order page uh means check out page then we are going to have orders page whatever the orders I have created that will be visible over here so landing page product page card page right checkout page orders these are the basic component then for login and sign up we are going to create model popup we are going to do this in the model popup right so we don't need to create extra components for this as you can see here also just the model popup is there uh here it is with the phone number but again OTP is there so we will use uh phone number and the password right so just like this sign up and the login part c will be covered in the model popup then add to cart will be visible over here so here you can see cart will look like this it is not [Music] opening it should open let it be but you Al you everyone knows like how does card page view so just like that on the click of it we are going to have a small popup there we will show the products we have added right so just like that we are going to cover everything right so this uh now as after all explanation and the components we are going to create so let's just start creating the components so let's create first admin components we are going to need so right click on the admin folder open in an integrated terminal so it will open that terminal on the particular folder now the components we are going to need we will create one by one right so this is an angular 17 project so as you might already know that Standalone application is going to the be right we don't have app module over here right because every component is going to be Standalone means wherever you need to use that component in any another component so you need to import that then you can use it right now first component we are going to create is NG generate component the first component we are going to create is for the login page that is admin login so I'm going to name as admin let's make it as a login only because we are going to have only one login component enter so for the first time it is it will take some time let's wait so as you can see we have created a component it has created four file HTML spts and the CSS now it has not updated the app module previously up till previous version it used to update the app model also but we don't have it right so let's try to open it and let's view it so you can see Standalone true is coming means this is an independent component wherever you have to use this you need to import that component then only you you can use it right now stand alone Lo uh login is done then we are going to need a once user has logged in right then there will be a nowar and everything right so to hold the now bar we are going to need one component let's name it as a layout here we are going to have the now bar and everything router Outlet also here we are going to have after login we will land to the any page but for all the pages after login this will be the parent component right layout is done right so like that I will create all the components as we have discussed let me just pause it for now so as part our discussion I have created the admin component so card component is there categories customers layout and the login extra components then order and the products so these are the all components we are going to need for the admin panel now coming back to the website so right click on the website opening an integrator terminal now in the website we are going to have a landing page means the landing page where we will show the uh overall means the basic page default page P right so let's name it as a landing enter so landing page we will create here we are going to show the sum of the products right then again one more component we are going to have that will be responsible to show the all products with the particular category right so let's name it as a products but in admin also we have the same same yeah it is products but here let's say category products because this component is going to be responsible to show the products of particular category so category products right this is the second second component for the website then card page let's make it as a customer card this page will be responsible to show the all the items I have added in the card just a separate component in the popup also we are going to show but we need a separate component also so that's why where we can show the list he can uh add and remove everything then check out might be we are we might not use this component because same thing we have in the checkout also been because in check out also we show the card right then we have orders component this is customer orders because in admin also we have the order but in admin in admin login all the customer order will be visible now in the website whatever the logged in customer we have only his order we need to show so that that is this component that is customer orders right so these are the various components we are going to need just for the starters once we start the development again if we think like we need one one one more component so we will create it but for now we are going to need this much component right now admin part and this is done now first thing uh I'm not sure like this template will work as it is or not but let's just try this is that template I have downloaded I will share this in my GitHub Also let's try to open the index page or at least first we can cover the admin part because for admin part we don't need this that will be a normal application right so in app component now uh whenever our application gets loaded for the first time so default what we need to display right so first I'm adding just the router Outlet by default our website will be visible okay so by default our website will be visible means a website with the now bar where we can show the categories homepage and everything some products and everything right but just like on the website or on the website we have some button from there we have to navigate to the login page for the admin okay so if you see here if we observe the big uh big basket so this is a landing page right but somewhere we might have a button from where it will redirect to the admin login page see if they have provided anywhere or they might have a separate uh URL for it become a seller might be separate website for the seller right but for just for our application what we are going to do on the main page we are going to have create add a button and there we will navigate that to the login page for the admin right so for now let's first create the routes so this is a file app route. TS so here we are going to create the route route is nothing but an object right same thing whatever you know in the angular that are same doesn't matter it is angular 17 but the basic things are same some new extra changes are there it's your choice if you want to use it or not but something the basic whatever we know that is as it is right now so path this will be empty route then let's say redirect to if it is empty let's redirect to login for now and path M strategy and that value will be full right same thing was there in older older angular version also then again path login path component login component right so by default if we don't have anything in the URL it will redirect to the login component so that means this component let's see if we have anything or not let's try to save okay first we need to run also so let's try to run NGS so by default my application will Lo U on the browser login page should be visible this login component should be rendered let's see if it is rendering or not Locos 420 is it compiled no not yet let it compile right so let's reload now so you can see by default it is login page coming if even if I remove that login page is coming that's because we have set the default route right now in the login page we have to obviously create a login uh form and everything so let's try to go over here and let's check if they have provided the login page why it is not opening let's check over here if they have provided the login no they are not proved the login page so let's just Google and let's try to find a login page login page HTML login page Cod pen let's try to use the basic one so that we don't have to waste time managing the data this looks fine this is also fine just with the image right so let's copy this HTML we have to paste it to the login component. HTML then we need the CSS so let's copy this from body so many SES are there let's copy we have to paste it to the login. CSS what else we need okay remember GS part we don't need now one more extra thing we need to do so there they have assumed the body page but we don't have body page right so here I will add parent D and this D I will create in the over here before the container and whole container we move to the parenting so let's save all and check if we have the login page properly visible yes so whatever the login page we have seen over here that same page we have got right so login page is done now we need to implement the login functionality so let's check the API now now here let's first check we need a admin login page right [Music] so Register Customer gate all customer I think user page is not there but let's create our user page just go to the database only one login will be uh there right for admin so let me just try to create a user which is not a customer eom category customer let's see if we have property over here okay so I think uh we don't have a proper data because this is a customer table here only we are going to manage everything so let's just try to for now we will just uh do the static thing right so now static login means we will just hard code everything if user enter that detail only then only we will allow him to login so let's create an now before moving forward now this is an angular 17 so we don't have app module now when we design the form we are going to use the NG model right so if you have to use the NG model so here you can see the import section so here you need to add the forms module right because we don't have app module so so whatever the things you are going to use in your particular component all that module you need to import in the component itself so that your component is you are not burdening the whole project whatever things you are going to use import that in the component itself so you are not disturbing the whole project with the unnecessary Imports and everything right now let's create the login object p and any I'm not going to create class and interface it's very time-taking empty colon but you should because I know the things but you don't so you should do the proper things now login object I have created so this object I have to bind to my form right so you can see form Tang is there square bracket round bracket NG model login object dot username if you do this with the class and interface now here it can suggest also strongly typ typing will be there then password always try to copy paste so that you don't make this spelling mistake since NG model is inside the form tag the name property also get mandatory right so we can provide the same property over here same property over here also we can use password right now on click of login instead of middle let's make it button why it is saying error faon let's see where it has used favicon no where it is let's remove this let's see if we get okay where it is going SRC favicon icon is outside serving allow list okay he's saying like it is outside let it be this is just a warning right now in the login login button is there right on click of login we need to call a functions so click on login so you can see even if it is angular 17 the basic things what we know is same only nothing changes in there because it's not a new technology it's the same technology just some internal changes are there so we don't have to worry that much now in login as I said like it is going to be a static code right so here we can add just a if statement this do login object. username equal to equal to if user enters admin and this dot login object. password is equal to is equal to let's say 33 4455 okay if user enter this password then only we will allow him to login now and in else we can show the error let's show the JavaScript alert like wrong credentials right now here if user has provided the username as admin and the password has 3 3 44 55 then we have to allow him to login right now from TS we have to navigate from Once user is logged in we have to navigate to some another page right so to navigate from TS we need to make use of con router right so in Constructor I have to create the router instance so this is nothing but called as a dependency injection so private router colon router right so this. router do navigate by URL and we need to pass the URL where we have to redirect means nothing but a path so path we have to get it from routes okay we haven't created routes so let's create now while creating components I have told you like layout component is going to be a component which will act as a parent component means after login this layout component is going to be my parent component so here just a small route change will be there so path will be empty component will be layout but for this layout component I'm going to have the children's and in this children we are going to have all the components routes which will be accessible after login products component product component right so once user is successfully logged in we have to navigate to this product page so let's write that over here let's test it let's save all let's try admin let's try to enter the wrong password on click of login you can say wrong credential is coming now let's try 345 login so now you can see log layout page is visible over here okay so after login we are successfully able to navigate now in the layout page that product page is not visible because in the layout page we don't have router outlet and everything so now in layout page we are going to have a nowbar so let's go to bootstrap let's get the basic uh code now bar code we are going to get nowar we need a now bar where at the rout side we are going to have the logout button also yes so this we can use let's copy the whole now bar paste it over here and after nowar we are going to have the router Outlet so router Outlet we can paste it in a container container fluid let's add fluid so that we will have more space and here we are going to have the router Outlet because router Outlet is necessary right it is not [Music] suggesting okay I will explain this error why it is showing let's say we might have the error let's see if it is yeah now this is a difference we have in angular 17 so previously when we used to use the router Outlet we didn't uh it was not necessary that we have to import anything right but now with angular 17 whatever the things you are going to use everything you need to import right just like we have imported form mod just like that we have to import the router Outlet also in layout component so in layout component.ts here router Outlet you can see router Outlet is there now if I save application will running right so these are the new changes we have in angular 17 whatever you use you need to import it previously it was globally available now it is not so this is just some difference key difference we have when it comes to daily development right so now here you can see product page is visible right now first we will uh in this particular episode we will complete the the category and the product right so first we need to create uh in category I have added some category so here you can see get all category I have added some category from the big basket only so here you can see some categories are over there now so this uh now coming back to product right so we have to create the products update list and everything we are going to achieve now four operations are there we have to display all the products we have we have we should be able to create new product update the existing product and the delete also mean basically all CCT C operation right and one more extra is like we should get the product by category ID let's say if we have to filter it out we have one API that is get product by category ID right so in the product let me just close everything now we just have to focus on the product component let's open TS right now here we are going going to do the crud of the product now let me just create the basic structure so row call let's say call it here we are going to have the list so I will use the card structure card header card sorry BG primary and after that at card body right so now this is the structure I'm going to use Let's uh here again we are going to have row column I will explain it why I'm going to create a structure like this here we are going to have the title product list here I'm going to have a button to hide and show the side panel Plus plus BN BN [Music] SM success just like that now this same row I'm going to this column I'm going to copy so now it is eight so we have left is four right so let's make it four and here we are going to have new product and here we are going to close it new let's save okay alignment so text and same class we need to add it over there also okay so this is the structure so in the first card we are going to show the list of the product and here we are going to have the form okay so this is the structure I'm going to use now if you see if I close this the product list is going to be with the full screen but if I click on new then only this new side panel will be visible so let's create that functionality right if you have not understood let me just explain on click of new this side panel will be visible if I close this this will be hidden and this will uh take the full width right so to do that I'm going to create one variable is side panel visible Po and Boolean is equal to by default make itting false now this variable I will use it on the this D with NG right now this D will be visible if this variable is true let's see if we get the error for NG no right so this D will be visible if this variable is true currently you can see it is not visible ible but let's make it true so then it will be visible just the normal true and false we know okay not visible so I think we need to import common modules let's check if we have the console yes so now as I told you like an angular 17 whatever you use you need to import so if you can see it is not understanding what is NG so to use NG we have to add common model over here save now let's see if it understand in now right so now you can see it is visible now we don't have a so previously for using NG we didn't have to import anything because common moduel was present in the app moduel but now we don't have app module so everywhere you're using ngf and ng4 common model should be there because from there it is coming all the directives right now this is done so now this call 4D will be visible if this panel this varable is true but if this variable is true this class should be dynamic so let's use NG class if this variable is true then we have to add call 8 Class if it is variable is false then we have to add call 12 now let's remove the static one let's see okay currently side panel is visible so we have call it over here but let's make it false now it should take the full width right so this is what I am talking about now let's make this Dynamic on the button click right so now click function open side panel just a function I'm creating now in this variable what we have what we are going to do we are just going to change the value so this dot is side panel is equal to to true just like this function we are going to need one more function to close the side panel also sorry for the speed but we have to match some speed because so many things we are going to cover now this function we have to call on the side panel on the close button right so this is the side panel this is the close button so click and this function we have to call it over there so let's just save and test the same functionality now on the page load we don't have that uh side panel visible but if I click on new now you can see the class is dynamic and the second panel is visible if I click on close again it is taking the F so this is the functionality first simple task we have created right now we have to start the current operation things right so we have to create cud of the product right so let's see the API so as you can see this is my API to create the new product and get all products is the API to get all the products right now so if you see the object so we have product ID this is primary key SKU name price short name description date date created dat we just by default we have to send so we don't need it we don't need this in the form delivery times when like uh 2 to three days 2 to 5 days whatever it can be category ID is a foreign key so we have to show the drop down of category right and product image URL so we are not going to upload the image we can just simply pass the URL of the image right so coming back over here so first here we need to design the form right so we have two cards left side and the right side in the left side we have to show the image uh means whatever the products we have so to show the product either we we can use table or we can use card since we have product image so better we can use the card to show the products so let's go to bootstrap and try to find out the design bootstrap W3 as I'm again repeating do not uh go and try to design everything by yourself already redem made codes are available there so you just have to use that so let's try to use this now here I'm going to create a row call three let's say in uh in a row I'm going to show four products right inside that I'm going to put this we don't need the style right so this is just a basic image let's copy paste two three times let's save and check if we are able to see the yeah so you can see we are able to see the card just the image is not coming but once we make this Dynamic with the API response then image will come now in the side panel we have to design the form so we will Design the form as per our object so first we need to create the object so always copy paste from the Swagger so after this variable I will create the product object go and any right so this is my object let's replace string within empty now this new date I said like it is going to be default date so new date whenever you need to send some default value so you can just whenever wherever you create the object you can send like that so one thing I'm going to do I'm just going to make the first letter small because from the API I get the small one so that's why I'm making the first letter as small right now so we have created the object now we have to create the form so this was our first card in the side panel we have to design the form so row do call let's say six label we are going to need so what are the things we have that we need to design so let's just open that in the side panel so SKU and the name so this will be SKU SKU is nothing but a unique uh storing uh the long form is store keep keeping units something number is there right so in every there are some terminologies which are related to the e-commerce application like SKU product short name thumbnail add to card checkout right these are the terminologies which are related to the e-commerce application only so you should be familiar with all these okay input type text class we need form control right so and again we are going to to need the NG model also so square bracket round bracket NG model is equal to now we have to B product object dot but now if you see this is going to be same everywhere so better you can just copy paste so I will just copy paste this much content right let me just pause it I will Design the form right so as you can see I have created the form just like copy pasting everything just changing the label and The Binding of the particular object right but now it is giving error like it cannot uh understand what is NG model because we have to import forms module in every component right since it is angular 17 so whatever you use you need to import it right so now you can see error is gone right so our form is proper so let just save and check if we are able to see the properly form right it is still showing the error T is not saved so you can see we have the particular form visible now the category ID is a foreign key so we need to show the categories we get from the another API right so let's check the another API which which will get us the category right so get all category this is the API which are which we are going to get the categories we have in our e-commerce application so here you can see these are the categories okay so now we need to call this API and whatever the response we get that we need to display in the dropt in the dynamic options right now we need to create the service so to uh make an API call either you can initiate that API call from the component itself or you can create the service also but just to keep some things proper let's create a service so in app folder I'm going to create a folder that is services and here I will first uh first service I will create is my product service so inside product I will create a service NG generate service and let's say product is product is going to be my service name right so this command will create a service it will take some time yeah done so now here we are going to make write all the API call functions right so whenever we are making the API call first thing we are going to need is forms module uh sorry means uh HTTP client module right so we have to import the HTTP client moduel then we have to create the HTTP client service like that we will follow through so coming back to another change which angular 17 has right so as you all know whenever we used to uh uh make the API call First in app module we used to import that HTTP client module then in the service we used to create an object of HTTP client but since we don't have app module so let's see what we have to do first let's try to create the HTTP client service ran HTTP client right and let's try to create service in into our component and let's see if we get any error so Constructor round bracket private product service poon product service let's add the UT of product service now when uh again make sure like you create the Constructor after the variable so first all your variable declaration should be there then Constructor then en on it then remaining function should be there let's save all and let's check if we are facing any error okay so you can see no provider for HTTP client right so this because we haven't imported the HTTP client module because to use the HTTP we need to import it moduel right so now to handle that we have to go to app.config dogs and here we can write provide HTTP client okay let's save now it should work fine right so now you can see the error is gone so previously we used to import HTTP client module now it is provide HTTP client over here right let's say over here also we do we have or not no so in injectable we don't have that right so in app config.js only instead of HTTP client mod now we have to write provide HTTP client right now in the service we can just create API calls so let's say get all products now this function is going to response so this do HTTP dog apaa call now uh coming back again in all the function API the API URL is going to be constant right the let me just show you so here you can see up now up till big basket everything is going to be same just the method name is going to change so we can create a constant and there we can put all our method name and again if you have to again go deep you can create the environment folder also but for now I'm just sticking to constant so in Services I'm creating another folder for constant and in constant I will be creating a constant file constant. TS export cost constant let's say uh first your first property I'm going to keep is API endpoint now AP endpoint is nothing but up to this this is going to be con common right so this I am going to put it over here then after this comma method and inside that again I will create all the method name right so rather than hardcoding everything into your service we are just putting everything whatever the data we need method name API name we are going to store that in a constant right so get all product col now the method name will be for gate all product G first we are going to need the category right so let's create for the category also comma Gore all category method name is G all category right now just pay attention in the product service now so after gate we need to pass the URL now URL is URL is stored in the constant file in the API endpoint right so we can use that constant we need the input of that dot you can see API endpoint is suggesting but after API endpoint we need to in API endpoint whatever we have up to Big basket after that we need to pass the method name also so AP and Point again constant dot method dot g all category now this will create our actual URL right in the semicolon now this function is responsible to in uh initiate an API call and we will get the data whatever the data we get that we are going to return now this function we have to integrate into our product component right so after Constructor first we have to implement theine on it also so On in It Implement s on in it once we implement we have to create the NG on it also NG on in it now after Eng on it I'm going to create first function get all category now this do product service dot get all it's not get all product it's get category right so here we have to call this function that function is going to return return the data type of observable so we can subscribe to it right result colon any Arrow [Music] function why it is saying error sorry we didn't write the Subscribe properly do subscribe any right now whatever the data we get from the gate all category that we need to store it somewhere right because we are making the APA call so we need to store the data we get so category list just a variable I'm creating it will be with any it is going to be array initialize with empty so here this Dot category list is equal to r. data in data you get the response and this function on the page load we have to call so that's why in n on in it we are going to invoke it right so on the page load now our API call function will be triggered we get the response and that response we have to bind to our drop- down options so this will go category instead of text box now we are going to need a select here option is going to be multiple so let's use ng4 over here star ng4 let category of variable name we have to do the property binding right because category do category ID we need to pass so let's check category ID always try to copy paste the variables name from the API endpoint only don't make the spelling mistake and and while displaying we need to display the category name category name right now this NG model will go over here and the form control instead of form control we can use form select let's remove this text box let's save all and let's check if we are able to get the drop down so here you can see whatever the uh what do we say categories we had that is visible but now if you see the API we have parent category ID something and some in some parent category ID we have the ID also now just pay attention fruits and category has a category ID of 55 now 55 is nothing but my parent category so in that parent category you can see like uh child categories are there fruits vegetable flowers at just two are there right so we just have to show the data we just in the drop down we just have to show the parent category not everything right so that we can filter out if you see what are the parent category if the parent category ID is zero that means this category is a parent category right so or how I can do that or let it be we will keep it simple so whatever the category ID we get that we will bind it doesn't matter like it is a parent category or a child category right so this is done now we need the save and the cancel button so let's create that at the end of the [Music] form let's copy this structure here we will have button class BTN BTN success let's say reset over here and same button we are going to need over here also create product right now on click of create we need to make an APA call so click on Save let's create this function into TS now again on Save we are going to make an also into service again we have to create the service so I'm just copy pasting this same thing now instead of get it will be save product now again in the constant we need to add one more property let's check the create product URL method name we just need create product so this will go over here right just like the create product we are going to need gate all product also so let me just copy paste it right now just like the gate category we are going to call the gate all product also so instead of G all category it will be G all product and here get products now this is going to be save product but this is going to be post APS so post API has two parameter URL and the object right so this is a function which we are going to call from the component so there from when we call it we are going to pass the object so that object we have to catch it over here and this object we will pass it over here and the method name will be create product right so this is our post AP call function right so now coming back to our component so here this dot product service dot create product function or save product function we have to call now for this function we have to pass the parameter so parameter will be nothing but our object product object do subscribe result col any Arrow function right so again I'm repeating instead of you should create class or interface right so result. result so from my API you get the property result so if result is true you can be sure like uh uh that API call is Success right so you can show the alert that product created but if you get that result property false you will know the errors and error also you are getting from the side only so result do message property you will get it we will debug this then you will understand why I have written this code but once product is created successfully we need to get all the product also so let's create that APA call also so just like the get all category we have to create get products and here we need to call get all products and the response we also need to store so just like this category list we have to create one more variable products right so whatever the response we get that we need to store it over here and this function also on the page load we need to call right so and once we API call is Success then then again also we need to get all we need to all we need to make an AP call right so after the alert again we will show this APA call Let's test this for now if everything is working fine okay so one more thing we forgot so since we are getting the product so let's make the things also Dynamic over here in the first card right so let's remove the static one let's use for loop on the call LG3 so star ng4 let product of product list now image is going to be uh Dynamic right so property binding we have to use product dot let's check what property we had product image URL but it will come in the short uh first letter will be in the small case so just I'm making that then here we need to show the product name so product dot product short name or product name we can show here we can show the category name category name will also come from the API but for now I'm writing like that name right just like that we can save and check currently we won't get anything because in the gate all product we don't have anything now let's create a new product let's say ABC let's go to big basket and let's we need we need some image so let's use there only so what are the categories we had fruits and vegetabl so let's try to get something from fruits and vegetable let's open image in a new tab this is the image so let's copy now this image is going to be over here right so the image uh sorry this is califlower copy let's paste the name short name same let's add what was the rate rupes 20 so let's add is 20 categories under fruits and vegetable delivery time span 1 to two days and product description let's see if we can get the product description we have to open this product let's see let's copy this description let's paste it over here let's see if we have anything else let's copy this right now let's check the network call on the save button on the create product we are going to make an AP so let's click on create product right so you can see we have the AP call success then we have got the response also now in the result you can see result properties is true and message also comeing right so once we have shown the alert like a product created after that we are initiating again gate all product because we need to show the product created also product created now here you can see whatever the product we have created that is visible over here now let's just try to create one more time let's try to create this capicum let's open the image image create new the image URL SKU something I will put itum short name also same what is the price 82 category again fruits and vegetable only delivery time span 1 to two days right product description let's put the name only over there this name only I'm putting in the product description let's create new product created and the latest you can see right so we have created the product and we have shown the created product in the uh card format now we have to do the update and the delete now the gate AP done we have successfully created the new product also now we just need to add the functionality of edit and the delete so you can see here we had the buttons right so let's just replace those button with edit and the delete one this is just a sample anchor tag so let's remove this let's make it edit and let's make it delete let's create a function click on edit we need to pass the complete let's see the AP for the edit one so get product by category ID okay so we don't have any API okay we have get product by ID so this is one API we can use to get the particular product details so let's just see how many products are there write out execute right so currently you can see 273 is my product ID right so on click of edit we can use this API let's see if it works or not no this is I get product by ID this is something else then what is this API used for get product by ID get all product correct only product ID only I'm sending but why it is not [Music] giving record not prob it is say okay let it be so in Gate all product let's see what things we are getting so I think everything we are getting so we don't need another API to get the product detail right so in the array itself we have we have we have got everything right so on on delete we can pass the whole object right so let's create this function now while calling this function we are passing the whole object right so we need to get C cat that with any now this object we have to assign to the product object item right so let's just save and check if it is working properly on click of edit okay uh now once we click on the edit we need to open the side pan also so this function we will call it over here once we click on edit we need to open that let's just add a class [Music] MX2 right if I click on edit see the side panel open and the whatever the information we F that is visible let's click on second one right so when you uh when you complete the edit functionality actually there are two parts first on click of edit you need to get the data and show it into the form that is done now if the product ID is present instead of create button you should get the update button right so that we can do it over here so let's copy this let's paste it and this should be update right if in the product object we have the product ID present means in J see product object do product ID if product ID is equal to zero means create save button will be visible the vice versa of this if not equal to zero then update button will be visible let's save and check this so initially if I click on new see no something is wrong let's check no spelling mistake is wrong let me just copy paste the proper one product ID product ID let's save and check it once again now if I click on new you can see create product button is visible let's click on edit now you can see update button is visible so this is what I was talking about so in case of new product you should get the save button right but in case of update button you should get the update button let's just make the buttons proper text Center this also to the text Center and just some spading from the top and for update let's make it primary let's save all and let's check it once again right so it is visible sorry now we have to uh now we have the update Button as a separate right and if we check the API so we have another API that is update product right it is post only but uh doesn't matter like post or put but you just have to send the whole object right so on click of update button we have to call another API so let's create another function that will be on update let's create this function as well just like the save one so I'm just copy pasting over here right I will just copy paste this now on click of save in function service also we need to change it right so one more function will be needed that will be update product and the URL we have to change URL is coming from constant so just like the create product so if you have if you are not following from the start so just watch the starting also because of constant and service everything we have done over there this is the API call update product will go over here right so in product service inad of create product update product we have to use and this function we will call over here and obviously we need to send the object also here we can say product updated let's save all and let's check if product is getting updated or not right so let's click on qualif flower let's change the cauliflower with cauliflower let's change the cauliflower price to 25 let's click on update of okay why it is is saying like that on update product we are using the proper API call but I think my API might be not working properly okay but I will change I will check my API logic it will work once you test right but uh the basic code will be like this just like that we need the delete also right so on click of delete instead of primary it will be Danger let's remove this on click of delete we need to delete uh call again API to delete the product on delete we can pass the whole product for now let's check the API what do we need for the delete API delete product by ID okay so G API is there but we need to we just need to send the ID right so let's just check it out how API will look like so see API should look like this so this is your end point so in constant I have to add the delete product right so now in service also I have to create one function the function is gate only API call is gate only so always make sure like what is the API call method gate only normally it can have a delete or post post also but wherever you need to check the API what the method API is using that method you need to check it is G so we will use gate only and from APF from component we will get the ID so that ID we will write it over here now we don't need the object instead of update it will be delete and plus ID we need to SP because in constant we have up till equal to after that we are just concatenating right so that will work fine let's change the function name and this function we have to call on the button click right so on delete this function we will create now once we click on the delete we should not directly make the AP call we should ask the user like do you need do are you sure you want to delete or not so for that we can use confirm box is delete is equal to confirm so JavaScript confirm box we can use are you sure want to delete so once we use the confirm we get okay and the cancel if user clicked on okay in this variable we will get true if user clicked on false we will get false uh sorry cancel we will get false if this variable has value true then only we will make our API call so let's copy this code instead of update it will be delete and uh this function we are calling from the front end and we are passing the whole object so let catch that object item colon and we need to pass just the ID so item dot product ID right product deleted let's just save and check right so now just pay attention if I click on the delete you get okay and the cancel button but if I click on cancel you can see no API call is there now again let's click and if I click on okay now you can see the API call right continue product deleted and the product is also removed from that right so this is how we do the normal delete I mean whole Crow operation we have already completed just like the product another API call will be category so let's check the category API so here you can see get create category and get category now same like this right just the basic uh for uh because I didn't uh time explain uh I didn't invest so much time so delete category and the update category API are not there but you can do the same structure whatever we have did for the product Le same like that you need to create a component for category and you can do the whole operation right now another now we have successfully created the product right now as products are created after that we can show the category so let me just show you the let me just create the category component we have already created but we can show the categories so in categories we can just show the whatever the categories we have right so in the table we are not going to create an update and delete but at least we can show the categories we have so let's create a basic structure call to uh table I will create Tad TR th serial number what else we need category name let's check the API response what details we are getting just the category name will be there let's just check it out again okay so just the category name is there parent category ID is is something else okay we are not making the use of parent category yet and the action button we can show after the TR we will need T body and inside that TR then TD in the th we have three so here also we need three now in the component we need to make the API call so again let's go back to the service and here we can create an AP call to gate all category okay so API call we have already created so that is the use of service so you don't have to write API calls again and again because in product we needed that so we already have created now we just have to make we just have to create the API call service and you can get the data so Constructor round bracket currently bracket enter so private uh product service col on product service let's add the import get all category right we need a variable category list any now uh I don't know if you have heard of a sying pipe or not but let's just instead of uh what do we say create normal variable store the data in so that we can try to create we can try to create a a sync pipe right we can uh try to consume the observable in the HTML directly right so for that let me just create an observable so instead of normally making APA call and storing data into variable let's create an observable let's say product with dollar we normally when we create observable we name it as like that observable okay since we don't have any class or interface created so we will write it like that so this dot products is equal to this do product service do gate all category right now this is is this function is returning a data type observable and that only we are storing over here so this is nothing but this will hold the data once it get the latest value it will emit now this we can use in the HTML so on Star ng4 over here and we can add a sync pipe okay to use a syn pipe we need to add the uh what do we say common module over here right so make sure you add that otherwise it won't work so let's just save and check if it is properly working G all category APA call is there data is also coming but it is not visible let's inspect nothing is there now but my if we see my API so the response we get is under the data right so here we can add a pipe operator and inside pipe we have to use the map operator because we need to just filter out the date proper object item colon any we just need to return item. data okay what else we are missing we have created observable return like this in categories we are using the sync pipe let just save it let's check now let's inspect yeah so in the TB you can see that much TR is present now we just need to make the things Dynamic so in first TD we have to show the index number so let index is equal to index and this index we will print it out over here index plus one because indexing will normally start with zero right then item dot let's check what data we get category name this we can print it out over here and in the TD we can have delete and action button but for now let's SK it empty and let's just check right so you can see we are getting the data let's just add a table class right so whatever the the category we get from the AP that we have added to the table but with the Asing pipe not normally with the storing variable and the traditional way right so that you will also learn how to use the p in this kind of scenario where you know that whatever the API data you are going to get that you are that if you store that into a variable but that variable data you are not using anywhere apart from displaying on the table so rather than creating a variable you can directly subscribe to the result right right so like that you will have a hands-on experience on the ASN pipe as well now let's close everything now we have created the products also and the uh category also so in the home component layout component let's just add at least the router link so first will be let's say products again we will be covering all the thing but for now we are keeping it as it is category let's add the route I have created the category route as well so you should also create product is like this and same like that category also there products and category let's just save all and let's check if it is properly loading the page product no it is not loading why is it router is capital okay now again so as the rule goes whatever you use you need to import that so if we are using the router link so obviously in the layout we have to use the router link over here okay then capital r is there okay let's check if it is capital or a small no it's still not loading but why is it no it is fine it should convert to the H but it is not converting why it is not converting is there any something else in angular [Music] 17 router link router link products correct only no error is also there let me just check what went [Music] wrong sorry what I forgot is I have imported it but I have not added it to the import section right so just like the router Outlet you need to import it and you need to add the import array also right then the whatever the normal you know router link only and the you need to give the router link whatever the route name you have let just check one more time so if we click on product you can see it is navigating category also right now so we have successfully created the products and we are we have successfully shown the category list also now in the next episode this is with this episode we are done with this in the next episode we will work on the website part means showing whatever the products we have created just like the big basket you can see the categories over here you can see something like not the exactly like this but something like this we will show the categories once we click on the categories we will land to the product page and there it will show the products by selected category right then that to cut everything we are going to do but for now that's it hope you are finding this helpful it's an angular 17 project so whatever the new things we are learning on also and implementing also right so you could you could also do the same so that's it if you are not subscribed please do like and subscribe

Channel: LEARNING PARTNER

Views: 78,372

Keywords: ecommerce app in angular, angular ecommerce app, angular ecommerce webiste, ecommerce website in angular, angular 17 projects, angular 17 ecommerce app, angular 17 ecommerce application, angular 17 project from scratch, angular project from scratch, angular project for beginners, angular project, angular 17 project, angular project tutorial, spring boot angular project, angular ecommerce project, angular project with web api, angular tutorials, angular tutorial for beginners

Id: hejR2GfFXiA

Length: 86min 7sec (5167 seconds)

Published: Fri Jan 12 2024