Ecommerce App with Angular from scratch | Angular Project | angular tutorial for beginners

yes so welcome to the learning Partners so I'm back with one of the most awaited project template that is e-commerce right so in this video we are going to create a whole eCommerce application with the real API so just this is a simple template where we are showing the products you can see any e-commerce application what we have we just show the product on the product we have a button to add to cart and we have a way to let's say uh what number of quantities and when we click add to cart that particular item gets added to the particular card and here at the top we show the added items and once we decided all the items to be purchased then we make the sale right so these are the things we do in an e-commerce application so these same things just the basic flow we will show the card and after that showing the card we will add the process of add to card then once all the items has been added to the card then we will complete the sale so all three steps we are going to cover and this is this is just a whole cycle of an e-commerce application so let's get started from creating project so I open the particular folder that is e-commerce here I am opening the terminal and we have to create a new project so Ng new project name so e-commerce press enter once we press enter it will ask us like do you need a routing file or not so we have to say yes because we are going to need the routing file so you just have to type yes press enter Then which CSS framework you are going to need like SAS less so we are simply going with the CSS only press enter right so if you can see the basic project is created now what it is doing it is installing the packages packages from reading the package.json whatever the package default packages we get when we create the project it is installing from node package manager and it will put that into a node for node module folder which will be created in some time over here right so in package.json you can see we have got the package name and the version right so you can see different packages current my latest angular version in my project in my laptop is 15.2.0 so that is you can see this here then after package.json we have angular.json so angular.json is a file which we can say is a architectural file of our angular project what are the things or the settings we need to do along the project wise that settings we can do it over here so some of the things which we use normally like style and the script so let's say if we are using any external libraries let's say if we are using bootstrap you if you are using jQuery if you are using prime NG so that CSS and JS need to be registered over here we are going to install the bootstrap just for now I am just explaining like what is the purpose of this file then outside again we have one more file that is TS config.json so TS config.json is a in angular we work with the typescript so this is a com configuration file for the typescript compilation right so these are the outside the folder these are the three important files we have package.json angular.json and type tsconfig.js so as you can see here in terminal node module has been successful all packages has been successfully installed and if you see in node model we have got the packages so now let me just open the folder again because currently in e-commerce folder again we have the e-commerce so let me just do the things we have to run the project so to run the project it is already in the uh what you can say parent folder so to run the project we have to run use the command Ng sir okay so press enter and it will run it will first compile and run the project into localhost 4200 that is the by default code we have so let it compile before that we are going to need the bootstrap also so for that let's go to npm bootstrap so if you go to bootstrap let's see what is the latest version we have so latest version is 5.2.3 so this is the command npm I footstep I stands for in install so let me just copy this so you can see it is compiled properly let me open the another terminal and press this command and enter so what will what it will does it will install the bootstrap and add an entry over here also let's see the same entry has been added to the package.json now we have installed the bootstrap in our angular application but we need to add a link also reference of that also so in angular.json we need to add the reference right as I told you earlier in angular.json we need to add the reference so here we need to add the reference from node models underscore modules we just need to add a reference of that particular CSS so here it is let me just copy paste the folder name rename copy it will go over here after that bootstrap will be here so let's see bootstrap yes so bootstrap after that slash then inside bootstrap we will have this folder so that is dist slash inside dist we will have CSS so CSS again slash and inside CSS we need to use bootstrap.min.css so let's copy this and we have to put it over here and comma same thing we need the JS also so for that in script section instead of CSS we need the JS we have Js folder over here and inside that JS we have bootstrap.min.js so let me copy paste and put it over here so after installing bootstrap these are the links we need to add in the angular.json one more thing whenever you do any changes inside the angular.json file so it is mandatory to rerun the application so let we can stop this is already in compilation mode so we have we can stop this by using Ctrl C button okay so again let's try to run let's see if this folder path is correct or not so again if it is not we have to just like uh start from the node model only so let's save and check if it compiles properly or one if this folder path is not correct it will throw the error so let's see that right so let's open localhost photo double zero and we have got let's try to by default we have the app component so inside that app component we get this basic structure I'm removing it let's add a row column let's add I over here let's try we are trying to see like bootstrap class is getting applied or not so inside body approved yeah so you can see if I clicked over here you can see row plus is getting added over here so that means bootstrap is installed and CSS are also getting applied right let me just remove this now the basic folder structure is created now we just need to create some folder structure to just place all the files in a particular location so I am creating folder inside app folder pages inside Pages we are going to create the components which will be connected with the routes so if we say e-commerce applications what are the components we are going to need so let's create those right click on the pages component open in New terminal so we get the terminal open into that particular folder so first component we are going to need is NG generate component home will be like the default page okay so on press enter so what it will does it will create four files and it will update one file so you can see it has created four file and it has updated one file that is appmodel.ts so whenever we create the component that component class name should be registered to the Declaration part of our app model so you can see it is automatically added now second component NG generate component so in home component means landing page we are going to show what we can say all the products right some of the products categories and everything then we are going to need cart page so NG generate component and card either you can use whole generate like this component like this or you can use the short form also like above anything will work so let's press enter so now if you pay attention here cart will be added automatically once the component get created see cart is added automatically right so again one more component that is sale so three components we are going to need just now right so home component card component and product uh cell component so three components we have created after that we need to create the routing so in app routing model dot TS we have to create the routes so route is nothing but an object of array so path which will be URL so let's say products and component for this it will be home so products is My URL name and if in the browser we have this URL this component will be loaded after that comma second object again path colon this is cart page comma and on this component what we have to open that is card component third page again path this is routing okay so the last page was sale page component sale component so as you can see we have created three components uh we had the three component and we have created route of these three components first is product second is card and third is sale so we have got three components let's save all now we need the now bar right so as you can see in any e-commerce application we get the never like this where we can save all categories Grays and everything right so same thing we are going to create in the app HD app component.html we will keep our nav bar over here so for that I have already created a navbar using bootstrap so let me just get it HTML template Shop Wise let me show you this so you can see I have using bootstrap I have just created this now bar so I'm going to use this so let me just inspect this let's open it with Notepad so this is in header let me just copy now let's copy this and put it in the app component then we I need some classes also that I have created in style section so let me just copy those and put it in the CSS file of app component so means here so now let's save and check if we get the proper enable or not okay it is saying something not correct so two times we have the closing tag so let's search yeah here only let's save and check now yeah okay so you can see same number we have got now we have the now bar right so after the now bar ends below that we need a due which will be responsible to show the particular component so for that container just copy paste it from here only section container okay this is the thing we will put it here in the closing time and inside that we are going to have router Outlet so router Outlet is a thing which is responsible to load the component so let's say let me just format it okay so now we will just add a add to card item okay one more thing here you can see we have got this icon so now this icon is coming from font awesome so let me just inspect and show you so let's go to font awesome W3 I will directly use the link CDN link because again we have to install the package and add it in the node module so for now just to save our time I am going to use the CDN and put it inside the index.html so this is my index.html I am putting it link over here so if I save now we should be able to see that icon or not able to see let's see okay FS is there so means that is let's see the what we need this is simple cart icon right so one person let's see the class for the card item 1.74 we need because I have installed fault awesome 4.7 latest version is the five so that goes to 4.7 let's see cart yes so this is the card item let's see the class copy let's try to inspect it over here and see if we get the output yes so now you can see we have got the output right so let's just copy this and put it into the now bar and the end here we have to add it let's save and check yeah so we have got the cart icon after that we had the search icon also so for that search yes so this is the search let's see the class name let's copy and paste it over here let's save and check as you can see we have got it okay it is something else let me know this should be perfect first search only plus we don't need yeah so this is how we it is looking now so same HTML template I have used and into angular we can see now we need by default we should load our home component that is product component so for that let's create an empty route and here path will be star and component will be product home component only it's not C and check now but much I think need this is the default route okay let's save and check if we get the report component no still not let's see what is the error we don't have any error yes so it was double star so to create a default route we have to add the double storage to the power and the home component so as you can see homework is printed over here no let me show you the apis let me just close all the tabs so first part is done we have created the now bar and by default home component is getting loaded right so now we need to get we need to get the products from the API and show that inside the home component so for that this is an API URL I have inside that e-commerce is there and you can see this is the API so let's try it out execute so this is the EPA yeah so these are this is the API here I have the multiple products you can see this is an product array so now we need to create an uh service and in that service we will be consuming this API so let's create a service so in app folder I'm going to create one more folder that is services and here I will create the service so right click on the service open your integrated terminal Now command to generate Services Ng generate service product product is my service name enter so this will create a two file one is the testing file and one is the actual service file right so now we need to make we need to integrate the API right so whenever we have to call the API inside angular application so first thing is we first thing we need is HTTP client module need to be added into the app module so let's write the import first angular slash common slash http so here it will have HTTP client module and this will be added to the import section we are going to need forms module also so let's just add that also forms model this is this is necessary for NG model whenever we are going to use the NG model so to use NG model this import is very necessary otherwise we cannot use the NG model right so what we have did HTTP client model added and first model we have added now in product service so in product service what we need to do first we need to create the instance of HTTP client this is a service coming from HTTP client Library let's create a function get all products this is my function name now this function is going to return data type of observable so let's give it a return type observable any stirred bracket enter now here we are going to return so this dot HTTP dot give our API call is gate only so for gate API call we just need one parameter that is URL So This is My URL let's see and put it over here now we have set the return type also here also so after gate we just need to provide the data type that is in your square bracket so you can see now we have got there so this function is responsible to call the particular API and whatever the response we get it is going to return because we added the returns keyword now in home component we have to call we have to create we have to call this function but to use this function first we need to create the instance of product service so let me just close everything it's in product service and then in home component we are going to call the API so now here we need to create Constructor first okay so inside Constructor whatever we are doing this now inside Constructor product let's just create this is called dependency injection the objects we create inside the Constructor of any component or any service whatever the object we can create object of services only inside the Constructor so this what we are doing is called a dependence injection right so we have created instance of product service into home component now we need to create another function load all products opening closing curly bracket so here we have to make the AP equals so this dot product service dot in product service we only have one function that is gate all product opening closing curly bracket sorry we need to write dot subscribe dot subscribe round decade again round bracket result colon data type any then Arrow operator equal to okay so this is the normal API call subscribing so we add subscribe means we are fetching the data whatever this function is returning now we need a variable so product list goes on any it is going to hold the array so I am initializing it with mdra whatever the response we get we have to store that inside this product list so this dot product list equal to now if you see the API call response so API call is returning object and inside that object we have a property data inside that data we have got the array so we need to match result dot data this is the thing we have to do now function call is done but we need to call this function right so let's Implement NG on in it on on init right so first we have to implement then we can write NG on init now here we need to call this function so whenever we are calling the EPA call function now whenever we are making API call functions or triggering API all those things we need we should do in the engine in it Constructor is used only for the initialization and engine it is used to trigger the API this same thing will work even if we call it in the Constructor because Constructor get called whenever the first thing Constructor get called right then NG on in it that is the lifecycle event right so let's save let's just add a debugger now I will inform you like how you should debug whenever you write any code now first time whenever you are writing you should debug the code so I have added debugger everywhere so let's save let's open the console you just open and reload so you can see first debugger what we have got is in home component engineering then we are calling this function so it will go to that function continue see now it has came here now in this load product what we are doing we are calling git product or product service so if we continue see it is going over here right let's continue but we are getting one error that is coarse error saying like this API cannot uh it is blocked by course policy we have run the project on local news420 but I am I have in the API side I have written the logic like if only requests come from localhost 4 to 0 4 then only I will get no then only I am allowing API to get send the response so let's just rerun the application on different port so Ctrl C CLS NG sir now I need to run the application on different code so Port 4204 let's press enter so this is how you run the application on something different port by hyphen iPhone port and then port number so now my application will run on 4204 port then I will get the API response then that course error won't be there so let's save and check now go to zero four C now component now we have got the debugger in the component engine unit continue load all product then here let's just add one more debugger inside the Subscribe that is 23 line now we are in the service from here it will make the API call once this line execute now you will get entry over in network tab over here one entry of that particular API see it is 200 means we have got the successful response now if you seen an hour on that result you can see we have got the object from the DPI and inside that object in data we have got the five elements and that we are going to store currently product list is empty but if I one step over so in product list you can see the products and these are the various properties we have in that particular product you can see so now we have got the response we just need to bind this whatever the products we have got from the API into our UI so for that I have already the UI created of that product view let me just copy paste this is the section [Music] let's copy now in HTML we have to paste it over here so let's just save and check if we get the UI yeah so you can see you go we have got that card but now we need the image also so now if you see the response we have got product SKU product name product price and here we have the product image URL also now we just need to use the formula right so for that let me just remove the extra space questions so this is my call LG3 this is the one product view so we need to use the for loop on this particular device so let's remove all this now in this variable that is product list we have got the array of all the products so on this we have to use the power Loop so on call in G3 I'm using the for Loop star in G4 equal to double quotes inside that let product of product list now we just need to bind the things so let's say this is instead of here we will be showing our product name so product dot let's see the properties product name right so we have we are showing here product name then we have to show the product price also so again let's copy paste let's skip the dollar as it is then we have product price and let's show the same price again after that discounted amount something and discount we don't have anything but let's keep this as it is 30 30.5 something so let's save and check if we get the product names correct yes so you can see Vivo plus upon the things are visible now and the product now price will also visible now next thing is like we need to bind the image so we had the image tag instead of the static one we need to make it Dynamic with property binding and it will be product Dot the image we will be getting from the API set that is under product image URL so let's provide it over here let's save and check how does it look yes so you can see product images are there but due to the height issue we are getting something messed up screen so let's just fix the height so let's click on it so to this image tag we can fix the height like height let's say 200 pixel or yeah 200 pixel will be enough so let's just add this same forward here let's save and check how does it look now yeah so it is looking perfect but just one thing like we need some spacing right you can see the first one and the last one is overlapping is very connected so we need some spacing so for that let's just add a class that is p x 1 so let's save and check okay PX is not working so let's try PT that is padding top one yeah so you can see we have got some padding right so whatever the product we have got that we have shown over here now we just need an add to cart button over here so that we can add to cart these products right so this was the span let's create a row inside that call Six in First Column six we can have some that reviews count we don't have all the data but just for the UI sake we are designing that reviews and everything here we will be needing button and two card so here we have done the add to cart process normally just add a class that is class vtn BTN SM BTN success so let's see if we get our one movable we need to make it to the end so text end in bootstrap 5 we have the text and class so okay you can see we have got the text name now let's make it eight and let's make it 4. why it is taking so much space let's check so column data is like this still why it is coming down let's why one thing is coming down like we just check then we can move it with the remaining functionality okay we had the second one so let's remove this okay so like this only start is there and then add to cart now next thing is like once we click on the add to cart we need to add this to our card array and that added card will be visible over here now this is the static UI then we will make it Dynamic so for now whenever we say the add to card we need to hit the API so that API is let's check the API add to cart this is the API so you can see this is the post API and this is the object we need to send along with the quantity so now here also we should have the quantity like but for now we will be sending quantity as 0 by default so so we need to create one more function in the service that will be at 2 cut so now same thing is going to be there just basic things I am going to copy paste instead of gate it will be post and we are not going to get the array back so let's keep it as any only obj colon any we are going to get the object from the con particular component and then we are going to send it because to post object we need two parameter first is the URL and second is the object so let me just copy the object let's create the object in our component.ts that is homecomponent.ts so that is part obj colon any equal to our properties so cart ID will be by default zero customer ID we are going to need okay so now because whenever we are making any cards so first thing is like we need to login right whenever in e-commerce application whenever we try to add to the add any item to the card so we need the login right so I will skip that part login but customer ID let's see what customer ID we have and we will just hard code that same thing you will do the login store the login ID to the local storage and then you will do the let's check get all customer and set it with any customer ID okay so let's customer id1 we can set so for that I'm hard coding it customer id1 and quantity zero right so this is my cart object now we need to create a function and item two third right so here we need to call this function so this Dot product service now in product service we had two function once when I get all product and second is get all product let's just copy paste the Subscribe thing now add to card needs one parameters so you can see in that two card function we have one parameter that is the object so this object we need to pass so this dot part object we have passed now we need to call these on this add to cart button so click event and to cardboard function then we need to pass the product ID so that we will get from the for Loop instance that is and from NG bar products dot let's check the ID that is product ID so now when we are calling this function we are sending one parameter so that we need to catch it over here that is product ID column number and this we will assign to this object I will debug and I will show you like why we are doing an how it is going to work product ID over here so now let's just add a debugger and C so you all now let's just open the console so now I'm clicking on that to cut Oppo plus one and I am clicking on the add to card so here you can see product ID we have what is 26. now in cart object these are the various fields we have okay product ID is capital we have made we have done it in small so let's just make it capital you know API call will be there but let it reload once more so let's try Vivo Pro Plus add to card product ID is 21 what we have got then so if you can see product ID is zero by default because this is what we have initialized then we are assigning the product ID so now you can see this is the updated card quantity we are sending zero customer ID we are sending in cart ID is the primary case so we don't need to send that let's continue we have got some error let's check what is the error course error we have got why it is having a course error okay the URL we haven't changed get all product is the only URL we need at two card for that and two card so you are we need to change the service and no part so let's say you know and check it again now it should work let's try to add send someone five for you add to cart product ID is one eleven continue in the service we have got whatever we object we have sent on the component that we have got here and that same object we are passing to that to our DPI continue so in the result you can see product added to the card successful right now whenever we have added the product we need to show that product over here right whatever the added product added for that particular customer ID we need to show that so for that let me just remove this now here we are going to need the subject because once we do add two card from the home component in the app component we have that pop-up thing here so we need to show that over here there like what is the count and everything so for that we are creating subject so public card added subject is equal to new subject let's say Boolean okay so we have created a subject subject name is card added subject now whenever we do the whenever we have added something into the card so we need to emit that so for this in the subscribe here let's add this if statement like if result dot result is true then only we can say like we're going to show the alert product added to cart then we are going to emit that subject so this dot productservice dot card subject dot next and we will send True Value over here right so whenever we are adding the at any particular product to the cart we are emitting that subject now we need to subscribe to this into the layout component so let's go to sorry layout now our app component so in the app component let's write the Constructor and in Constructor we will be subscribing to that so this dot okay first I need to create the service so private product service colon product service so we have created objects so these dot product service dot our subject name is card direct subject Dot subscribe so what we have did whenever we are adding item to the card we are emitting we are emitting the subject that is object we are emitting and in the app component we are subscribing to that now here also we need to call items added to the card by that particular customer so while adding to the card we have sent the customer as one so always we are going to use the customer ID one so now we need to get all the card by customer ID so you can say get product get card product by customer ID so if I show you here we need to send the customer ID so one if I execute let's see how many yeah only we have Samsung that we have recently added that only one item is there so we need to use this API in the app component so first let's create the service get card items by cost ID return this dot HTTP the method is get only this is the URL now this should ID should be dynamic so it will come from here first ID column number and this we will be passing to the URL so after the double course we need to concatenate the ID right so let's just add this same thing observable and everything it's not mandatory just but to make our code more readable we should add this okay so in service we have created one function that is going to get the card by customer ID so now we need to call this over here in that component load cut this Dot product service Dot get cards item by customer ID sorry dot subscribe then inside round bracket res school and training okay so now here we need to send the customer ID so let's send it as a one now whatever the items we get we need to store it somewhere so card items or let's say product any square bracket equal to empty and whatever the result we get we need to store that over here so this Dot card product is equal to Res dot data now we need to call this on the NG on it let's Implement engine init method on we need and we need to create the hingionic function also so here we need to write this Dot load card function we need to call and this we will call and once the cart has been added again we need to call this function so in the Subscribe also we need to call this okay for now let's remove this and I will show you the Practical implementation then you will get it so let's just add a debugger over here so here on the page load you can see one API call is there with directive one you can see and in the preview data we have got the ideal card so let's just try to add one more laptop Pro add to cart let's reload so here we should see two items yeah see two items we have seen now same this records we need to add it over here so this is the static one so let's make it dynamic so in this element we have got the elements card items so that we have to use it on this particular div right let me just remove the necessary things so now on this row I need to use our Loop star [Music] NG for is equal to let cart of card products now so we have four columns so in the First Column we have to show the image so let's copy that image tag let's copy it let's paste it over here and instead of product now it will be card and the height will be let's make it a TPX only because we are going to need that in the pop-up so no need of very big picture then in second thing we will show the product name so that is card because in the card API we are going to get everything so you can see product image URL so you are getting so that we have binded over here the name also we are getting product name so let's bind that over here then we have to show quantities okay quantity is there but quantity is coming 0 y it is coming zero okay so in API said I must have done something wrong so let's just assume that quantity is coming one so let me just copy paste plus one so for just now I am doing it plus one because from API side I'm getting 0 only so I might have forgot that then we have to show the rates also so card dot price that is product price right so I have shown the cart item so let's save and check now how does it look so see the image is visible our but we don't have the second images why only one image okay we have it but it is not properly visible so let's make it a circle one border radius let's make it 50 percent and let's see how does it look and after row we have to add some spacing so padding top one I'm just starting to give the spacing yeah so this is how it is looking now so we are showing the product image product name quantity and the amount now we just need to show the total quantity total what we can say amount also like five thousand and fifty thousand should in the bottom subtotal we should show the total amount so in the Subscribe call here we have got all the products right okay one more thing now if you see we have got two items okay that two is also static so we need to make it Dynamic so this dot product in the HTML so this was that thing so we just need to make it Dynamics the array of length length let's save and check okay now if I say I'm going to currently we have two records only now if I say upon plus added but it is not refreshing and only two but if I refresh then you can see three items added now but once I click on this this should get updated right so here comes the subject so now when we add to card we have emitted the subject and in the Constructor of the app component we have subscribed to that so if we call this over here let's just add a debugger then you will understand the subject also let's just save now currently we just have three items so let's just open the console so let's try to add Vivo Plus continue continue yeah so we have got the response result is two so it will go inside of the condition we will show the alert then you can see we are emitting that particular subject using next property and we are sending the value to 2 also so now if I continue yes you can see it has executed the Subscribe call in the app component then we are calling the function so you can see currently it is three but once I continue see cart is getting increased so this is the actual e-commerce thing whenever we see whenever you add to cart that card get incremented so like this currently we have Vivo Oppo lab and sensor right so what is remaining Vivo Pro is remaining so let's just add to cart see okay so now we just need to show the total over here so for that in the app component here we have got the items right so now we just need to create one variable that is sub total number is equal to add equals J 0 ammunition initiating now this variable we can use the for Loop or for each let's use for each so we can use reduce also over here but now let's not make it complex since we are considering this we are in this video we are considering just for the operations so we will just remember so we need to use this dot subtotal equal to this dot subtotal plus element dot price what is that product price let's just copy paste it from here product price right and this sub total we will be showing over here let's add it in a strong text so it will be strongly visible [Music] let's save and check now so we should be able to see the totals also yeah you can see the total now right so what we have done till now we have shown the product we have got from the API and add two card functionality is also done now we need to do we need to show once we click on the checkout we need to land this particular thing on the sale page and there again we have to show this cards and then we will create then we will hit another API to make the sale obviously we are not going to integrate the payment Gateway but because we are just trying to cover the basic flow right so once we click on the checkout it should land on to the another page that is sale page so on the checkout let's navigate so click redirect to save let's create this function now on this in this function we have to redirect it to the sale page so for that we need to create the service of router so private router colon router so now here we need to write this dot router dot navigate by URL and we need to pass the URL so let's see the URL power sale page that is sale so let's save and check it should navigate to the sale page but you haven't done anything in the same page but it will at least redirect okay it is navigating but it is not visible over here let's check why we don't see anything error app routing model dot is sale component is there and in sale component let's see what things are there no it's empty so let's check okay so let's try now yeah on click of checkout we are landing to the sale page now in this component we have to show the elements that is cart item and once we click on the sale then we should we have to hit the another API that is make sale or something is there let me check add new cell so now in cell component we have to call our Cardiff again so for that we need to create the service that is private product service colon product service let's add another call let's let's copy paste it from app component because we have already written that over there that is load cards let's copy let's paste it in the cell component let's just change the name and we need the variable that is colon any square bracket is equal to square bracket and subtotal is also we are going to need right so these things are done now in cell component we have to show the grid so let's try to find out any UI if we get e-commerce sale page that's our HTML CSS so let's try to design the same thing now I am going to copy the content from app only so this is kind of a template we need let me just copy this in cell component oh call it so I just paste that so now let's save and check okay we haven't called that function on the page load so again we need to implement on init and G on init function we need to implement and here we will be calling load card function so this dot load card function let's save and check yeah okay so now let's just get rid of that style we added let's make it 200 pixel border radius we don't need so let's save and check yeah okay so this is how we are showing the card right so there is remote card also we don't need let's make it drill part items okay so here you can see we are showing the cart item now next thing is we have one more API suppose let's say if we have to what you can say remove particular items let's see if we have the API yeah so we have one API that is delete product from cart ID card by ID so we should have the functionality let's say we can add a delete button over here and we can remove that so for that let's just add a delete button so for let's make it 3 3 then 36 10 8 10 and let's add one more let's create a button plus btnbd and SM [Music] Danger and remove now on click copied we need to call a function so click remove item and we need to send the card ID card dot let's check the response cart ID will be there yeah cart ID we need to send it from the HTML let's create this function so from HTML we are sending some parameters that we need to catch it over your ID number so in our service let's create one function to remove the particular cart item so this is get API only so let me just copy this paste it let's change the function name remove third item by ID let's check the method name we need to change so this is the method name it will go over here card ID and it will go over here so now we need to call this function from the cell component so this dot productservice dot remove card item by ID and whatever the ID we get we need to pass it over here dot subscribe thing and if condition just to check like if a result it successfully or not because in every API I'm sending object and there we have the result property if that particular operation is Success then we do that and again we need to call the load card button because we need to get the updated card item so let's save and check now yeah okay so currently we have four five items so let's try to remove this Vivo Pro if we click on remove yeah so you can see we have got first API call that is delete product from cart ID and then in the success we are calling get product so let's remove this also now if you see in current cart we have just three items but here you can see five so we need to refresh this also so again same thing when we added cart now we have emitted this so same thing we just need to add it over here also once we remove the car so that will also get updated so let's check now so everywhere same information should be visible so now if you can see in the cart page we have three here also three modified let's let's say click on remove so here also we have two item here also we have two item same this remove button we can add it over here also right now so after this current item we need to show the submit button or save make sale button so after this at the end again let's open a row call what was the top eight let's give it as eight this is first this is second row third row fourth row after this let's add one more row let's make it as call to L and inside that we will have button make sale plus dtn BTN LG BTN success okay now on this button click we need to integrate that sale API songs yeah so class name was not correct so now we should see the button yeah let's make it Center align so txt dot Center right so let's check the API call input or the clip so add new cell so while for the sale API we need to design some particular form like we need to ask where it should be delivered and everything right so for that this is an object so let me just copy paste in the sale component.ts we need to create an object that is sale object colon any equal to curly bracket now we have the object ready let me just format it back so this is the object we have for the sale right so now on click of sale button we need to call this API so here customer ID again we are going to do the static in the next video I will make it with the login because this saves only just to cover the basic thing sale date current date so new date so it will get the current date then total invoice amount so that we are going to update in the save function so make sale function so this dot sale object Dot total invoice amount total invoice amount will be nothing but the subtotal so this will go over here so we are changing some properties now then discount we have zero only payment narration and these things I am just adding it over here something we are not going to design the form just basic things I am going to need plot number 112 something [Music] me or ATMs new name okay so I have created the object customer ID is also there total invoice amount I am I am updating in that function now we need to call this make cell function on this button click so click and once we click we need to again call the updated card after we make the cell card should be empty right so let's save and check that okay we haven't done the APA call so let's do the API call also now in product service we need to create one more function that will be post and to card Mr knob that is add new sale so let's make it add new cell make cell this we have to call it over here in the sale component we don't need the parameter load product is in there and uh wait we don't okay object we need to send so sale object we need to send it over here let's save and check So currently we have two items in the card right so now let me clear it and if I say make sale real component let me just add up debugger so if I click on make sale now if you can see total inverse by default zero is there but in subtotal we have got right so that we are assigning it continue so many debuggers we had added so if you can see in the network add new sale is success and you can see after that we have tried to get the card now we have got the zero because we have made the same okay here also we need to make it zero Dwight is not getting empty cart item has been removed because sale was successful once we do the particular sales card item get cleared right so same thing let's just see why it is not emptied in the app component card product dot forage okay so every time we can just initialize it with 0 and same thing we can do in the sale component also because once we do once we if we don't have any array it is not going inside and this is not getting changed so that was the issue so let's try it one more time now let's go to the home page let's add Vivo plus and I did you can see one item added over here let's add send some you can see two item added let's go to the checkout page now so in checkout page also you can see two item let's click on make sale yeah so after make sale is successful we have got the zero item everywhere it is zero so let's just show the pop-up also alert save success so let's try to do the same thing one more time so this is just a basic uh version of an e-commerce application we haven't got into detail like uh login customer information deliver address everything we have done the static thing let's just try Oppo Plus product added you can see one added here let's click on checkout let's click on make sale yeah sales success then it is it is getting zero got it so this is the complete cycle and very basic one we haven't done the filter and everything in the next video I am going to achieve all the Advanced things like we can filter It Out by this we can wish list also just like in Amazon or Optical we can wish list um here also we will add the delete button on click of removal we will remove all the items right on click of this particular click we will open that product in the new page again from there also we can add quantity currently quantity zero so we can have we can have a functionality to increase the quantity like how many quantities are going to need so the whole full-fledged e-commerce application we will try in the next video so hope you have liked this video apis are there just give it a try try to create the basic application host it in the GitHub that will be useful for your next interview so that you can showcase okay and this HTML also I am going to provide you in the GitHub so you can use the basic pre-build HTML code please do like and subscribe my videos and stay tuned for the next video of this e-commerce application but with the better version thank you

Channel: LEARNING PARTNER

Views: 64,799

Keywords: ecommerce website, Shopping Cart in Angular, ecommerce in angular, ecommerce app in angular, Add to Cart in Angular, Angular Ecommerce Project, ecommerce app with api angular, ecommerce app with dot net api, angular project, angular ecommerce project, angular ecommerce website, ecommerce website api, E-commerce app From Scratch Using Angular, Angular Complete Project Tutorial, ecommerce app, angular ecommerce app, angular tutorial, angular tutorial for beginners, angular 17

Id: adaRRTIiwWk

Length: 71min 59sec (4319 seconds)

Published: Thu Apr 27 2023