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
Technology
- Angular 6
- RxJS 6
-
YouTube v3 search API
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 ofVideoDetail[]
.SearchBoxComponent
(search-box.component) calls YouTube service when the user types.SearchResultComponent
(search-result.component) renders a specificVideoDetail
.-
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
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { SearchBoxComponent } from './youtube/search-box/search-box.component';
import { SearchResultComponent } from './youtube/search-result/search-result.component';
@NgModule({
declarations: [
AppComponent,
SearchBoxComponent,
SearchResultComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Result DataModel
More at:
Angular 6 Search Box example with Youtube API & RxJS 6
Top comments (0)