Ionic Gift Shop App - Episode 2 - Item Detail Screen | Angular | Capacitor

Hello friends welcome to the second episode of our gift shop application so in this video we are going to design our item single screen page where we will have the option to add the items to the bag or the card so you can see the design which is flashing on the screen what we are exactly going to build so without wasting any time let's get started with today's video first of all if you haven't seen the first part of it you can just check the link in the description and check the first part how it is being done so that you can be in the same phase with the second part now in the second part what we are going to do is we are going to move ahead with this particular design here and for doing so we need to create a page at first which I'm going to do it in this particular way ionic G I'll create a page within my homepage slash item detail so it will be created within our homepage folder all right within this particular home folder it will be created so that it maintains the hierarchy how we are exactly presenting it if I hit enter it will be created there you go within the homepage it is created great and let's check out the routing now so in the routing app. route. TS well you will see a different style of routing in the app. routing app routing module. TS file for this standel loone one but you don't need to worry this is how it is shown here but I'm going to change this why because from the homepage itself this should be the children of the homepage since in a stack how we maintain it first the homepage then within that we will have the item page you cannot redirect to the item page directly without passing the homepage so in order to do that we will have to define a children here so children and it's almost similar in your NG modules also I think in the NG modules you will have it in your home routing module. TS file directly so you don't need to play around with that you just need to change the name of it like here the name will be gifts SL colon ID so this particular part will help you to get the ID which we are going to pass okay that is how we Define it to pass any ID or any other kind of a stuff here now I'll simply cut it again I'm telling you this is not required in the NG modules one it will be done automatically the way you are placing the higher key you can simply check it in the home routing module. TS file again I'm seeing that I'll simply paste it here okay and this is not it I need to do one more thing so the default route that I'm going to pass here is let me pass the part to be an empty string that will be the default route and it will open up this particular comp component by default so let me just move it here fine that is how we need to do it for the homepage because I'm not defining a different routing file here for the homepage that is why we can do it in this particular manner I need to pass a comma here and the error is gone so in the homepage this is the Hier key we are maintaining and I think we are good to go now let me get back to the homepage and in the homepage HTML 1 what am I going to do I need to use router link here for this column one or the card one so in the iron card I'm going to pass the router Link in this particular Way Slash home gifts then the item question mark. ID if you're new to iic then you should understand that this is an array because we have multiple layers like slash is there then home is the first route within that we have the gifts one and then finally the dynamic part that is item question mark. ID question mark is given because if the thing doesn't exist still it won't give you some error okay it will try to redirect if you don't have the ID or anything else still now in order to solve this error this error will only happen in Stalone one not in the NG modules one because we don't have any common module or sorry the routing module here defined by default so we need to do something we need to pass router link here directly and import it once that is imported you can just check it here right the error is gone you can check it right now if I click on any item just check it out it is getting redirected and just check the URL here let me enlarge it one if I get back and click on anything else just check it out three so all the IDS are coming up properly right now we need to fetch this particular ID and get the details of this particular item one by one means whichever you're opening it up we will get the details we will Design it up and finally we will add that to the card one so we need to do a lot of things here let's do it one by one so I'm going to at first design it up so let's get to our item detail page and design it up by removing I think I will remove everything at first I'll keep the iron content okay of type full screen to be true because within that only I'm going to Simply pass all the stuff and to see the design how it will work I'll get inside one of the items so that you can see what exactly we are trying to implement here okay now here what am I going to do I'll have an iron header within this iron content and then an iron toolbar all right along with that I will have some buttons so back button will be there this is the back button where the default hre is slome so by default it will get redirect it to home say like if you're refreshing it here and we see the back button then it will redirect back to home now the color here is given of light color let me change it to dark so that you can just check it out if something is showing up or not so this is our back button let's see if I have refreshed it by default it will go to home screen okay even if there is if you're redirecting from somewhere else also and you refresh the page it will still go to the home screen one that's what it means the default hre now I have given the design of of MD that means material design for the Android one this back button shows up in this particular way for iOS it is little different you will have the text and something but I don't want to show that up because we are going to design in different way all right that is why I've done that now this Heather part I'll fix the slot so slot is fixed here and I don't want any border so class ion no border will be called here to remove any border that is available fine once that is done it is fixed and nothing else I need to do here so at first we will get the item details for which I go to the TS file of this item detail one and we'll work with that so in the NG on I'm going to pass a function called gate item which I'm just going to Define it here gate item in which I will get the ID at first now to get the ID we are going to use activated route in which uh let's first inject that then you will understand otherwise it's going to be difficult for you so private route again you I'm not injecting it in Constructor I'm just using the inject function where I'll pass activated route this is the one imported from at angular SL router now this is beneficial for getting this kind of an ID because it has snapshot. param app.get and this is how we get the ID all right there are few more other options by which you can get that and you can subscribe that if there is any change in the ID you will be able to see that but we are not going to implement data because whenever someone changes the URL they have to press enter and at that point of time the page will get reloaded up okay that is why I'm not doing that now after this is done we are going to check if this ID is available or not for which this will be my condition I'll first check in the console log then I will check if it is available and not equal to equal to zero because it is a string that we are going to pass that is why if it is so if it is not available or zero then we are going to Simply navigate it to the back that means to the earlier page and for doing so nav control is coming from private nav Ctrl will be equals to inject again I have to inject it and I'll call the NV controller here we need to import it NV controller well it's not showing up so let's copy it I'm going to import it import Naf controller from ion icons not ion ions sorry at ionic SL angular SL Stalone now there is a slight problem here you want to know what basically when you create a new page in the ston also you get ionic modules common modules and forms module I'll simply remove it because if you have this uh modules already available then this the routing won't work properly mostly that is a problem that is faced you need to have everything from this 10one one perspective that is why we need to call everything from this 10one one Whatever we need now we'll get some errors in our HTML page for which I need to import it by hovering on that one by one that's how it works okay so once I have hovered on that you can see all the Imports are done automatically and we are good to go ahead now there won't be any problem with this all right so no problem so far with our code everything is fine if you want to check the logs here let me just show you just check it out id1 is coming up so this is working for us now we have got the item here we need to get the details of the item right item id actually we have got the ID now let's get the item now to get the item I need to do certain things let me have a property called ID which will be of type string and it won't be empty that is why exclamation symbol is being given I need to to import one more or inject actually one more service called API service inject API service this is how we do it I hope you're getting familiar with all the things now I'll simply initialize my ID to this particular ID uh property that we have created and there will be an item also which I need to have it here so item of type any will be defined in which will hold the item data from our items uh array in the API service we are going to find that record where ID matches with the ID that we are getting it from here so in this particular way we will be able to fetch our single item and I'll log the value of it so that you can check it out what exactly we are getting right let's check the console log here just check it out this is the stuff which we are getting and it this proper that we need once we get the stuff we can start working with the designing part now we are going to start off in the HTML part with the image so the cover image of the item we are going to have it in a div and we are going to overlap on top of the Heather part so Heather part it is it is going to be transparent and we are just going to have the buttons only there that is why it is being used in such a way within the iron content I'm not passing it outside of the iron content that's the reason so I'll Define a div here in this particular way way let me over on it now in this div I'm passing background image style. background image that is how we can do that you can use NG style also if you want to where our URL will be the one this is how the URL and the function within the URL function only you have to pass it that is how we work with background image so I'm just passing the covered image here and a class also BG with which I'm going to work in the CSS file of it then I I'm just passing rating here because we need to pass the rating part also let's keep that for the Tim being I don't want you to confuse about it so let me skip it I'll just explain you one by one now let's go to our CSS file CSS file actually in which I need to make the background of the iron Heather at first to be transparent so that we can see the image properly and also this buttons which I have it here I'll just pass some background of to it so that it will be circular and it looks nice so let's achieve that with this particular designing I'm making the toolbar and the iron header to be transparent background and a color base also of transparent then in the iron buttons that we have here whatever iron buttons If I'm using two three whatever iron buttons I'm using they will have a certain background with a border radius of 50% and here rgba color I'm using because we can pass the opacity here with the colors so this is a dark color and an opacity of Z 0.15 is being given now to the iron button here which I'll be using it later or not now because this is part of the iron button so I don't need to do anything here because I'll be using another button here for which I'll be needing some margin and everything which we are going to work with later on and after this is done it's time to work with the div with the class of VG that we have defined for our image within which I will have the width to be 100% a height I have defined to 30 RM then a border radius to the top left and top right nothing zero and top bottom left and bottom right to be 30 or sorry 20 pixels okay that is why it is curved right and this one is straight means it is not like having any problem with that because this is like touching the corners we need that kind of a design that is why I've achieved that now the background size is covered that is why it is taking the full size if I don't pass it just check it out what happen happens look at it not looking nice right so we need this then the position is centered up and the repeat is no repeat if we don't pass it also there will be lot of images that is going to repeat itself which we don't need okay so in this case it is not happening but in some cases you might feel the problem that is why to do it in a certain way is must and a background color of light I have given to it so that if you have any other color in this particular day this one is also of light color which you can change or you can simply remove that also because it won't impact anything as of now but I prefer to do that and in the HTML one now I can simply pass a light color which will look nice just check it out look at it it's looking lovely right and we have a background looking smooth and transparent also like the way we have done in our CSS part after this is done I will have the rating part here okay which will have a white background and it will look nice so how we can achieve that we will achieve it with the help of this particular div here within this div I'm just passing a class of reading and aligning everything to the center of the div so the iron icon which I have here and the reading which will be a text will be centered up so the iron icon I'm again using the star icon and the color will be of warning then whatever rating is being passed I'll get it here now it is showing up in this particular way at the top because I've centered it so it is placed at the top part it appears here in a certain design part so let's get that going I'll go to scss and here I'll make the position of this particular D of absolute and provide a background color of white color that is how it looks like in this particular way let's me comment this I'll do it one by one so background color is provided now we need to specify the width so I've given width of 20% that's going to be enough to hold the size it it requires because it's not too big right and I'll give some border radius of 20 pixels so that it looks nice rounded shape which will be good to see and some padding otherwise it's too clumsy at the top and bottom which I don't like at all now at the top let me pass zero because if I give bottom to be zero it will come down at the bottom part which is not great so right also to be zero so it will come towards the right side here and then margin top how much I need sorry not margin top margin uh left and right I need 10 pixel is enough so left margin and right margin we have given now margin top like I have lined in such a way that it appears almost at the bottom part because we have 30 RM for the div that is how I have aligned it to 27 RM so three RM differ is there between the end of this two divs okay all right so our reading is also set up properly so it's time to design the other stuff for which I'll go to HTML again and I'll work with after this Dave an iron item where lines will be none I'll have an iron label here now within this iron label I will pass the item name and the description so description is being passed in a P tag because it will have some spacing at the top because at the top we will have the name and in the name also everything will be of upper case now instead alone you are getting an error because you need to import it but in NG modules I don't think you will get an error because it is already available in the common module itself here in the Stalone one what am I going to do in the Imports one let me import it here uppercase pipe that's the pipe I need it will be imported from at angular common and we are good to go so the error is gone we have the description just check it out the description is showing up the item name is showing up what else do we need we need the pricing and all of the stuff for which I will have another P let's define it within the P tag I will pass an iron text where color will be medium and it will show MRP and another iron text for the prizing one within which I'll pass the the price within a span one because I need to make it bold and everything that is why I'm passing it in Span before that we need to pass the currency that is why I don't want to change the currency now for the currency symbol I'll get it from the homepage I think we have already defined it there this is the one and let's copy and paste it here in this particular Manner and we good to go so this data is coming up right now we need to design it in such a way that it looks nice let's get going with the item detailed CSS file and start working with the designing part here so first of all I'll give some margin top to this iron item let's get outside of it and I'll do it in such a way I've given 1.5 RM margin top to our iron item then I'll work with the iron label here so for the iron label I'll pass a font size of 1.1 RM and a font weight of bold so this is looking bold and better then we are going to work with the description one so pag description margin top of 10 pixels and a font weight of 500 is fine because I don't want it to be bold but it should look proper and I pass it as important because in the next St for the pricing one I'm going to pass a margin top of 15 pixels so it will overlap the one that I have defined earlier one that is why this important tag is given so that it still works even if I pass 15 pixels okay I hope you understand that now finally we have already defined a class called price to our pricing one now we need to work with that so in the P tag I'm going to work with this prize one where I'll pass margin left of five pixels and a font weight of normal to the span which we have used for our pricing I'm passing a font weight of 1 RM and a font weight of sorry font weight of bold and font size of 1M so it is looking bigger than the symbol here all right so far everything is looking nice let's move ahead so what's the next step we need we need to follow actually is to work with the iron footer part so let's get to the bottom I'll have an iron footer here and within which I will have the iron toolbar which will have certain properties So within this button I will have certain properties which will be size of it to be large and expand to block so that it can take the full block size and the text within that will be bold that's what strong to be true means and the mode of iOS I want to keep the same mode for the Android one also that is why I fix the mode to be of iOS one now within this iron button I'll pass an iron text here called add to bag let's check it out out great it's working and before that I think I need to pass an iron icon also that's going to look nice so icon will appear to the start position of the text one so I'm going to pass slot to be start so it will appear on the left side if you're working with left to right R LTR uh Direction okay and the name is going to be bag handle outline but it will not work directly we have to go to app. component.ts file for this Standalone project don't need to do anything for the NG modules once again I'm telling you bag handle outline okay we will be needing bag handle also because I'm going to use that all right so I've just defined it earlier on only okay this is the one that is showing up so the design part is almost the end part okay uh what else do we need when I click on this button I need to do certain things let's check check it out what exactly that's going to be so in the HTML I think I need to go to the HTML part of this I detail one within this I'm going to pass some conditional stuff like when you're clicking on the add to bag that should change the text for certain seconds like 1 second or so that add it to bag and the icon will change instead of showing any other animation I'll show that part so for doing that I will will have the color this will be a property that I'm just going to Define if it is true then success will be the color that means the greenish color will show that it is added to bag otherwise it will show the primary color and on click of it and a function will be called called add item fine and even the text also I should change it let's me Define it I'll change the icon and the text in this particular way so it is all based on the this property condition if it is true then something else will show up otherwise it will show the normal ones hope it's clear to you let's move ahead and work with this in our TS file at first where I'm going to Define this particular property let me do it here bag add to bag of type any it's not empty that's what it shows as it will just hold a string okay now in this string what exactly it's going to hold let me just show you this function called addit text within which this do add to bag will be equals to added to bag and after a set time out of one second me after 1 seconds again it will get back to normal by initializing once again add to bag will be null okay that's how it's going to work and this function I'm going to call within add item function which will occur or which will be called on click of add to bag button so add text edit text text function is called let's check it out if I click here just check it out it is changed for a second and it's gone so this is working great now we need to work with the actual functionality of cod but I think the ion size here or we can play around with the styling part little bit here for which I'll go to the CSS file here and what am I going to do is at the bottom for the iron footer this will be my designing for the text part so I'm just making the text to be little I would say smaller and icon size also I'm fixing it to 1.5 RM and a margin right of 10 pixel a little bit more spacing here so so that it looks good right so you can just skip that if you don't want to apply this functionalities or design otherwise I think it will be better if you try this out okay this is done the designing part is almost done now it's time to work with the card services for which I need to create the card service as we are going to do everything there the addition part and everything ionic G service within the services folder I'll call it card folder and within that the card service will be created okay fine I made a mistake here actually there won't be any slash i g service there won't be any SL it will be space now it's going to work it will create our service here this is the one where we can simply work with the card functionality so now the card service is defined here and I'm going to use an observable called card which will be equals to behavior subject all right in this particular way and I'm using a gator for it which will return the observable of this particular card so that we can subscribe to it whenever we need and check the value whenever it gets changed okay now here I need a function called add quantity where I'm going to get the item let's be of type any so this function I'm going to call when I'm going for it to cut in this particular page so let me call it here well that's how it's going to be let me make it a sync as I'm going to make it uh try catch I'm going to use it and I'm going to make that a sync uh it will return a promise in the card service that is why it is being done in that particular way for the timing if you don't want you can simply remove it also later I'll show you why it is being used now the card service I need to inject it here let's do that quickly so private card service equals to inject and the card service here all right this turn great so whenever I click on it I need to G the count of total items so that I can show and I can here for the bag handle one that is basically for the cart one how many items are there in the cart and it will get updated here in the badge one okay so let's design that up at first then it it is going to be better to work with the card functionality right okay let's do that in the HTML one what am I going to do I'm going to Define that at the top part right after this I buttons let's do it here so I'm going to have another iron buttons where slot to be end with within which I'll have an iron button here where the properties will be filled to be clear because I don't want to show the background of the button just the icon is enough then size of large and the color is of light color so that the icon will also have the light color one now finally I'm going to show the icon here which is going to be bag handle which we have already declared in our app. component.ts file all right and I'm passing slot to be icon only if we pass this slot to be icon only it it shows that we are not passing any text to this particular button and it will enlarge little bit the icon size okay that is what it is being done here now it is not proper we are going to work with that in the designing part means in the CSS part but at first let's complete it fully so I will be needing a badge also after this iron icon for which what I will do is I'll go to TS file and Define another property called called total items which will be initialized to zero value that is going to be number and I'm going to track down here if this particular number is available that means it is greater than zero let's do that greater than zero then only I'm going to show the badge this is how we show a badge here and you not able to see anything as of now let me pass one here then you will be able to see if I pass one you will be able to see some badge right is showing up but not proper we need to design it in such a way that it shows in a proper way how that can be done that's a question well we will do all this stuff in our scss part let's move to our scss to design it up now first of all what I'll do is at the top let me use this particular margin here so that it gives little bit more margin to the uh top bottom left and right right okay it is fixed now wherever I need more I've given more wherever I need less I've given less then after that I need to work with this iron badge here to which I'll give position to be absolute top and right to be zero border areas of 50 pixels 50% actually and a height and withd I fix it to one RM so that it doesn't look too big as it was earlier and finally some margin is being given let me just show you in another way let's comment it show you one by one okay if I don't pass this just check it out how it looks like so passing it 50% will be a better option then height and width of 1 RM I have paused in a margin well I need to move it towards the right side so I need to give a negative margin top right this is the right one towards the right side in the minus one it will move then only it's going to work properly okay then display of flex X is being given so that I can align all of it to be at the center vertically and horizontally to be centered that is why this one is coming at the center otherwise it was not working earlier if I just remove these things you will see that it is not centered up properly just check this out that is why you need to apply this CSS and finally the iron text that you have within this I'm just going to change the font size to 0.6 RM so that it looks a little smaller and it matches the design part after after doing that our stuff is ready and we need to implement the same iron badge in our homepage also so I'm going to just cut it from here because I need to remove any kind of a redundancy and that is why I'm going to Define it in global. scss which will which can be implemented for all the stuff that I'll be using okay you can pass a certain class also if you're using more badges where you don't need this kind of a design but I'm just passing it up everywhere okay since I won't be using in such places where I don't need this kind of a design now let's get back to the homepage with the same thing only I'm going to design the same stuff here also let's get back and see in this particular place I'm going to design this up so after this iron title I will pass it here iron buttons okay slot of end and within that same iron button here feel clear and a router link is being provided to redirect to the card screen which we don't have as of now but I have still passed it so that we can understand we need to work with that if you click it click on it right now it's going to give you the error so I think I should uh cut and paste it here in a commented manner so that we can use it later on otherwise you might face some error then I'm passing the icon and finally the same badge part which we have done earlier is being passed now we don't have any total items here that is why it is giving us the error in the homepage one what I'll do in the TS file I need to work with that so so let me Define here total items to be zero okay and I'm going to subscribe to the observable for the card one to get the actual value for doing that I will call Private card service equals to inject card service all right that's what I'll be doing now once that is done what I'll do here is after this gate I items I'm going to subscribe to the value of the card and once I get the value I'm going to get the total number of items within that and pass it here currently we don't have anything of such kind okay total item or anything so it won't work but when we get that we are going to definitely fetch the data from there if you're confused you can comment this up and check it later on for the timing let me just show you this part later on when we work with the card service in the next episode which we are going to do but for the time being uh if I just pass one here let's see what happens if I pass one it's going to show up here properly so design is proper here I didn't don't need to do anything okay let's skip it in this particular way and I think we are good to go right so let's get back to our item HTML file where all right TS file I'll make it to zero once again designing power is ready let's get to our item screen and once we click on the gate sorry add quantity what happens then we need to work with that part so in this video I'm just going to show you how the count can be incremented but the actual part I'm going to cover up in the next episode here so in order to do that what I'll do here is this Dot card service okay card do value I'll get the value here within a constant called d so this observable will be used to hold the value now here what am I going to do is let me create a constant here called total item which will be equals to a bracket data question mark. total item if it is available then it will show up otherwise it will be zero then I'm going to add one to it all right so I'm just keeping all the options in one if it is available in the card it's going to be get increment mented otherwise zero will be added to one that means it's one finally the data that I get here I'm going to pass it to the card once again this doore card dot next that's how we update this value within which I'm simply going to pass total item in this particular way fine so the cart will be updated and the updated value will be passed to the ones that are subscribed to it so let me subscribe it to the item detail page and in the homepage also within the homepage we have already subscribed to it let me just uncomment it and for this card sub let me pass it here card sub will be equals to subscription not equals to actually it's colon so let me just pass it colon here and it will be mean it will not be empty of course that is why exclamation symbol is required now we also need one more thing imp Ms well on Destroy is required for the NG on Destroy function and in fact if you feel like you can pass on in it also but that's not required I think still we can simply pass it if you want to okay so once that is done I'll simply check here one thing that if card sub is available then let's unsubscribe that otherwise there will be Memory leaks if if you don't do that up which is very very important to work with and I'm going to cut it paste it at the very end so that it follows the proper pattern that the NG destroy Works how NG destroy works it will be called at the very end so this is the Hier key which I'm maintaining here I hope you understand that same thing we are going to implement in the item page also item detail page let's do that in the item detail page what am I going to do here is I'm going to go to the NG onate and paste this once again let's have the card sub here also card sub exclamation column subscription all right and we need NG on it we already have we need the on distroy also imported from just check this out at angular /c and then we will simply call our NG on destroy the same which we did in our homepage so I can simply copy it from there let's copy it and paste it at the bottom part here in the item detail page I hope it's pretty easy for you to understand all right so the subscription part is done in all the places now wherever we make a change it will get impacted everywhere since we are subscribed in all the pages wherever we are now I'll get back since uh it will get reloaded and we won't be able to see the changes in our homepage if we don't do that up so I'm going to start off with the homepage itself go to a single screen single item page and click on add to card you can see one is showing up if I click again two will show up if I get back here also two is showing up so this is how it is changed in one place and you can see it everywhere fine so I hope you have understood this particular part we have designed a lot of things here and I hope you are grabbing all the stuff and you're liking it so with this I'm going to wrap up this video for the day if you like this video make sure to hit the like button do subscribe to the channel and do watch out the first part if you haven't checked it out just popups are coming up click on that and you will get redirected to the first part also if you haven't seen my courses and templates that are available check out the links in the description lots of content is available there just check this out okay with that being said I will see you in the next episode of this particular series till then stay safe stay healthy and keep watching coding techniques see you in the next [Music] one

Channel: Coding Technyks

Views: 1,684

Keywords: android app, Android, IOS, gift shop, shop, cart screen, ui series, angular course, ionic full course, beautiful ui screen, learn to make android app, beautiful cart screen, beautiful coupon screen, coding from beginners to advanced, nodejs full course, learn to make ios app, learn frontend development, learn backend develpoment

Id: u5aEOCsTxLo

Length: 40min 12sec (2412 seconds)

Published: Tue Apr 02 2024