Build Search Bar Using Angular & Laravel API | Part 2

hey what's up everybody so welcome back to the part number two series so as explained the very first part we have created the api with the help of larval and now we have to implement with the help of angular we have to create the search bar and uh let's implement that and integrate the api in angular right so i have on my right you see that the server must be running and that's how we can able to implement that functionality with the help of angular and let's uh create the very fresh copy of the angular project so i'm going to type here npm install dash g and uh so it should be angular slash cli all right so this is going to take some time i want to write back what's in the install all right now it's installed let's create the project with the name of ng new and the name of the application that i want is angular dash search right to make sure that it should be sir dash search not the underscore so i'm going to press enter and it's going to create the project with the name of angular search all right so i'm going to take some break and i will be right back once it's installed all right now it's installed let me cd into angular dash search and let's open up with the vs code all right so now the application is open and i'm going to explain uh there are a lot of things that needs to be understand but let me just give you a very basic gist of that so we have a source folder and inside the source folder we have the app and that's the app where we have the components we have the services that's what we can create with the help of cli and everything that usually we can create is mostly inside the app folder so normally each component must have the html file the testing file the typescript file this ts stands for the typescript and the app.module.ts file and if i go to the right to the root directory file you see here not the note to the root directory it should be inside the source we have the index.html file and you see here the tag which is the app dash root which is coming from the app.component.html and everything see everything that you see it actually coming from the uh from this app.computer.html file so let me open up my terminal and i'm gonna open up with the git bash so if i just try to run this ng serve so this is going to run on the local host port number 4200 and everything that you see is basically coming from here and next we have the as i explained we have the css file so it's blank for now and that's where we can add up our css right and the app.module.ts file that's where you see the ng module which bring up all the declaration array the where we have all the components then next we have the imports which is the browser module or the forms module so this is all coming from the imports and whenever i create a new component and you see here inside the declaration just we are going to create a new one and it's going to bring up right inside the declarations area next we have our bootstrapping which is basically the app component and and that's it all so browser module is for loading the uh the application inside the browser right so this will load up load the application so this is the very basic just for the app.module.ts file and i'm gonna go and real quick and create a new component for it so right inside the app i'm going to create with the help of git bash so i'm going to click plus here and i need here the git bash so let's create here a component so ngg for generate and i'm going to create here a component so i just simply give this c these are all the shortcuts for creating the component and let's give it the name of search so once i just simply press enter and you see here right inside the app folder we have the search folder which it bring up the all major four files right and now i hope that my application is running yeah so let me open up with the localhost 4200 and you see here that this application should be yeah now it's work now this everything that you see here it's all coming from the app.component.html file which is actually loaded from the index.html which is the main basically it's the entry point file right and i'm going to put up here a css here i'm going to use here something which is known as bootswatch and bootswatch.com so there's a lot of bunch of css that you can import the template i'm gonna go with the cyborg and let's gonna click on here and grab the css so press here ctrl u and right after that link uh right down to the meta name we have the bootstrap and i'm gonna grab the css cdn so let's go back here and right after that use a link and i'm gonna use my css right that's all i need so let me uh do one more thing if i just try to remove everything from the app.component.html and let add here h1 and if i type hello so if i go back and let me close that all and if i go back and refresh this you see here now we are able to you see here the black screen is just because we import the css for the bootstrap and this is all coming from the h1 which we just import the the h1 basically this is the hello right so these are all the thing and i i just forget to show you basically this index.html file must bring this app dash root but basically this all coming from the app.component.ts file and that's the selector for it so there you see so this is the app dashboard so this is why the [Music] app.com.html is the main route right that's why everything that you see here it should all appear on the browser all right so now i need here because later part we are going to create here the detail page so i need to create some routes so all the routes should be right inside the app.module.ts file so let me bring up here a few modules which are very important to add so we need first the router module and the http client module so the http client module is used when we have to work with the services or we have to work with the api uh so we are going to work with the apis as i explained that we have built the api with the help of laravel and now we need to integrate with the angular so something there is a very bottom audio which is known as http client module which actually comes with the observable and we don't need to define that so it returns the observable for us and later on we're gonna subscribe it so i'm gonna explain everything from here so let me uh import that first so import router module and that's automatically with the help of my extension you see you can install the angular extension all you need so it's going to bring up me here and i also need the routes here so let me add that to here so right after the imports i'm going to create here a variable with the name of const and it should be route and let me create here a route equal to that and it should be only include one for now because uh i i haven't created the detail page in this uh part in this part and in the next part you're going to create the detail page as well so let me define the path so if i just bring this empty that means that it's a main route and let's define the component that for what company that route should be so this this should be for my search company all right so this is not done and yet and i need to import that inside the imports so right after the browser module as you see that this is the router module so modules come inside the imports array and let me break that router module so it should be router module dot far root and let's bring her pair routes all right so that's all you need so once you're done with that and let's go inside to the app dot component.html file so i'm gonna remove this hello and i'm gonna add here router dash outlet so basically this will help us to route and navigate the pages so here in order to see my search.company.html if i go back here you see here the search works so as i explained that this app.module.ts file i bring up here the search component so now this should be the root home so you see all the text that appears here it should be the root root route for my application all right so that's done and let's create here the very basic html part of that so i'm going to remove this create a here a container so let's create here a container inside container we have a row and call dash md six and i'm gonna give some space from the top so margin top four and right inside here let me create here input type of text so input type of text and i don't need any name in the id so let me remove that for now and i need some directive which is known as input so so basically that will help us so whenever whatever i i type inside the input field so this directive will help me to time so this should be the input and i'm going to create a method with the name of get products search so this should be the name and uh let me create here a placeholder equal to search products and i'm also gonna create here the class which i just forgot to bring here so the class should be form dash control form dash control dash lg right so this should be the class all right now you see here down here it says the error that the error occurs in the template of the search component and we haven't defined that method so we need to define that method i need to bring up something which is dollar f so basically right now we have the input evan and i need that whatever i type here it should appear on the screen so if i go back here you see it's failed to compile and let me create this method it should be inside my search dot component.ts file so let's define that method and i'm going to create very basic whatever i type inside this input field this is going to console me to to my helping tool so let's go inside the search.company.ts and i'm going to define here the event for the name so let's give it the name annie of type any so that means that it could be of type string it could be of type anything so that's why it's any means that it could be boolean it could be a string or whatever it is so let's create here a variable keyword equal to name.target.value so let's log that and see keyword so i just want to test this out and if i go back to my search so let me go open up my inspect element so if i type here something and you see here it's going to show up on our console so that's the the very first part of it and if i go back to my app.search.com.html so that looks good all right so right after that i'm gonna just do a few things here it should be m auto so let me add that too so it should be fine and i also need to wrap this inside the form dash group all right so now it looks good okay so whatever i type here it's going to show up inside my console and the very next part i'm going to do is to let's go inside my search.company.ts file and now i need to actually what i'm going to do here is to create here a service the reason why i'm going to create here a service because with the help of the service we're going to call our we're going to call our http request and this is going to subscribe right over here inside the get product search so let's create here a service so if you guys are not sure what service is so services uh is is a special kind of a class that can that way we can share the component uh way we can share the functionality across different components so let me create here a service inside the app folder so let's create here a folder with the name of services and inside the services i'm going to create here the service with the name of data so ngg for generate ask for service and inside the services folder let's create here the service with the name of data so as long as i type something here so inside the services we have the data.service.ts which bring up which bring us the injectable and that injectable should provide it inside the root and that will help us to inject the uh inside the component to share the the functionality across different components so we have the constructor that we're gonna define our service so let's go and define that here so inside the constructor i'm going to define here the first way i need to define here something which is known as http client as i explained that so whenever we are working with the http we have to define our http client which is com which is uh returned as the observable right so import http client from the angular slash coleman slash http all right and next we have our environment uh so i haven't uh defined my environment yet so let's go inside the environment.ts file and as you see that we have our application running with the uh with the laravel backend api is running with the one point with the localhost port number 8000 so i'm gonna define here the the url for this so right after the production falls so let's give it here api url to be http colon double slash and let me give that one and the port number 8000 slash api so this should be the api url you can manually add up here but it's always the most convenient way that you can add the the environment once and you can just use that all right so let's go inside here and define the environment so i'm going to define here environment so it should be in far men from the source environments and now inside here the constructor i'm gonna define here the http so let's define here private http and let's give it the name of http client all right so that's the part of the constructor and i'm going to create here a method with the name of get let's give it the name of get search product name and let me add up here let me pass here the the parameter of name so that could be a string so this should be coming from whatever i search here the value so it's going to return the data so inside here let's pass here the response i'm going to use a promise so it will be new promise so the promise will resolve us and if the result is coming so it will resolve the data so inside the promise and i'm going to do here is the resolve so let me add up here resolve and actually it's it's not required you know i don't know why it's coming from it why it's importing here so cons response equals to new so what actually it says that cannot find any response actually it should be the yeah const right and right after that inside here i'm going to create here the request so this dot http which is coming from the http client so this dot http dot get and i'm going to set up here the environment dot and the api url and next this should be the url that i'm going to pass so the url that actually is so i i still remember that if you guys could see because i haven't opened up my application so you can simply add up that whatever we have are inside our postman so let me open up my postman real quick so i need to check if that is uh the e-value url so i have to see that i don't i haven't closed that yeah it should be something like that so slash api this is the api url and right after that we have our slash products so let's copy that slash product slash search underscore product so this should be the the url that that should be the complete url and already the base url is coming that we just add up here and next we have search underscore product that should be the key and e after equals we have the value that is coming from so how i'm going to do here is so let's inside these back text i'm going to add this url so slash product slash search underscore product and next you see this question mark indicate that could be the the key that is actually coming from so i need to add up here key which is search underscore product so let's define that search underscore product and the value which is coming dynamically so let's add hit equal to as you see inside the api url so that should be the equal to and whatever the name that i passed so let's add here dollar name right and we have to subscribe it so let's pass your subscribe and the data actually should be inside the subscribe and let's have a look and see so i need to resolve the data all right sounds good now i need to also check if that data is resolved and otherwise it could show us the error so let's pass here the error so it should be console.log error all right and if that everything works fine we need to resp and this response which should be returned right here so return response all right now now this should be the method that's that's a method that we call from the api so so get search product name i need to call that inside my now we need to pass this service inside the company and that should be app.component it should be search.company.ts file and right after that i just need to remove this one and first we have to import the data service here so import so import here and let's add here data service from the data.service.ts and next right inside the constructor we need to pass here the service so it should be private data service with this with the lower d and now here i'm gonna create here with a data service with a capital d that is import from here right so that should be inside the constructor and inside my get product search and as you see that in here we have our service with the http request that we pass inside our data.service.ts and we need to define that data the value that is coming right from this search so how i'm going to do is so simply use cons search equal to this dot data service now this is passed across the company with the help of service and let's define here the method so it should be the get search product name and the keyword that is passed so whatever i type so this key would pass right inside the name and we can search that so now i need to use the response so dot then so let's pass here the response and right after the response we have here so let's define here this dot data equal to that response which is coming from right so this should be of type any and i'm going to define right after the the export class so data of any and that's it and if i just try to console the log this dot data so we need to define here one more thing because we have defined http client and we also need to define inside our app.module.ts which is the http client module so let's go and define that right after the browser module so import and let's define here http client module so i'm going to grab this http client module and let's add that inside the inputs all right so that's it and if i go back most probably this kind of works so if i go back and refresh this and let's add something here so you see here we have list of the data the 50 regards so i need to fetch the results so let's suppose if i try to uh because we search on base of title and the descriptions if i just try to add this one actually just because we have to define yeah you see here the five results that that's what we generate so if i try to type something here the array should be empty and now no results exist with that and now let's define the the data right after the fields that we can see so for this we have to bring here something a directive known as ng4 which is should be inside the search.component.html file and right after the the div for the form dash control i'm going to create here another div so let's create here the div with the ng for directory which is the loop so ng for equal to so let's create a variable with the name of let results of data so this data is coming from that this dot data the response that is actually inside this data and uh let me add up here the uh the the card here so let's create here a class of card dot card dash body and i also need to give some margin bottom stream b dash one all right so inside here we have to give the h4 tag and inside here we have the title so let's add a result dot title and right after the h4 tag we have some small and let's give it the class of text primary and define a result dot description so these are all the objects that we can access through it so if i go back here you see if i just try to type something here so basically you see that that result in the title is the object that we are actually getting from so this is the title if you want the id as well you can also access the result.id and if the title and the description and this all loop through it so let's let's uh look and see if that works so if i just try here e-x m-o-l-l i and you see now it's actually searching now if i just try to search on base of the description so if i just try to grab something from this text and you see now it's worked and as long as i type something wrong here so the data disappear and that's the beauty of it so you guys learns about how we can search the data with the help of the angler and as i explained this video is still not and yet and now we need to click on this detail and we are able to uh get more objects through it which is the image and the other objects that you can pass so if i just try to open up you see we have the image we have the price and we have the data as well which you're gonna show as well if you want so we can cover in this in the in the most probably there's gonna be the last part of it so i hope you guys love this so don't forget to like and subscribe this is the fabulous way of of doing things with a neat and clean code so you can only support by giving me a subscriber like so that's it guys and i want to see you in the next part

Channel: AB Nation Programmers

Views: 99

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

Id: rF5X79FGKwQ

Length: 27min 5sec (1625 seconds)

Published: Tue Oct 19 2021