Angular 6 Search Box example with Youtube API & RxJS 6
Angular 6
4
rxjs
5
Male avatar

loveprogramming viết ngày 17/04/2021

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

451 bài viết.
79 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 6 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 5 tháng trước
1 0
Bài viết liên quan
Male avatar
0 0
https://grokonez.com/frontend/angular/angular6/angular6httpinterceptorwithnodejsrestapis Angular provides HTTP Interception to inspect and transfo...
loveprogramming viết 2 tháng trước
0 0
Male avatar
0 0
https://grokonez.com/frontend/angular/angular6/angular6httpclientgetpostputdeleterequestsspringbootrestapisbootstrap4 Angular provides the HttpCli...
loveprogramming viết 1 tháng trước
0 0
Male avatar
0 0
https://grokonez.com/frontend/angular/angular6/angular6springbootamazons3uploaddownloadfilesimagesexample Amazon Simple Storage Service (Amazon S3...
loveprogramming viết 2 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
451 bài viết.
79 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!