Building an Angular Search Bar with Angular Autocomplete: A Step-by-Step Tutorial

in this video you will learn how to implement a search bar inside angular [Music] so here I already prepared several things first of all we have an API localhost 3000 for slash articles where inside we're getting an array of objects with a d slag and title secondly I already created two files first of all article interface yes this is the interface for the article that we're getting from the backend and secondly article service test this is the service which gets the Articles from the backend most importantly inside get articles we are getting back an article's array in additionally to that it is created that we are getting search value inside our get articles in this case we know Ok We're not just getting articles but also can filter them this is exactly what our search bar will do this is why here inside our API request we're providing a query parameter title like search value so the first thing that we want to do we want to fetch our articles in inside our app component this is where here I'm writing implements on unit because we want to fetch them on initialize and also I want to inject here inside this service and it was articles service which is coming from article service and after this we can Define engine in it but I don't want to fetch our articles here I want to create an additional method for it because later we will want to call it separately this is by here fetch data and this is just a void function where we want to call this dot article service get articles and as you can see we must provide inside such value by default we don't have any search value this is why let's just create it and set to an empty string and now here inside we can provide this dot such value so our get articles is working and we want to subscribe and get back our list of articles that we want to save somewhere this is by here we must create an array where we will save our data from the API and it will be our list of Articles and this is an article interface array and by default it is an empty array now here inside our subscribe when we're getting articles we can simply set these articles equal articles so this is how a fetch data is looking like we simply fetch our articles where applying inside this search value and we are getting back a list of Articles which we're saving inside our property most importantly our get articles method is working when we are providing such value as an empty string it will simply return for us all our articles now on initialize we want to call our fetch data method this is where these fetch data and we're just calling it without arguments and the last thing that we must prepare here is the form because actually our search bar will be an input inside the form and in order to do that we must create a form by using reactive forms this is why here on the top I want simply to create search form and I want to assign here this FB but we don't have FB this is why here inside Constructor we must inject FP and this is our form Builder now here we can use this dot FB dot non-nullable dot group and inside we must provide just a single property and it will be our search value and by default it is an empty string this is exactly how we create reactive form that we can now use inside our HTML so now we must write our HTML as you can see I don't have any but I want to tell you something here inside the component CSS I already prepared quite a lot of styles regarding our component and you can take all the Styles or any of the files from the description box below there is a source code there but now let's jump inside our app component HTML and write our markup first of all here we will have class container let's close this div and inside we will have our form so here we have form and we're providing here form group and this form group is exactly the form that we just created this is our search form after this we must apply a class it will be search bar and we have here NG submit method where we must create some method for example on search submit where inside we don't need to get anything because we're storing everything inside our form now let's close our form and create an input inside an input here will be with type text placeholder search and form control name and form control name is the most important part this is the theme that we just created this is our search value this is over here we're setting search value and then it will be automatically binded and updated but between our component and our markup and the last thing here is our class which will be searched by input and let's close our input as you can see in browser we're getting an error property on search submit does not exist this is why we must create this function inside our TS file so here on the bottom I will create an search submit and what we want to do we want to refetch our data with the new search value this is why here we must override this search value with the value from the form and it will be this search form dot value dot search value and as you can see here it is either stream or undefined and our service won't work with undefined this is why I want to write or empty string so if it is not there then it is an empty string after this we simply want to refresh data by calling fetch data function and here inside it already uses this search value this is why it is important important that were updated beforehand as you can see in browser we don't have any errors now we can type something and hit enter and obviously nothing is happening but is it clearly like this we can open network and check here and if we will open fetch you can see that essentially it works by default we have this request with title like empty string then I typed something and here is title like and this is the second request after hitting enter which actually means I can provide here full stream hit enter and we're getting this API call so everything is working fine we're getting data back they have filtered you can see it here we're getting in the preview all our records this are five now after this we're getting zero because nothing is like this title the only thing that we're missing is the list of our elements so here let's create one more container with glass articles table and let's close this diff and Trend inside one modif which will be every single article that we have this is why here is the class article and we want to use here in G4 with let article of our articles that we have inside TS file now inside we simply want to render article dot title let's check if it's working as you can see in browser uninitialize with successful rendered all our articles from the backend now here I can search for something that does not exist for example full and I'm not getting any data back because essentially what happens where here inside on search submit we set it our search value we fetched our data this is this function we are making an API call with new search value and we updated our list of Articles which means they were filtered from the backend now here if we write something which exists for example 5 we're getting filtered data 5 tips and 25 coding terms mostly importantly that this code is extremely scalable but not just filtering our data on the client which is limiting by making an API call which actually means our client will never be slow because we simply filtered data on the backend and not on the client and actually if you are interested to know how to build a custom slider inside angular without any additional libraries make sure to check this video also

Channel: Monsterlessons Academy

Views: 8,620

Keywords: angular search bar, angular autocomplete

Id: x-dJMdMREYg

Length: 8min 42sec (522 seconds)

Published: Thu May 18 2023