Angular 6 Search Box example with Youtube API & RxJS 6

In this tutorial, we’re gonna build an Angular Application that helps us to search YouTube when typing. The result is a list of video thumbnails, along with a description and link to each YouTube video. We’ll use RxJS 6 for processing data and EventEmitter for interaction between Components.

Angular 6 Search Box example with Youtube API overview

Goal

angular-search-box-example-youtube-api

Technology

– Angular 6
– RxJS 6
– YouTube v3 search API

Project Structure

angular-search-box-example-youtube-api-angular-tutorial-project-structure

VideoDetail object (video-detail.model) holds the data we want from each result.
YouTubeSearchService (youtube-search.service) manages the API request to YouTube and convert the results into a stream of VideoDetail[].
SearchBoxComponent (search-box.component) calls YouTube service when the user types.
SearchResultComponent (search-result.component) renders a specific VideoDetail.
AppComponent (app.component) encapsulates our whole YouTube searching app and
render the list of results.

Practice

Setup Project
Create Service & Components

Run commands:
ng g s services/youtube-search
ng g c youtube/search-box
ng g c youtube/search-result

Add HttpClient module

Open app.module.ts, add HttpClientModule:

Result DataModel

youtube/video-details.model.ts

Youtube Search Service

We use YouTube v3 search API.

In order to use this API, we need to have an API key. To generate the key, open Credentials page, create new Project, Create credentials => API key.

Once you get the API key, replace the string 'xxx' for YOUTUBE_API_KEY in the code below:

services/youtube-search.service.ts

search() function takes a query string and returns an Observable that will emit a stream of VideoDetail[]:
– from query string, we build the queryUrl by concatenating the YOUTUBE_API_URL and the params.
– then we use HttpClient.get() method, take the return value and use map() to get the response, iterate over each item and convert it to a VideoDetail.

Search Box Component

This component will :
– Watch for keyup on an input and call search() function of YouTubeSearchService.
– Emit a loading event when we’re loading (or not).
– Emit a results event when we have new results.

youtube/search-box.component.html

youtube/search-box.component.ts

Two @Outputs specify that events will be emitted from this component. So we can use the (output)="callback()" syntax in parent component to listen to events on this component.

In this example, we will use the app-search-box tag later (App Component):

In constructor() method we inject :
YouTubeSearchService
el element: an object of type ElementRef, which is an Angular wrapper around a native element.

On this input box we want to watch for keyup events, get input value, and:
– filter out any empty or short queries: filter()
debounce the input, that is, don’t search on every character but only after the user has
stopped typing after a short amount of time: debounceTime()
– discard any old searches, if the user has made a new search: switchAll()

subscribe with three arguments:
onSuccess:
+ this.loading.emit(false) indicates stop loading
+ this.results.emit(results) emits an event containing the list of results
onError: when the stream has an error event:
+ log out the error
+ set this.loading.emit(false)
onCompletion: when the stream completes, set this.loading.emit(false) to indicate that we’re done loading.

Search Results Component

youtube/search-result.component.ts

youtube/search-result.component.html

App Component

In this parent component, we will:
– show the loading indicator when loading
– listen to events from the search-box.component
– show the search results
app.component.html

app.component.ts

Source Code

angular-youtube-search

By grokonez | November 28, 2018.



Related Posts


1 thought on “Angular 6 Search Box example with Youtube API & RxJS 6”

  1. Nice article.
    But, I have some issue.
    I already create Google Project & Add API key but error still show.

    HttpErrorResponse {headers: HttpHeaders, status: 403, statusText: “OK”, url: “https://www.googleapis.com/youtube/v3/search?q=art…zN4ZiBSr-b4&part=snippet&type=video&maxResults=10”, ok: false, …}

    Any suggestion?

    Thanks

Got Something To Say:

Your email address will not be published. Required fields are marked *

*