Ecommerce Application In Angular From Scratch | Angular Project | angular tutorial for beginners

so welcome back to Learning Partner so in this video we are going to focus on e-commerce application yeah so website part only not the admin part so this is just for a basic understanding what will be the flow of the website right so let's say we have a static website in that static website right we are going to show the products we get from the API again we can show we can filter out the product by category Also let's say we have some Cate like mobile tablet right laptop based on the category we can show the particular products again that is again with the API right let's say if user try to click on the save or uh add to card button right so if user is already logged in we will allow him to add that particular product to the add to card if he is not we will ask him to register after registration he can still add add that product to the card right we can show the let me just open the main new just static HTML is already ready because it will be so time consuming if we do that in the video so this video this HTML part you can see it is with bootstrap only so you can see whatever the products we get to see all way will show like this on add to card button this particular product will be added to the card and it will be displayed over here right whatever the product item you see here we will be displayed you can remove also from here so that is nothing but this remove added program right then we have a checkout page also right so if we have if we have added multiple product then we need to when we click on the checkout it will go to the checkout page here we need to just fill the basic address info and we can see all the added item again we can remove the same thing from here also total and when on the place order we will hit our place uh order confirmation API right so once you place the order then just a second once you place the order that will be visible to admin right whatever the order he has received from the website that admin can see now talking about the Technologies so obviously it's uh front end side will be in the angular with HTML CSS and the boot stab for Designing API are written in net core right and it will be hosted on pre api. Min project.com from here you can access those API and the database I have used is SQL database now this video is only focused to the angular side because I have already uh written the API and hosted it on it so I will I won't be covering that but just to show you like this is the URL I have been talking to and in the Ecom you can see all the API right so you can see gate all product gate all product by category create product you can create your own also but some products I have already entered so let me just write out execute so you can see we can see so many products are already here right then all product then add to card API is there right before add to card we need to register customer login and everything Place holder is also there you can remove also delete product from card by ID so so many things are there right so let's start with the angular project so this is the default project I have created just a normal project is there in that I have just added uh bootstrap so I'm not just going to cover everything because you might have already know like how do we install the bootstrap and everything right so now components I will be needing so app component is there right but we will use the app component for our navigation purpose we will have our nowar over here after that we will need a product page right so in the product page we will show all this product like this then we will need second page that is for the checkout so only two components we are going to create then login and the register part will be in the model purpose so we won't be needing components for that right so let get started so in the I will just copy paste the header part first from my this is my HTML page so from here I will copy the header part it will go to my app component router Outlet we are going to need right so let's sa and check if we can see the header yes so you can see the header part is visible now here right after that we need to create our first component so in app folder I'm going to create a folder let's say Pages inside this folder I will create my first component that will be product and then check out so NG generate component products let me just create the remaining component so two components I have created in the pages folder you can see check out and the product let's create route of both of them mty object path so path will be products then component component will be products component only this is first route then second route again path check out so we are just covering the basic flow that's why we have we we haven't created so many components and everything just the basic eCommerce flow we are going to cover so for that we just need two components only right so that's it two components we have created now in the product component we need to show the products right now let me just copy paste the HTML part first so this is a section for product I will copy copy this and paste it over here now let's see this products I have to add it in my header component so instead of HRA we will use router link and we have to add slash this same over here also I will add it we don't have so many categories and everything but let's add the same page so if I click on home anywhere you can see that particular HTML is getting rendered we don't have the images right now because I haven't added that right so now first thing is on the product page component we need to call our API so that API will be gate all product right so you can see this is the URL now we need to create a service which will which where we can write the apis so just like the pages folder I will create one more folder not on in the app folder we have to create services and in Services I will create one more service let's say product NG generate service product one service I have created which is product just give it a time yeah so servic is created now in that now we have to make the AP call so to make the AP call first thing we need is in app component we need to add input of HTTP client module right so for that let's just add input it will become chroman SL HTTP and here it will go HTTP client module and again form moduel obviously we are going to need so I'm adding it so two inputs we have added HTTP client module and the forms moduel so let's close this file we don't need it now now here we need to create instance of HTTP client service right this is done now we need to write the first AP call get all products R bracket curly bracket enter now this function is going to return return the data type of observable data of type observable so we just need to provide return type any square bracket that's it now here we need to return this do http.get gate method is going to be there and it is going to return array of data something is not correct yeah all correct so this is my API this will go over here that's it so our function API call is ready so this function will be responsible to call this API and whatever the data it will return that data we are going to return now we need to create instance of this product service into our product component so that will be. TS so Constructor we have to create to bracket private product service colon product service we need to add the UT let's add it and curly bracket right so this is the basic thing we have created service and in that service we have written one API call function and that service we have imported into our product component now we need to add that NG on it also life cycle event so on in it we have to import and we need to implement on in it so that we can create NG on init function right let's create one function load products right so from this function we will call our product service dot get all product and we will subscribe to the result whatever that function is going to return so Aras colon any Arrow function that's it so this is the normal API call we have we normally write right so whatever the response we get that we need to store somewhere so let's create a variable products products array colon any it is going to be array so that's it so whatever the response we get that we need to store it now this do products is equal to now if you see the API response the response I am getting is object but inside that data is the property where I'm getting the actual array so that's why we need to write R do data right and we need to call this function in the Ed on it so normally we initiate our API call from the NG onit life cycle event hook that's it now in this particular array we have the products right so this I can use it on the product du so exclusive product and then I think this is my du yes so you can see this is getting repeated so this is my du let's remove the static one these are all static I will remove everyone everything just one I have kept and I will use for loop on this particular du because we are going we need to make this particular du repeated right so let product of product array let's say and check just like how many dues we get okay so see you can see these are the let's check the network and see if API call whatever the response we are getting let's reload one more time so you can see API call is there API status is 200 and total number of Records we have got is 12 so 4 4 you can see we have got 12 records over here right means 13 0 to 12 now we just need to bind our actual data so first is image also so if you see the data we have got the image also that is product image URL so that we can bind to our image tag so you can see in SRC is over here let's do use of the property binding now here we have to provide product dot product image let's see if we can see the image now yes so you can see image is getting properly displayed but due to size it is behaving randomly so let's fix the size first so image fluid is the okay I think I have missed to add the CSS yeah we need some CSS also so main. CSS file was there from my static HTML code this we have to put it in the common style let's see if we get the static height for all the images still not let me just check I will pause the video for now so this was the class I think this was missing let me just add it to our yeah it is there but why the class is not getting applied save all me just do it why it is saying card image top did we add it somewhere else okay two times that class is present that's why so this will go over here let's remove that let's it so now our card is having some static fixed height right so whatever the image we have we have we Ed we got from the API side that we have binded successfully now next thing is we need to show the product name but if you see the API response we have got product name and product short name so we are going to use the product short name because product long product name can be very long and and our UI can get Disturbed so product short name is the property we will be using so this is the area where we need to show the product name product dot product short name let's see yes so you can see product is product name is coming properly next thing we need to show the price so price will be over here and this will be let's check the property product price we are getting the error something okay so this pan was missing product price is done the next remaining thing is the static one okay so you can see product price is also coming since we don't have that uh 30% off and everything in the a let's just keep that as it is or let's remove it so that we will get a clean UI so this is not needed this is also not needed let's sa okay so now it is looking fine now we have first thing we have we have completed is like we have displayed whatever the products we have now if you see on the product here we have something uh we can categorize like so we have one API right that is g all category yes so this is the API so this will gives you all the categories we have mobile monitor whatever right so this API we can bind and whatever the categories we have that that we can bind it over here so for that we need to make one more call so in the service get all category round bracket curly bracket let me just copy paste the thing so that we can get this quickly now just we have to change the URLs that we will do it over here now this function also need to be called on the page load up here so just like the load product now I I won't be writing whole thing again and again the first time we have written the API call so now I will just copy paste instead of get all category now it will be get all category we need to create one variable to hold the category categor stolen any Square packet is equal to Mt right so this will go over here and we need to call this function on the page load so on the page load we are calling two functions first to load the categories and second to load the product now this categories I will use it you can see here lii lii is there which we have to iterate so star ng4 on lii let category of categories and whatever the name we have in the category that we will display it over here category dot what is the property we are getting category name let's save and check so you can see mobile camera tablet whatever the categories we were getting from that that are displayed now so you can see all are currently having some blue color so what was the previous one let me just check just a second I need to see okay txt black this was the color we just need to show it like this is selected okay so txt black right so what I'm what I'm going to tell you now is why the products category is not there okay category interpolation is missing so let me just write it quickly category name that's it so you can see all the categories are here let's say if I click on laptop right so I should be able to see only laptop right for that also we have the API that is nothing but get all product by category ID for this API we just need to send the category ID right so for that we need to write a API call again let's go to service let me just copy paste now this is get all products by get category right let's see the URL write out one so this is My URL so let me just copy let's paste it over here now this one will be dynamic so for this function we will have a parameter so ID colon number and this ID we will bind it with interpolation sorry we just need to make this URL dynamic so we are just uh making the URL Dynamic with uh concatenating ID whatever we get right now we need to call this function from our component so just like this load product again one more function let me just copy paste so this will be my function and we need to call this function right and this function needs one parameter now this function we will call from this Li on the click of this Li so now here I will write click event we need to call this function and we need to pass category dot that is an object but we what we need is just ID right so category ID so always try to copy paste the variable name if you make the spelling mistake you won't get the data right so when we are calling this function from the HTML we are sending the category ID so that we need to catch it over here so this will be category ID colon number and this we have to pass to our service function that's it so again whatever the response we get again that same response we same response we are going to store to the produ because this array we have binded to the HTML one more extra thing is let me just show you how it is working now so if I click on mobile okay it is read because we have anchor tag over here let me just remove that right if I click on mobile you can see only mobile I'm getting if I click on camera only camera tablet so sorting is there next thing is I don't know like which category is selected currently we know that we have select we have clicked on tablet but it is not highlighting so for that to make it like which category we have selected we just create a variable selected category col and string by default it will be empty but when we click on that so this is the function so here we will store selected category whatever the category we get right now whenever we it will be now number so whenever we clicked on any category let's initialize it with zero right so whenever we clicked on any category that category we are storing into this particular variable now this variable we can use it to just make that class Dynamics so this text BL color was there now instead of this we will write NG G Class so if this variable equal to equal to whatever the category is there in the for Loop if it matches then this class otherwise this class so text danger will be class over here if selected otherwise text black so let's save and check now we should get our selection properly so currently no category is selected but if I click on headphone you can see it is in a highlighted mode right if I click on TV you can see it is in highlighted mode so with that variable we have did that so we have shown the product we have filtered those product also next thing is we need to implement the login page right so the login page okay we just need to borrow the code from here so we had two models so this I will copy and paste it in my law app component because the nowar I have in my app component right so this will go over here let's save and let's see if we can open the popup yes so registration and both model popup are opening now first thing we will integrate the registration registration model let's see what things we need in the registra register API okay so only three fields we are going to need right so from App component we are going to call this API right let me just write out execute we just need the API so this is the API so uh if you can you can create so many services like user service and everything or else just for PR practice if you are doing you can write all the function in one service only so I will be using only one service so [Music] resist this will be my function API call now if you can see the registration API is post right so we need to create a post API call so same thing will be over here this won't be array instead of gate it will be post and for post G we have to send two parameter first is the URL and second will be object so let's add a parameter obj any and this object we will pass it as a second parameter to the post right now we need to call this function from the app component so in app component we have added our registration popup so we are not going to need so many things let's just remove the full name name username password and what thing is there mobile number only three things are there name mobile number and password name is nothing but our username also email ID would don't need male female also address also we don't need that's it right so these are the all apas these are the fields we are going to need now we need to create the object so just go to the Swagger copy this object create a variable resist obj colon any equal to Let's paste our object let's empty this now now this object we need to bind to our HTML right so here using NG model square bracket round bracket NG model dot let me just copy paste right so name mobile number we go over here and the password field right so we have successfully bind particular object to the particular field and now click on the register button we need to call the API so click on register function let's create this function into TS again Constructor and everything we are going to need the same so let me just copy quickly Constructor input right so here this do product service dot register function we are going to call for this register function you can see we have to send the object so this dot register object we need to send then do subscribe thing like as it is result colon any but if you can see if I'm sending the improper data I get the error and the result property is false normally so if API is successful this result property will get true right so for that we need to add a if statement check if Rees do result if it is true then only we can say alert user creation done else we can show whatever the error we get from the API side so result dot in the message property we normally get so let's click on Save and check if we can do the successful registration uh click on register let's say Raman is my username name password 1122 3 3 contact number 1122 3 let's add something 11 2212 33 let's check the network call Network right if we click on register you can see APA call is successful and registration is done also right result is true but if I again try to hit the AP you will get error mobile number already present so you can see result is coming false and mobile number is present what error message we get right but we know like uh Raman is already there so let's copy paste our username and password so that we won't forget it yes so this is our user next thing login right so login popup is there so again let's check the login API login write out execute now this is the object a small object only so this I have to use so just like register I will click clear create login object right let's empty this now this I have to bind to our login model component so this is my login square bracket round bracket Ng model equal to dot username and second one will be for password so that's it two two Fields only are there in this particular object that we have binded now on click of signing we need to call our function instead of submit let make it button click on login let's create this function into our app component only just like register so let me just copy paste same code we are going to need just now just like register we need to create our login function also so I will just copy paste instead of register this will be login let's check the APA call this is the APA call it will go over here that is also post API so we don't have to change anything login and the URL change now in app component dos instead of register we need to call login function and we need to pass login object right so user instead of this alert we don't have to show the alert let's show user login success and once we get the login datail now we need to store that into local storage so that we need how do we know like user is logged in or not so we need to store whatever the result we have got somewhere right so either you can use S Storage or the local storage So currently I'm using local storage. set item key will be Amazon uncore user and the value will be I'm getting object so I need to convert it so json. stringify method I will use to convert my object to string result. data right so let's see and check if we can log in or not so login this was our username but let's try to enter the wrong password you can see wrong password okay right so on sign in you can see why login success is there code first okay something is wrong okay username and password is going empty why is it okay name property so I think our form the particular form is in my form tag yes so this form tag is there so that's why whenever our input elements is in the form tag so with NG model you need to write name property also that's why the object was going empty so you just need to copy paste the whatever the property we have binded user password will go over here so let's try it now login Raman let's try wrong password let's try sign in yes you can see wrong mobile number or password is coming now let's try to enter the correct detail that is 1 one 22 3 3 sign in yes still let's see what we are doing wrong right is saying wrong mobile number and passwords let's check it over here execute let me check the customer detail if it is fine or we did something wrong okay password I think mobile number is there let me try with mobile number Okay so username is not name we need to pass the mobile number now it will be success so you can see user login success and the in API response you can see the same data we have got customer ID is 38 now that we have stored in the local storage so in the application local storage so you can see in Amazon user data whatever the data we have got from the API that you can see it over here right let just remove the remaining so in the local storage we have got the logged in customer name right so if user is logged in we should not see this login and the register button right so that also we can take care so in the let me just close everything so we have that buttons in the app component only so how do we know that user is logged in or not so if in the local storage we got this particular data present that is with key Amazon user so let's write the code for that so I'm just creating variable login obj p and any right what it is saying duplicate identifier logged in loged object okay so in Constructor what I'm trying to read is local storage data local data local storage dot gate item now we are trying to read so that's why G item and our key is Amazon user so if we have the data in the local storage so we won't get this local data null if not equal to null so this is the check we have to add means this particular data is present in the local storage so that we know that user is logged in if it is not null then again we need to convert it back remember while storing we have stored that in a string format so again we need to convert it back to the object format right so for that parse obj is equal to Jon do parse method we have to use equal to is missing jon. pass and here we need to pass the local data whatever the data we read right and that we will store it in the log object logged object right so this also you can reduce directly by writing over here but just to better understand I I have written like this now if logged in object so in logged in object user ID or customer cust ID property is there right so we will use that to show where is the yes so so you can see this was the lii so this Li we can say star NG if double course dot what I'm going to do logged in object Dot customer ID if it is there right means if it is not there me just copy that if it is there we can say user is logged in and we will just show the customer name dot what is it name property so let's save and check if it works or not lock object does not exist I think it is not saved let's save and check it once again okay so you can see currently we are able to see the login user because in the local storage we have the data let's try to remove it wait and let's try to reload now we should see the okay we are not seeing anything code might be breaking yes I thought so so here we need to add or let's initialize that with empty object now it will be taken care so now you can see we don't have error and you can see login an object let's click on login um what was our mobile number let's try it again this was our mobile number and 1122 33 is our password let's click on sign in user login success let's close it and here you can see okay so we need to reload yeah and that same code this same code we can put it or we just need data on here so this line will go over here and result data so that we don't need to refresh just like this the data we have to store in here also register so our login and the registration part is done now we can do the add to card process because in add to card process let me show you the at to cart API so in at to cart API we need to send the customer ID that's why login was important right now once I click on over here we need to call this API so this add to C button right so let's let me just get the API first execute right so this is my API let's copy now in product service we need to create a function or right to cart cart post AP only right so this is the API it will go over here object we are going to need in parameter right so at to card function is ready now in our product component product component we have that at to card function um icon right so this is our icon so here on this button we can write click event add to cut and we need to send the object that is product or product ID only product ID we are going to need so product dot let's see the field properly product ID this is the field we are going to get so product ID let's create this function now when we are calling this function from from the front end we are going to get the ID so product ID colon number right so from here we need to make the API call so post API call we are going to need so this is the code let me just copy over here so this will be add to card now so for add to card component add to card function we need to send the object so let's copy the object this is the object so let's copy it we can create either globally or on the function also so there is no need to create this function globally obj equal to this why I will tell you because we are not going to use these properties anywhere right so this product ID we have to bind it over here right right and logged in customer we can pick it just like this we need to create it over here also and this variable login object we are going to need so in every component we are going to need the logged in data right so for that this code will be there so logged in customer ID we will have in the login object so customer ID we need to send this dot cust ID right so we have got customer ID product ID card ID will be zero because this is primary key quantities is by default one we will pass added date new date current date we are passing and this object we have to pass over here so this is our add to card function read card product added start right right we don't need this data let's remove this so let's click on Save and check inspect Network right let's try to add synthesizer headphone on click of add to card yes so product added to card if you can see the object the payload you can see cart ID zero customer ID 38 that we have received from the local storage product ID what on what we have clicked so 49 might be the product ID and quantity one now let's check the cart by 38 ID so let's say whatever the uh what number of items I have added in my card so we have one API that is get card products by customer ID so our customer ID is 38 so let's try to pass it over here execute so you can see only one product we had that is synthetizer with product ID now this data we have to show over here so you can see on the website in any e-commerce portal at the top we get to see a card right so here also we need to make that API call so for now this whatever the API I have shown you this API call we have to call on the app component so again in the service we can write one API call get add to card data by customer this will be get API call so let's copy this let's paste it over here let's get the API call so you can see this is the API call we just need to send the customer ID and we will need one parameter that is ID colon number and this ID we will pass it over here instead of this 38 concate ID right now this function I have to call in the app component once I have the customer ID so I can know in the Constructor if I get the data from the local storage I can make that a call right so first normal function call I will create get cut data this y square bracket is there this do product service dot get add to card data by customer and I need to pass ID colon number ID I will get it do subscribe backet R backet result colon any right now this function I have to call once I get the customer ID like this and I need to pass the customer ID ID so this dot cust ID right so you can see on the page load we are trying to read the data from the local storage if we get the data from the local storage means user is logged in right then we are calling this data and this same API call we have to call once we login also right so this in login also we need to call this on the registration part we don't know because first time it is registering so there will there won't be any data in the card so there is no there is no benefit of calling that API on the register function right so we need one more variable C items any square bracket equal to Mt right so this cart item data we will store it over this do cart item is equal to rs. data right so now this thing we need to make it dynamic so in the nowar only this is the LI responsible to show that at to card item this let me remove this star ng4 let card item of cart item and let's see what things we have so first is image only so let's just bind that so item dot so let's check the property yeah so product image URL only that we have to bind it over here then we need to show the product name so item dot let's see if we are getting the product name or the short name okay so product name we are getting so you can see now this is the mistake this is my mistake I should have sent short name over here but let it be right now let's try to splice it slice colon 0 to let's say five character we can show product name and the price we have to show item dot product price we are getting or not yes we are getting so next time I deploy the API I will send the product short name also in this API so that you just have to show the short name so let's see if we are going to get the prop proper data no we are not going getting so let's check what is wrong from the page load okay undefined is going why it is going undefined let's try to check okay so customer I was small it was it was Capital that's why and same thing over here also I should be Capital that's why I always try to copy paste the proper property name so you can see now ID is going and we are getting the response only one item was there let's check this you can see it is there let's try to add one more product let's try to add the Lenovo product added but if I click on okay and now product added but if you see here you can still see the old data but if I now refresh you can see the updated right so user should not refresh now whenever we add to card immediately we should make this API call and we need to show the data so to make it happen we need to make it of the subject because this is a product page and this is an app component so how does it know so using subject we can do that so product service let's create a subject let's say cart updated colon we create subject subject is equal to new subject say Boolean only [Music] okay so we have created one subject now what we need to do once we do the add to card process that is from product component right so once we do the at to card process we need to emit the particular subject C updated m is not coming sorry sorry product service Dot card updated this is our subject. next and we need to send the True Value right so whenever we are adding whenever we do add to card we are emitting this subject now we need to just subscribe this in our app component so in Constructor we can put our code and we can subscribe to this boan data we are going to get it now if result is there means true we need to call this API again so it will get the updated data so now let's save and check so currently we just had two item let's try to add this digital SLR at to cart okay yes so now you can see whenever you do add to card in the header also you get to see the updated item now here you can see the cross item so if I have added and and I need to remove it right so on this click icon we need to again integrate one more API call so that is delete product from card this is again G API it should have been ped but G let's check the API copy this I'm not sure like GP is working or not but let's check in the product service again we need to create a function let's check if it is properly removing or not first get product ID bar we need to send the cart ID so let's say 1353 I'm [Music] sending SEC okay so it is working nice so we need to write the API call remove product from card function right we need that is a gate AP right so just this will work now parameter also we are going to need right ID that this is nothing but cart cart ID primary key right then let's copy the API call up to this we are going to need c ID we will send to us so delete I API call I have copy pasted now we need to call this particular service function from our app component because this cart whatever we have seen this is an app component right sorry this this is an app component so let's see where we have that cross icon okay so here you can see we have that close cross icon button so here let's write click event remove item and I need to send cart ID so item dot let's check the property name cart ID I need to send let's create this function now in app component right let's copy paste now this will be remove product from cart and from HTML we are sending cart ID so this we can catch it over here adding the data type and this card ID we will send to this particular function right item remove we don't need all this and again once we remove the item we need to call our function that is this to update the card right so here we need to call so you can see on the remove card we have sent the cart ID once it is successfully removed we have again call the API to get the updated card so let's click on Save and check so from API we have removed one item so now we will have two right so let's try to remove the mic now let's click on close right so item removed you can see and here only one item is there right if we close this is also removed but currently you can see we should see like no uh added product or something like that right so let's just handle that also so this was the Ali which was responsible to show the products added but just like this we can use NG container because we cannot add NG NG or an NG in the same on the same element so just to add an NG NG if do length not equal to Z if it is not equal to Z we will show this to Li but if it is equal to Z means we don't have any element in the card then we need to show what do we say just uh line also no l only let me remove this H4 no or cart empty simply that is also enough C is empty text tyon Center let's save and check if we should see this because currently we don't have any data in the card still not able to see what is wrong part items. length let's try to print this zero only now so if it okay more not equal to not equal to was there right so C is empty is visible over here instead of H4 it will should be H6 so you can see we had two NG NG container so first is for not empty if it is not empty we are showing that cart item if it is empty we are showing just an S6 with message like it is cart is empty right let's try to add this real me mobile product carded added to card and here you can see our whole thing is visible now we need to show the subtotal subtotal is like where do we get the subtotal in the card item or let's skip that because it is just for uh you can just calculate it now next part is the checkout page once we click on the checkout page we need to redirect it to the checkout page so where do we have the checkout page in here so router link slash let's see the route name of our particular page let is check out right so let's save and check right so you can see we are successfully navigating to the checkout page now this is the UI for the checkout HTML so let me just copy section the only section we are going to need now this will go into our HTML right so now on the checkout page also again same thing we are going to need we need to call our gate card page because here we need to show whatever the item we have added to the card right something is missing I think one ex closing D is missing let's save UI is getting rendered yes so you can see same UI is getting rendered now so on this page load also we need to call our get product uh get card item API so that we can show the added product into the card over here so in TS again on in it we need to add Implement let's Implement that first let's create the Constructor in Constructor we have to call our product service product service then NG on it we are going to need right then we have we need a function so let's that function was already there so let's copy paste that get card data this was a function so here we need to call it right now to call this API again we are going to need that uh local storage data so same thing this will go over there in the Constructor these two properties also we are going to need right so on the instead of page load we are calling that AP call from the Constructor itself because call Constructor we are reading the customer ID so if it is there we are going to get that right so let's just make that thing dynamic in the HTML so row call it is the left side and this was the right side let's see what is okay this is the section which is getting repeated so now here we need to add ng4 let item of item cards let just bind that thing property binding item dot hope you are getting the whole flow right product image URL then we need to show the item because same thing in now also we have did the same thing here also we are doing the same thing product name slice pipe we can add 0 2 5 let's make it 10 10 character we can show in app component also we can show the 10 characters okay here also 10 was only there there and the price also we need to show in the check out that's it and quantity by default it is one only so let's skip that right so only currently we had one product so let's just add one more let's add TV let's add Apple Also let's go to the checkout page right so only three products we can see right now we have a place holder API that is the final one current we don't we cannot integrate the actual payment Gateway and everything you can just uh try any payment gway for if you need to implement that but before Place once you click on the place holder that payment popup will become once payment popup gives a call back success then you can make your placeholder API but we are skipping that so we can directly use our placeholder API so this is the API so if you can see for this we need some uh this is an object so let's create this object first the checkout. component.ts checkout obj colon any equal to object we have got let's remove string right now these things we have to bind to our form payment narration a single property if you have integrated the payment Gateway whatever the payment ID you get you can pass it over here so that you will have a track like for this particular this was the payment detail and everything right customer ID obviously you need to send sale ID will be zero sale date you can send the current date so that will be new date total invoice amount you can pass it just calculate the total and pass it right so let's bind this to our text box in the First Column we have the text box NG model City so this is just a basic API because in actual API Fields will be so much right but this is just for the basic understanding that's why I have kept it to minimum only pin code you will have name everything will be there address line one address line two and we have a landmark again this property will bind over here right so we have binded all the things then a place order place order button is there on here we need to write click event place order let's create this function now right so in service also again we need to create that APA call so that is going to be post APS so let's copy past place order let's check the API execute this will be my API now from the checkout component this API call we have to call let's check the let's copy the code of post we check out Place holder component Place holder and we need to send our object that is checkout object but before that we need to do some corrections so you can see these fields we are going to get from the but customer ID we need right total invoice amount also we need discount again you can add a text box and add it but currently I'm skipping this so customer ID we need that we can pass it over here before making the API call so this dot checkout object do customer ID so in login object right so here in the login object we had the customer ID that we can use it over here do cust ID D I will be capital D will be small right and once we do the place order col now then again we need to call our API to get the updated card because once we place the order card should be emptied I'm not sure if it is working but let's try that so again this thing we need to call subject we need to emit so that again the latest API call will be done order has been success placed BL right so let's test the last step So currently we had three product in our card let's just provide City just add some Demon data let's check the network call right let's check the orders before using it so this is the API where you can see all the items okay currently we have so many ERS are there oh my God so this is uh what do we say S ID one let's check the latest sale ID that is 363 is the latest sale ID so once we place this order I think we should get one more order place order order has been success successfully placed is there and if we check the cart item now after successfully place order we have done this okay so this is not getting removed so I need to remove this still you can see even if you refresh not still that cart item is there so I will do this once the order is placed for this particular customer I will empty this cart item right that's how it that's how normally e-commerce application will work so 363 was the latest let's try to execute one more time okay so many records are there that's why it is taking so much time yeah so 364 whatever the items we have added you can see so this is the API that you need to integrate on the admin portal like uh the admin portal of or Amazon or any vendor right so this is how we have completed our e-commerce application Whole flow right this is just a website part admin part will be like creating uh product and everything and seeing all the orders it get right so hope you have got the basic idea like how do we write how do we create an e-commerce appliation again this is very basic but this flow will be there in all the e-commerce application just product will be in something else so many fields will be there again if I click here this particular uh product will open in a new page right then product will have multiple images so many things will be there but the basic concept will be this only right so hope you are finding my videos helpful please do like and subscribe and share my videos that's it with this current video please stay tuned

Channel: LEARNING PARTNER

Views: 22,622

Keywords: ecommerce app in angular, angular ecommerce app, ecommerce app, ecommerce application in angular, angular ecommerce application, ecommerce app from scratch angular, ecommerce website, Shopping Cart in Angular, ecommerce in angular, Add to Cart in Angular, Angular Ecommerce Project, ecommerce app with api angular, angular project, angular ecommerce project, angular ecommerce website, E-commerce app From Scratch Using Angular, Angular Complete Project Tutorial, angular 17

Id: pWx-Ot0ydLg

Length: 73min 23sec (4403 seconds)

Published: Wed Oct 04 2023