angular2-youtube

Installation

To install this library, run:

$ npm install angular2-youtube --save

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install angular2-youtube

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { YoutubePlaylistService,HttpUtilService } from 'angular2-youtube';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    LibraryModule
  ],
  providers: [YoutubePlaylistService,HttpUtilService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application you need to implement your Component like this example below:

import { Component } from '@angular/core';

// Import your Service and Model
import { YoutubePlaylistService,Playlist } from 'angular2-youtube';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  private playlist:Playlist[];
  private playlistYoutube:any;

   private msgErro: string;

   constructor(private youtubePlaylist:YoutubePlaylistService) { }


getplaylist() {
     
       this.playlistYoutube = this.youtubePlaylist.getplaylist("YOU KEY GOOGLE CONSOLE","YOUR PLAYLIST ID")
       .subscribe(value => {
              this.playlistYoutube = value
               console.log(this.playlistYoutube)
               console.log(this.playlistYoutube.items)
      });    

      console.log('s');
      
  }


  nextPage(pageToken:string){
    
    this.playlistYoutube = this.youtubePlaylist.playlistList_page("YOU KEY GOOGLE CONSOLE","YOUR PLAYLIST ID",pageToken).subscribe(value => {
              this.playlistYoutube = value
               console.log(this.playlistYoutube)
               console.log(this.playlistYoutube.items)
      });
  }

  ngOnInit(){
       this.getplaylist();
    }

}

Now We need to implement our Template like this example below:

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
        <button type="button" class="btn btn-success">Voltar</button>
    </div>
    <div class="col-12 col-md-auto" *ngFor="let t of playlist; let i = index">
         </div>
    <div class="col col-lg-2">
      {{playlistYoutube.nextPageToken}}
        <button type="button"  (click)="nextPage(playlistYoutube.nextPageToken)" class="btn btn-primary">Proximo</button>
    </div>
  </div>

  <div class="row thumbnail" >
    <div class="col-xs-6 col-md-3" *ngFor="let v of playlistYoutube.items | slice:1">
      <h6>{{v.snippet.title}}</h6>
    <a href="#" class="thumbnail">
      <img src="{{v.snippet.thumbnails.default.url}}" alt="{{v.snippet.title}}">
    </a>
  </div>
  </div>
</div>

In this example above, We don't use the bootstrap and outher style, We just implemented our service.

License

MIT © Thiago da Silva Adriano