Just another SearchBar — Angular + jsx.

This article is the angular version of the search bar I implemented previously with react. As previous article, the search bar will be calling to http://www.omdbapi.com API.

These are gonna be the general requirements:

1. Every time the user types a letter in the input field the request should be triggered.
2. The query to the API should be sent with a delay of 300 milliseconds (debounceTime)
3. The calls should be triggered only if the query is diferent than previous search. (distinctUntilChange)
4. If there are multiple calls at a time, the app should cancel previous API calls and expect the response from the latest call. (switchMap)

Ok, let’s do this!

Let’s start with creating the project with the angular cli:

ng new search-app

Now, I will add the whole implementation inside the app.component.ts:

Line 13 and line 18:

Since we are using typescript, I created first the interface of the data we are gonna use: OmdResult (line 13) and Movie (line 18).

These 2 interfaces were created from the omdb API response:

API response from http://www.omdbapi.com/?apikey=YOUR_API_KEY&s=star%20wars

Line 33:

searchForm = new FormGroup({

search: new FormControl(‘’),

});

I created a form group with the search formControl. Angular comes with the FormsModule integrated and is something to take advantage from…

Line 35 to 48:

result$: Observable<OmdResult> | undefined

I created an observable which will contain the final result. This observable is gonna be type OmdResult or undefined since the property valueChanges from the formControl is returning Observable or Undefined.

Line 39:

debounceTime(300)

Here we accomplish point 2, debounceTime is a rxjs operator in charge to trigger the event after an specific number of milliseconds, in our case would be 300.

Line 40:

distinctUntilChanged()

Here we accomplish point 3, distinctUntilChanged is a rxjs operator used to avoid to trigger the api call if the value the user typed in the input is the same as the one typed before.

Line 41:

switchMap((val: string) => {…

Here is where we accomplish the last point! switchMap is a rxjs operator in charge to return the latest value of the latest call, so if there are multiple calls, this will cancel previous ones and will return the latest one.

line 43:

return this.http.get(

`http://www.omdbapi.com/?apikey=${API_KEY}&s=${query}`

) as Observable

And here is where we finally do the API call! This is inside the switchMap and is the last piece of code which will get you the results you want!

Once you are done with the ts implementation, you can go to the template html and just add the observable $result and show your API result:

I think this is simple enough, the only detail worth to explain is:

line 12:

*ngIf=”result$ | async as result”

This condition is just to show the table result only if the observable $result is different than undefined. Remember that to be able to see the value of an observable value you would need to subscribe on it, the async is doing that job for you.

And here is where this article ends. It’s just an easy tutorial! So go ahead and copy and paste this on your code, go beyond adding more operators (e.g. Filter) and make a prettier UI!