Build Search Bar Using Angular & Laravel API | Part 3

[Music] hey what's going on guys hope that one will be fine and welcome back to the part number three so in this video i'm going to cover up the detail page as explained in the last video so i highly suggest that if you watch my very first two videos then jump to this video and get the detailed information about the route so here you see we have the search product as long as i type something and i you see here we get the list of all as long as the the data match right and once i click on this route i want to create a new new page with with having the details so if i'm going to go to my inspect element so let me go to the inspect and show you on my console so this is the array it all depends on the matching records we have array of list 50 the total and as long as i can search it now it starts with the 22 attributes with the 22 data results and we need to get the result the information the the extended information about the image the price and the date and the and the and there are further more details that i need is the yeah we can add up as much we want all the data which which actually inside this uh so let's uh create that detail page and how we can route the data and um and we can create another component which is it's going to be the search detail component so let's gonna jump and get start here so we have already source and inside source app we have a search component and we have a service defined as well so if i go right to the app.module.ts file you see here we have defined here something which is known as the router module so just like the way i have defined this component i'm going to create another component and we can define define our path the very first part that we're gonna define so let's gonna do go down here ng g for generate c for component and let's give it the name of service dash detail so this is gonna create the detailed component for us so right after the path as i explained just want to copy that up and i'm going to paste it down here and this should be the search dash detail so whatever the name that you want to define for your route which i'm in my case should be search detail and i'm going to copy that company because this should be the for the detailed component so i'm going to paste that up and you see and as well as i need here a coma to make them separate right so that's the route that we define and that's all we need for the app.module.ts file so if i go to my if i just want to go my to my search dot component.html and you see here right inside this ng for directive you see all the data is looped through it so i need to once i click on this all the list of any specific title or description so this is going to bring me the information of this specific id so for that we have something which is known as just like the input we have a we have a directive which is known as click so i'm going to define here click equal to so let's give it the name of the function that should be get detail page and let's pass here the object which we defined which is the result so let's gonna pass it right up here and now if i go to the search.component.html so it means that i need to be inside my search component.ts file and let's define here a function with the name of getdetailpage and pass here the parameter so let's give it the name of result of type any it could be any any any uh type so let's console the log and check this out what what it do so uh just to make this a little bit better so i'm gonna give it the style equal to cursor pointer so we have a pointer so that means that we have some kind of uh understanding yeah that that's going to be a link otherwise so once i click on this ex mol whatever it's you see here we get the id 1 and with having the detail of all so just like if i click the third id id 3 and it's going to display the information on the console so i need that that when the user click on this on this card this is going to route to the end of the page on the detail page with the specific information of it the id so let's gonna do and jump in so i have defined here console.log so i need to route this to the end of the page so how i'm going to define so we have something which is known as the navigation extras that's i'm going to define on top of the router so let's go and go inside here i can do with the route as well but i need to define here navigation extra that's the so that we can use the activated route which can help us to uh pass the extra parameters like the params and the other other different parameters to pass so this could be really helpful for us so let's import that first so import router and let's pass here navigation if you want that otherwise this still can route if you don't need that so navigation extras from the angular router so angular slash router and that's all we need so i need to define that right inside the constructor so right after the data service i need to define the router so it should be private router and router that's it right and if i go down to it so we have a function with the name of cat detail page so i'm going to create here a variable with the name of navigation extras so this should be with the small n so i created the with the variable and let's define here navigation extras equal to that information which our fury parameter is going i'm gonna pass so this bring us the curie params this navigation extras and you see what it actually gave us so we have a result coming from it and uh let's jason dot stringify to convert that into string and let's pass here the result all we need now if i go back and check this out so let me go to my console if i type something here and i click on here still yeah because we are not actually routing this page so i need to define that right after the end of the navigation extras so let's define it this dot router dot navigate so navigate should have the route which which in my case is search detail which is coming from the app.module.here so make sure whatever the name of the path it should be right inside the router.navigate and as i explained that we are also getting the navigation extras parameters so i need to define that up here and now if i go back and this is going to route me to the end of the page so let's type something here if i click on here and you see here on top we have the parameters going past the results which bring us the id the title and the description the image as well so this is all these are all the parameters that we pass on on the top of the url right so that's the first phase now now we need to display all the information inside our service dash component. on the service dash detail page so let's going to go inside our search detail and i'm going to create a very basic layout so right now it's just a paragraph text so let's define here the container and inside container we have a row so dot row and right after that we have call md six margin top four and make that to be uh in center so i need some margin to auto right that's it and let's go inside here so cod i need to create here a card or margin bottom three so right inside here i'm going to create here card dash body class and inside card dash party we have two things where first we need to create here h5 tag with the card dash title so let's define here something for now and inside here we have another h6 class so 86 bring us the card subtitle so let's bring this in and we also need that tax dash muted all right so inside we have a span tag which can bring us the actually should be a class of text dash primary so text dash primary and we need to have here the price so let's give it the dollar 15 here right so this should be the end of the eight six and right after the h6 tag and the div we need have we need to have here uh image source so just make that empty for now and right after the image tag we have a card desk body div so let's define a card desk body and inside card desk body we have our card that's text where we have the description so let's give it here lorem 30 for now and that's it that's the very basic detail base that we need now you see here we have a detail page and if i go back here and once i route to the data so this is going to bring us the detail information right console here so how i'm going to do here is so let's go inside the search dash detail dot component here so we're going to create here a component which is known as the activated router which bring us the parameters and query parameters and so how i'm going to do it so let's gonna show us right right up here so actually it should be a single and make this to be activated route and let's define that inside the constructor so private uh it should be route and let's give it the name of the activated route inside the constructor let's bring up here so this dot route dot query parameter as i as i explained that this coming from the activated route and we have to define here we need to subscribe so let's subscribe it and bring the response in uh which should be actually inside another bracket and as a as a parameter and let's console the login to check this out whether that we are getting the right result or not so console the log and bring up the response in so now if i go back and refresh now let me go back here and if i try to bring this vel id information which is the id2 and you see now the result is bringing up inside your search detail.component.t is that what we actually want now we need to display the real information here so we need to do here is so let me refresh uh let me remove this console.log and create here a variable with the name of params data and bring up here the json we need to parse it into the into the string into the javascript object so we need to bring up the json.parse and let me use a response.result that result that we need and it should be actually response all right so right after that we need to bring up here the uh variable that i need to create item detail as an area so item detail should be equal to a type any and it must be an array so right inside here so this dot item detail equal to that params data that we that is actually passing in right so that's all we need now if i go back inside my my uh file for the details so let display the real information which is inside the item details so let's going to grab this object and define here the the title so it should be dot title so similar for the price we need to bring this in remove this title it should be dot price and actually there should be no space uh and right inside the image make sure that there should be no more space so it should be nicely coated otherwise the image is not going to display to you so item detail dot image and for the description i need to remove this all and let's display here item detail dot description which i probably gonna display all the information now let's go back here and refresh here and you see yeah we are still having an issues that it says the template of component service detail component it must have some error it should be class actually item detail yeah this should be the wrong it should be item detail dot description and now if i go back and refresh and you see the card is working fine now let me go back and type something here let me go to this one it should be of id of something and id 13 and there we go so we are actually getting the results of the data that we needed so now we actually reaching to the detail page so that's it guys i hope you guys love and learn something out of it so if you really learn something so don't forget to like and subscribe and i want to see you for the next time

Channel: AB Nation Programmers

Views: 106

Keywords: angular, laravel, lam stack tutorial, search bar using angular and laravel, Build Search Bar Using Angular & Laravel API | Part 3, laravel api, angular search, build laravel and angular search from scratch, laravel seearch api, lamp stack, laravel and angular course

Id: Aujq9bWpREM

Length: 13min 6sec (786 seconds)

Published: Tue Oct 19 2021