https://grokonez.com/frontend/angular/angular-6/angular-6-search-box-example-with-youtube-api-angular-rxjs-6-tutorial

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:

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:

https://grokonez.com/frontend/angular/angular-6/angular-6-search-box-example-with-youtube-api-angular-rxjs-6-tutorial

Angular 6 Search Box example with Youtube API & RxJS 6

#angular6 #rxjs #youtube

Angular 6 Search Box example with Youtube API & RxJS 6 » grokonez
1.45 GEEK