18. How to Show Images to User? (Image Bytes to File)

hello guys welcome to the next session of developing e-commerce application from scratch using angular and spring boot in the last session we discussed on how we can create these a show product detail component and how we can show all the product details that we have with the help of this angular material table but if you see in the last session we just like we just shown uh this text information like product name description discounted price and actual price but alongside we have the product images as well so in this session we are going to see how we can show all the product images to the admin so what basically we are going to do is we are just going to add one button over here let's suppose that will be something like show images button and when someone will click on the button we are going to show one a dialog or we can say that pop-up to the admin and then with the help of that pop-up we are going to show all the images so uh for this i'm just going to use angular material dialog so if you see like when we click on any open dialog button we are getting the pop-up so on this pop-up we can show any information in our case i'm just going to show the images so without wasting much more time let me just take you to the visual studio code and let me just show you how we can implement this functionality so the very first thing that we have to do is we have to add one more column over here and we have to add one more icon over here so let me just do that thing so let me just go to the vs code and over here let me just go to the show product detail component ts that we have previously created and then over here on line number 14 we have one array of displayed columns so we have to add one more column over here so i'm just going to add this particular column after the actual price so i'm just going to add let's suppose images as a column and rest will be the same now now we have to do similar thing in the html file as well so let me just go to the html file and then over here we have this actual price a column so we have to add one more container for the images as well so let me just copy the same container code and let me just paste it after the products actual price and make sure you are just keeping the sequence in mind because sequence matters a lot and then let me just give the heading as images and then let me just give the column definition as images and let me just go to the ts because column definition should match uh the name that we have used over here so over here we have used images exactly same name that we have to use for the matte column definition as well so make sure you are not doing any uh any spelling mistakes over here and then the next thing that we have to do is we have to add one image button so for this what we can do is we can just copy this button code it is basically nothing but a icon button that we have used for edit and delete so we can just do similar thing and then let me just paste it for the images uh like this now over here we have to give the icon name so let me just write the images as icon name i'm not sure whether it is image or images let me just check and maybe we can check on the google's site as well so now if you just refresh we are getting these images um icon so now if you just want to check all the images then you can just hit the google uh fonts site and on the google font site you will get the images or icons whatever you say so we can just click on the icons and then whatever icon you want you can just search that icon in my case i just want images as icon so whatever icons which are related to the images all the icons you will get over here and then you have to just uh copy the name from this and then you can just paste it in between the code so as of now images is working perfectly fine for me so i will just keep it as it is and then the next thing that we have to do is we have to add the click event on this button so let me just come back to the google chrome so what i want basically is whenever whenever i will click on this button i just want to open a dialog and then on the dialog we can show the images so now let's see how we can use this dialog and all so now let me just come back to the vs code over here the next thing that we have to do is we have to add the click event so for this click event so we have used a click event for the uh delete uh button as well so similar click event we have to use and then for this we have to call one method so before calling any method or creating any method let me just come back to the google chrome and let me just go back to the documentation of angular material dialog so over here if you see the see into overview you will see all the information like what is the angular material dialog exactly and similarly you can just you will be able to see some of the methods which are related to the angular material dialogue so we have the open dialog method and then we have the closed dialog method as well and similarly we have few more information that is uh that is needed to use the angular material dialog so over here i am not interested in the overview i will just quickly go to the examples and then we can decide like which example we want to use so we have couple of examples over here so we have this big dialog so let me just see what is the code of it and let me just go to the ts file so over here if you see like it is pretty straightforward but i just want one dialog where i can pass the information as well because if you see like we have all the product images and uh like from our this particular show product little component we have to pass the images to the dialog so this is the functionality that we want to implement because then and only then we will be able to show those images on the dialog so that is the thing that we need so let me just try out the correct example in our case so now if you see we have one dialog which is like injecting data when opening a dialog and if you just see the code so we have this html code similarly we have the typescript code and over here if you see like whenever we are opening a dialog we are the we are passing the information as well so from uh like from our component we are passing the information to the dialog and this is the functionality that we want exactly in our uh in our code so i'm just going to use this particular example like injecting data when opening a dialog so let me just quickly show you how we can do this so for this what we have to do is we have to first of all create one component so that component will act as a model or maybe we can say that a dialog so let me just first of all create a component and let me just go back to the vs code let me just open the terminal and let me just stop the current execution and let me just use npm run ng gc and then maybe what we can say that show product images dialog show product images style of component so let me just create one more component for this and the component is created the next thing that we have to do is we have to create one function so let me just create one function which is called as open dialog or maybe we can say that which is called as a show images function so let me just create it so on my images button let me just add one click event and it will be a method like show images and as of now i'm just passing my entire element to this function so if you see this element will basically hold the information of entire row and if you just want to send the information of entire row we can just use element or else if you want to send the any specific property then we can pass it like element dot product actual price or element dot product discounted price so if you want to access any specific property we can access it with the help of dot operator otherwise uh the element will contain the uh information of entire row so we can use it as it is so as of now i'm just going to pass the entire element and now let me just save this code and this function we have to create in a ts file so let me just come back to the tsy and over here inside my ts file let me just add this function so after this delete product let me just add this function and instead of the element let me just make it as a product because obviously that row contains the product object itself so let me just use a product like this and now our function is done so let me just do one thing let me just use console.log and let me just uh console um the product details that we are receiving from that click so next thing that we have to do is we have to just save it and let me just start my application like npm runs start and let me just wait till my application starts meanwhile i'm just going to the google chrome and i'm just opening the console and then let me just see whether my application is started yes it is started and now what i can just do is i can just click on this button let's see what we get on the console so as of now i'm just not getting anything on the console let me just refresh this and now let me just click on it yes now we are getting everything on the console whenever we are clicking on these images button for example i clicked on the iphone 7 so we are getting all the uh information of the iphone 7 itself so alongside we are getting the product images as well and this is the this is these are the images that we want to show on the model so these are the images that we want to pass to the model so that's why i was looking for the example to passing the information from component to the model so this is the requirement that we have right now the next thing that we have to do is we have to open a dialog so let me just show you how we can do this as well so now to open a dialog it is very simple let me just go to the ts file over here if you see we have to just first of all uh in we have to just first of all inject this matte dialog but before injecting these the very first thing that we have to do is we have to import its module so make sure like whenever we are using any angular material uh library for the very first time then we have to uh inject or not inject but we have to import its module so we are going to use this dialog very first time in our project so that's the reason we have to import it so now let me just copy this import line which is import mat dialog module from angular slash material slash dialog and now let me just come back to the vs code and let me open app.module.ts file let me just paste this matte dialog module import line and let me just copy this library name or maybe class name whatever you say and let me just paste it inside my imports array as well like this and now let me save it and the next thing that we have to do is we have to kill the current running instance of the application because whenever we import any new uh module then make sure you are just killing the uh running instance of the application and then you start the new instance so let me just kill the terminal the next thing that we have to do is we have to write these particular lines so let me again go back to the examples and let me just go to the ts and over here now we have to do is we have to just inject public dialogue matter dialogue so we have to just inject it so let me similarly inject matte dialogue so over here inside my constructor let me just use public you can make it private but as of now let let's use public which is similar like similar to the given into the example of uh mad dialogue on official site so let's use public and then maybe we can just use uh images dialog which will be of type mat dialog like this and then next thing that we have to do is we have to just call the open method so open method basically takes two different parameters the very first parameter it takes is a component that we want to open and the next parameter it takes is the data that we want to pass so first of all let's use a component itself second parameter is optional so because data can be passed or cannot be so second parameter is optional but first parameter is a compulsory mandatory parameter so let me just come back to the vs code and over here inside my show images let me just use this dot images dialog then open and then we have to pass a component name so my component name is soap show product images dialog component like this and now let me just give the same colon now let me just save it and let me just start my application let's see whether we are able to get any dialogue or not or whatever we are getting exactly let's see how it is looking like right now so let me just wait till my application starts and then we can just verify on the google chrome now application is started let me just go back to the google chrome let me just refresh it and then let me just try to click on the images now if you see whenever whenever i'm just clicking on the images um we are getting one pop-up or maybe we can say that dialogue and it is just showing the default message that whenever we create a new component whatever angular gives us the default message it is showing that message and when we click on the outside of the dialog the dialog is getting uh disappeared so this is the exactly function this is the exact functionality that we want the next thing that we have to do is we have to show the images on these dialog and then what we have to do is we have to increase its height and width as well so we have to um like make these dialogue little big so that it will look more beautiful so let me just show you how we can do this as well so for height and width we have few parameters so let me just quickly try to take those parameters so if you just go to the overview maybe over here if you see like we have this height and width as well so over here let me just come back to the vs code and let me just give a semicolon and then let me just give a curly bracket inside the curly bracket you can just give a height so let me just give a height of let's suppose 500 pixel we have to give it in a single quotes like this and let me just give you a width of maybe let's suppose a 800 pixel i'm just giving some random values let's see how it looks and let me just save it so now yes it is looking quite good uh so as of now i'll just keep it as it is if you want you can just try uh like whatever screen size you have you can just write in that way so as of now i'm just going to keep it as it is the next thing that we have to do is we have to pass our images to this dialog but now over here we have one twist so now let me just try to open my console and let me just try to clear it and now let me just click on the images and now we are able to see all the product details on the console now if you see inside this product images what we have is we have as of now we have only one image but if you see we have some different properties of the images so we have the id which is 16 then we have the name which is image three dot jpeg and then we have the pick bytes so peak byte is nothing but a picture bytes or maybe you can say that image bytes and then we have its type as well so for the type we have images image slash jpg the main thing that we are interested in this pick byte so over here we cannot show this big byte as images directly so what we have to do is we have to first of all take these peak bytes we have to convert it into a file or blob and then with the help of blob we have to create its url and then with the help of that url we have to show all the images on the screen so this is the process that we want to follow so very first thing is we have to take this peak byte and then we have to convert it into a file or blob after converting in it into a file or blob we have to create its url and then with the help of that url we have to show all the product images on the on the like screen so for this what i'm going to do is i'm just going to create one service which is called as image processing service that image processing service will be will contain some common functions which will help me out to do this conversion so i'm the reason why i'm just going to create a service is because like this particular functionality is like showing uh product images will will be used in many different components so i want one common service which will contain the common functions so that in whichever component i may require i will just call inject that service and call those functions so that it will be very easy for me so let's up let's see how we can do this particular thing as well and now what we have to do is we have to just come back to the vs code again and we have to create a service as well so now let me just stop the application let me just use npm run ng gs and maybe let me just give the name as image processing service like this let me just wait yes service is created so now inside this particular service we have to create some functions so let me just show you how we can create those functions as well so for this i'm just going to create one public function which is something like create images so let me just use public create images like this and this create images function will take one parameter which will be of type product so let me just use product which will be of type product so over here the intention is this create a for this create images function we have to pass one product so this cream create images function will take one product and process all the images which resides into the product and it will return us the updated product object so this is the intention behind it the next thing that we have to do is first of all we have to take all the images which are present into a product object or maybe you can say that product json whatever it is so let me just use product dot product images and we have to store it into one variable let's suppose const product images like this these product images will be an array of any type so as of now i'm just keeping it as any and then what next thing that we have to do is we have to create one array so we have to create array of like file handle so the reason why i'm just using a file handle is so file handle is the interface that we have previously created and throughout the application i just want to keep it consistent so if you are not sure like when we have created a file handle so let me just show you how we have created so let me just first of all create the array like product images to file handle so file handle is basically interface that we have created it is not like inbuilt interface or something like this so let i will just show you its definition as well and let me just initialize initialize it with the empty array now let me just open this file handle so now if you see the file handle is basically uh contains one file it is actual file and it contains one url which is nothing but a url of this particular file so it is basically easy so we can just uh with when we created the url then with the help of this url we can just show images to anywhere on the screen that we want so that is the reason i have created this file handle the next thing that we have to do is we have to first of all iterate over the images so we have to just use a for loop so let me just use for and let me just use let i is equals to zero i should be less than uh product images dot length and then we have to just use i plus plus like this and then the next thing that we have to do is we have to um what next thing that we have to do is like we have to just access the specific image so with the help of this index we have to access a specific image so let me just keep it in one variable like product images of i and let me just use const image file data so image file data will contain all the like data like id then its name its type and its picture byte as well now from this image file data we have to convert it into a file so let me just show you how we can do this as well so for this let me just create one more function which will be like something like let's suppose public data uri to block so this function what it the what this function will do is it will it will just take the picture bytes and then it will create it to the blob so for this it will just basically take two different parameters first of all let's suppose data uri or maybe you can say that picture bytes so you can say that picture bytes and the next parameter it will take is it will take image type so what image type we have like we have do we have uh jpeg or do we have png so that image type it will take the next thing that it will do is it will just call one function which is window dot at top and then it will just take our picture byte so let me just use pick byte like this and then whatever it will return it will just basically return one byte string so let me just store it inside a byte string like this the next thing that we have to do is we have to create one array buffer from this byte string so let me just create const array buffer is equals to new array buffer and what will be the length of this array buffer is like is it will be something like byte string dot length like this and now once array buffer is created the next thing that we have to do is we have to create the u in 8 array buffer from this array buffer so it might be like bit confusing but as of now you can just type it as it is and at the end you will get to know every single thing so let me just use const int 8 array is equals to new u in it array and again we have to just pass array buffer like this the next thing that we have to do is we have to just use a for loop so that we can iterate over these um array that we have just created like indeed array so we have to just use for loop let i is equals to 0 i should be less than byte string dot length and let me just use i plus plus like this and then what we have to just do is we have to just use byte string dot care code at and then we have to pass the index like this and whatever it will return we have to just store it inside the inside the int 8 array of ith index like it so it is basically doing is like it is iterating over the byte string array and it is accessing the single uh character or maybe say that a single byte which is present into the picture byte and then it is just storing it into our uh int 8 array now from this in it array once all the processing is done we have to finally create one block so let me just create new blob and then again for the blob we have two different parameters so very first parameter is blob part so block part is nothing but intake array and make sure you are just using this square bracket for this intake array and then the next thing that we have to pass is a type so my type will be nothing but a image type so whatever image type i will receive i will just use that type as it is and finally it will just create one blob for me so let me just store it inside one variable like const block and at the end let me just return this particular blob like this and now let me just save it so now our data uri to block function is done the next thing that we have to do is we have to just call this function from our create images function so over here uh inside a for loop like what i'm just going to do is i'm just going to call this particular function like this dot data uri to block and again it requires two different parameters first one is a picture byte so let me just use image phi data dot pick bytes comma image file data dot type like this and let me just first of all check these spellings and all so let me just go to the google chrome and i think i have stopped the execution of the application so let me just use npm run start because over here using the correct names is really very important uh because like if you missed the missed anything anything in in into these names then you will get all the errors and all so let me first of all recheck this for the safer side let me just go to the google chrome and let me just refresh the application let me click on the images any image and on the console we are getting the image details so for this what we have we have picture byte so pick byte for the bytes and type for the type so these particular names exactly same we have to use in this place as well so in this place again if you see i done the mistake over here i used a pick bytes but i in actual it is a peak byte so that is the reason we have to verify it again and again so now whatever it will return i'm just going to store it in one variable which is image block like this and now from this image blob what we have to do is we have to again create one file and then we have to create uh what we say we have to create a file and then from this file we have to create its url as well so first of all let's create one file so let me just use new file and again it will take parameters so very first parameter if it will take is its image blob so again make sure you are just using the rounded not around it square brackets for this image block the next thing that it it will take is it will take the name so we have to use image file data dot name and again you can just verify like for the name we have the name key itself so we have to just use a name and then the next thing that we have to do is we have to pass its type so for the type we have to use the curly bracket and then we have to just pass a type is equals to image file data dot type like this and then whatever file it will return we have to just use one variable to store that particular file so let me just use image file is equal to new file like this and now finally our file is created now from this particular file we have to create its url so basically we have to create one file handle object or maybe you can say that we have to use this particular interface to structurize our url and file so we have to just use const final any name that you can give final file handle is equals to or first of all let me just give the type which will be of type file handle is equals to and then we have to give this curry bracket so very first parameter that it basically requires is it requires a file so let me just give a file and my file will be nothing but my image file that i just created and then it the second parameter that it requires is a url so url is nothing but the url of my image but image file so for this to create an url i'm just going to use a dom sanitizer so we have to inject the dom sanitizer so let me just use private sanitizer which will be of type dog sanitizer like this and then for this url we have to just use this dot sanitizer dot and then we have one function something like bypass security trust url we have to call this particular function this particular function again take one parameter so for this we have to pass window dot url dot create object url and finally we have to just pass our image file to this so make sure you are just passing the image file not a blob and then at the end we have to just give a semicolon so let me just give a semicolon and once our image final file handle is created the only thing that we have to do is we have to push this file handle final file handle inside the array that we have created previously so product images to file handle dot push and we have to just push a final file handle now all these things like make sure like whatever i have just done i have just done every single thing inside a for loop not outside a for loop so make sure like you are just using all these things in a correct manner because over here we have created a lot of objects with a similar name so obviously there might be a confusion so you can just pause it pause the video and maybe you can just check the code but make sure you are just using every single thing in a correct manner even for the data uri to block uh function as well so make sure you are just using every single thing in a correct manner so now after the for loop the only thing that we have left back is we have to assign this particular array to our original product object so what we have to just do is we have to just use product dot product images is equals to product images to file handle like this and at the end we have to just return the product like this and now we are just done with the service and every single thing which is needed inside the service is done the next thing that we have to do is we have to call this particular service from our required component so now let me just close this image processing service and now let me just go back to the show product detail component.ts file inside this we have to just call this particular image processing service so the next question might come like where we have to call this image processing service right because we should we should call this image processing service at the correct place otherwise it will not have any use so over here we have to call this image processing service wherever we are getting the product details so as of now in my case i'm just going uh i'm just using this function like get all products to receive all the product details so over here we are just receiving all the product details from the backend so once we received it from the back end then we have to just call the image processing service so that is the correct time to call the image processing service so now let me just show you how we can do this as well so for this first of all let me just inject this service that we have just created so let me just use private image processing service then which is of type image processing service now inside my get all product function i'm just going to use a map function or maybe i'm just going to use a pipe and inside the pipe i'm just going to use a map function so before subscribing we have to just call a pipe so pipe is nothing but uh pipe is nothing but a uh like it is basically one you can say that it will basically help you to execute some functions before uh subscribing to it for example map filter so it is basically comes from the rxts library so it basically provides lot of different information a lot of different functions which you can use on the information or maybe on the observables so that you can like if you want to perform any operations before subscribing to the observable the pipe is the right way to do this so now inside the pipe i'm just going to use one function that is called as a map so for this map what it will basically take is it will basically take uh maybe one or two parameters so let me just check so yeah so it takes two different parameters it basically takes one value then second one is an index so first of all let me just use the value so value will be nothing but a x you can give any name and that value will be of type product that value will be of type product array so we have to use a brackets to define these so let me just use a rounded brackets and then we have to give the index as well like this so let me just give a index and for the index i am just using i like this and then we have to use a arrow and now we have to give the function that we just want to use so again we have to use a map the reason is this particular product is nothing but a array but we want to perform the operation of operation on every single element which is present into arrays so product array is nothing but let's suppose if you have uh the 10 arrays right if you have the 10 different products so this product array will contain 10 different elements so we have to process images for every single product that is present into this array so i think it is becoming a bit confusing but as of now you can just type the code and maybe once you read it once you get the output you will get to know every single thing so next thing that we have to do is we have to just call x dot map and again we have to just use uh you can just give any name so again i'm just using one bracket then for this i'm just using a product again it will be of type product like this and then we have to again use the arrow and this dot image processing service dot create images and this create images function will take the product like this and now let me just save this code and this is the pipe that we have to just add before subscribing to the product so right now i have used a two different maps over here so the reason is the first map will take entire array which is of the product array the next map it will take the only single element which is present into a array so if you have some of the little bit of information on the pipe and the map then it will be very easy otherwise you can just type it and you can just leave it as it is maybe in some of the other sessions we will cover on the map and every single thing now let me just save this code and now let me just restart my application so let me just use npm run start and now whenever we will click on the image button show image button then on the console you will see the difference like whatever output previously we were getting and what is the exact output right now we are getting so let me just quickly show you let me refresh it and now let me just click on the images button so now on the console if you see like rest of the things we are getting as it is but if you see like product images what we are going to what we are getting is we are getting now file and we are getting its url so previously we were getting like picture bytes then type and the name and then id but right now what we are getting we are getting the actual file and we are getting its url so this is basically done by this map and the process image process service that we have just created so all these things are done by this particular uh pipe and this function create images function so now we have done almost every single thing the next thing that we have to do is we have to just pass this information to the dialog and then we have to show that images on a dialog so this is particular this is basically very very easy so over here let me just go back to the google chrome and let me just close this um tab or maybe console and then let me just come back to this angular material site let me just go back to the examples and let me just go back to the examples that we were referring previously so yes injecting data when opening a dialog so how we have to inject a data so it is basically simple we have to just use a data and then we have to just use its key and then we have to just use its value so we have to use a data then inside it we have to use its key and then we have to use its value so let me just try to use this similar thing let me just go to the show images function then let me just add one more parameter over here which is a data and then we have to use a curly bracket then we have to give a comma after the data as well then for the data let me just use a key so i will just use a key as images which is which will be from product dot product images like this and now let me save it now the next thing that we have do is we are attaching images from the show product detail component but on the dialog as well we have to receive those images so from here we are sending it but from the dialog we have to receive it so for this let me just go to the new component that we just created so we have previously created component that show product image dialog let me just go to the ts file of it and then over here let me just go to the chrome and let's see so over here we have to first of all inject a dialog data so let me just use public data dialogue data and then over here we have to use this uh decorator as well which is at the right inject so let me just use in a similar way so let me just go to the constructor let me just use public data which will be of type mat dialog data mat dialog data let me just try to find it out or let me just type it over here i am not able to find the mat dialog data yeah it is a dialog data not a matte dialog data so let me just remove it and let me just use dialog data so dialogue data also i am not be able to find let's see whether we have to import something so over here if you see let me just copy this import line and now let me just paste it inside my imports like this and yes now we have imported it successfully and okay let me just check why i'm getting the errors let me just copy the name i think okay so still i'm getting the error so let me just check cannot find a name as a dialogue data so i think we have to do one more thing as well so let me just use this particular decorator add that inject matte dialog data like this and for this inject we have to just import like this and now let me just save it now over here again uh i'm not sure like why i'm just getting the error so we can just see into that error later on but first of all let's move forward and the next thing that we have to do is we have to just use one more thing so we have to do one more function so let me just use one function let's suppose receive images like this and then let me just use console.log over here and then let me just use a data so i'm just printing this dot data as it is let's see what happens and also we have to do one more thing like we have to just check for the key as well so over here uh in the example they are using the key as a data this data we are again using the same and we must have to use the same there is nothing uh to worry about the key that we are interested in these like animals so over here they are using the animal but now let's suppose uh if we are using something different so we have to use that different name that we have used so let me just go to the showproductdetails.com dot ts file over here we are just using the images as a key so we have to use data dot images so let me just go back and over here we can just use this dot data dot images like this and now let me just save it and let me just try to restart my application and again we are getting the error so let's see why i'm just getting the error so now if i just go to the google chrome over here if you see like i just found out one mistake that i done so i have used a dialog data so i was thinking like it is a inbuilt uh like classes which is provided by the angular material but it is not kind of inbreed class so if you see like they have created one interface for the dialogue data so that is the reason we were getting the error but we don't have to create the interface for dialog data because we have previously created so let me just use instead of the dialog data let me just use product or maybe we can just use any array because we are going to get um we are going to get one array or instead of the any as well we can just use a file handle because we are going to get array often file handle so we can just use it as an array of file file handle so now it is done and the next thing that it is giving is like it is giving me the error so yes obviously it will give me the error because now directly we cannot access the images so as of now let me just print it as a this dot data and now let me just save this code now we have to call this receive images function from our ng on init let's see what we get so we have to just call this dot receive images like this and now let me just see whether my application is compiled or not so let me just first of all start my application and let's see what we get on the uh receive images so we are just doing the console.log and i'm expecting that it should print uh the images array like whatever we are whatever we are going to receive from the show product detail component now let me just open the console and over here now let me just click on the images so now as soon as i click on the images i am getting first of all first console is on uh from the show product retail component itself but second console is from the model or dialog so if you see we are getting the images array then we are getting uh zeroth index like as of now we have only one image so that's the reason zeroth index then we are getting the up file handle like file and url so as expected we are getting every single thing the next thing that we have to do is we have to just iterate over the array and then we have to show images on this dialog so for this again i'm just going to use the grid that we have used a previously so let me just use a grid list and we have used the grid list previously to show the images preview so that's the reason we don't have to import its module but if you are using for the very first time make sure you are just importing uh its module so now let me just go to the overview and i am just going to use this basic grid so we can just copy this grid code and we can just come back to the vs code and then let me just open its htmls like show product image dialog html show product image dialog html let me just first of all i just opened a css so we have to open the html so let me just open its html and now let me just first of all remove this entire default message and let me just paste this particular code and then over here for this mad matte grid tile we have to use a ng4 so let me just keep only one and remove all these things and then let me just use star ng for is equals to and then what we have to just do is we have to just use this dot data dot file handle so we have to just use this dot data and let me just use let file handle of data like this and then we have to just use img src so src will nothing is nothing but like file handle dot url and let me just save it now let's see what we are getting on the console so now if i just click on it i'm getting one error on the console let's see so it is basically saying that cannot find a different supporting object object object of type object and g4 only supports binding to iterables such as arrays so let's see what it is doing right now so over here what we are doing is we are just trying to do ng4 on the data so data is nothing but an array so it should work fine and then we are just using a file handle dot url so let me just try to use a binding to the src like this and now let me just save it now let's see what happens so when we click on this so still we are getting this let me just refresh this as well and now let me just click on it and still we are getting the same error and now over here let me just see like what we are doing right now so what we can just do is we can just try to debug this particular a code to get what exactly we are doing um over here so first of all i am just doing the console.log so yes that is correct on the console.log what we are just doing is we are just getting the images yes so i think we have to use these images so we have to just use this dot data dot images so let's try to do this this dot data dot images like this and now let me save it and let's see now what we get so let me just check whether my application started or not so yes on on this it i'm just getting the errors so let's see again why i'm just getting the errors so now uh for to resolve this error let me just do one thing let me just instead of this file handle let me just make it as an any array like this and now let me just save it so let's see again whether we are getting any error or not because we have to just type we have to just check it with the different types because i this error was unexpected i think and i'm just missing some types and everything so that's the reason we are getting the error and let me just remove this array as well and let me just keep it as a any only so now once we do any i think we are not getting any error right now and over here uh we are what changes we have done is we have just made it as an any and inside the html we have just used data dot images so previously we were just using data but right now we are using data dot images so i think this should work perfectly fine because i'm not i'm now just using the any data type so now let me just start the application let's see whether do we get any error or not and let's see if we are getting any error we can resolve it otherwise i think we should not get any error right now i'm expecting no any errors right now so now application is compiled successfully if we just go to the chrome and if we just refresh it and if we just click on any images button now we are able to see all the images and these are looking really very nice the only thing that we have left back is we have to just make it more beautiful and we have to just apply some basic styles i'm not going to apply the heavy styles i'm just going to apply the basic styles such as its product height and width and then i'm just going to apply one border as well around these images so that it will look more beautiful so i'm just going to create this similar thing that we have done previously for the show image previews so again we are we are just going to follow the same styles the next thing that we have to do is we have to quickly go to the html and over here if you see like for this matte grid list we have the row height as uh 2s21 instead of two as to one we can just make it as one as to one and then columns we can just make it as a four columns like this and let me save it let's see how it is currently looking uh so let me just see yes now it is looking bit good now we have to apply the styles to the images as well so i'm just going to apply similar styles that we have done for the show image preview so for this let me just go to the add new product component inside the add new product component let me just go back to this html file and over here if you see like we have we have this image preview we have this image preview division if you see for this image like we have applied the width of 100 pixel height of 100 pixel so let me just do one thing let me just apply the same for same for my new component like width of the 100 pixel and then height of the 100 pixel like this and now yes it is looking quite beautiful yes i think if you want you can just increase the size but i think for me it's good because as of now we have only one product image but in some cases we might have uh five images 10 images right so in that case like if you have like height and width big height and weights so in that case it will not look quite good so that's the reason i'm just keeping it as minimum not a very minimum but it but i'm just following the decent uh height and bits that we have used a previously and let me just apply some classes as well so let me just see what are the classes that we have applied so for the images we haven't applied any classes but for a grid we have applied some classes so let me just use for the css let's see what do we have done we have just applied a border and for this border we have applied the color of a triple e which is nothing but kind of a light gray so similarly let me just apply that as well so you can just copy the same style which is matte grid tile and border is equals to one pixel solid and color is equals to hash tripoli and now let me just copy paste these into the css of my show product image dialog component let me save it let me just check so yeah now it is looking quite good and i think yes now it is looking quite perfect actually so you can maybe you can just uh increase the height and width that if you want and maybe let's try to increase it let's make it as a 150 and 150 let's see so let me just use the width of 150 and height of 150 like this and let's see yeah for 150 also it is looking good and i think yeah now it is uh decent one so we can just go ahead with the 150 and obviously like uh giving this uh height and width the same it will it is not a good idea because it will make our image uh kind of a like square image and this is not a good idea but as of now i have very few examples for the images that's the reason i'm just using it but in future if i want i can just change it to the something else or maybe we can just apply a few more styles as well so if you want to apply few more styles you can just obviously apply and you can just go ahead with your styles but as of now i'm just keeping it as it is just for a check what i'm just going to do is i'm just going to add one new product let's suppose iphone iphone 12 description is iphone 12 and i'm just going to apply the actual price as one lakh rupees discounted price as 1998 000 and then let me just apply some images as well so let me just use these images i'm just going to use a few images like few different kind of images so let's see three and i think one more we can use and one more also we can use yes so now let me just click on add product product is added let me just go to the show product details so iphone 12 yes we are getting let me click on show images and yes now if you see that this is the thing that i was discussing previously so if we can have multiple images in this case so we can just we can just have minimum height and weight so this is the case that i was uh talking about previously so i think now we are getting a very good output from it and we are now able to show all the images to the admin so we have done this very important part and many of the people were requesting in the comment section to for for this particular part so i hope you like you got an idea how we can convert our picture bites into a file blob and how we can show it to the admin and i hope you enjoyed this session and i will see you in the next session

Channel: Learn Programming Yourself

Views: 12,289

Keywords: learn programming yourself, learn programming yourself ecommerce project, spring boot ecommerce project, angular and spring boot project, spring boot and angular project, ecommerce website using angular and spring boot, ecommerce website using spring boot and angular, e commerce application development, angular spring boot project, angular spring boot full stack project, e commerce application development using angular and spring boot

Id: FJeIhMylaZg

Length: 62min 5sec (3725 seconds)

Published: Mon Aug 15 2022