Integrando YouTube com Angular 7

3 min readMay 6, 2019

Que tal apresentar vídeos de um canal do Youtube em sua aplicação Angular? Neste artigo eu mostro como é fácil a integração em projetos angular (versão 7).

No final da publicação, link do projeto no GiHub ;)

YouTube Data API v3

O primeiro passo é obter a chave da api. Acessando o site https://developers.google.com/youtube/v3/getting-started você encontra os procedimentos necessários para conseguir as credenciais de autorização.

De forma resumida, você precisa:

Vá até Google Developers Console.
Selecione um projeto.
Na barra lateral à esquerda, selecione APIs e autorização. Na lista de APIs, certifique-se o estado é ON para a YouTube Data API v3.

Após a criação do projeto o passo seguinte é registrar o módulo HttpClientModule no módulo principal (app.module.ts)

import { HttpClientModule } from '@angular/common/http';

E declarar no imports:

imports: [BrowserModule,AppRoutingModule,HttpClientModule,NgxSpinnerModule

Vou utilizar a biblioteca NGX-Spinner para exibir um spinner ao carregar os vídeos. Sua utilização é simples:

Instale a biblioteca com:

$ npm install ngx-spinner --save

E declare o módulo no imports, conforme código acima.

Agora, podemos criar um serviço para realizar chamadas a API do Youtube. No terminal informe:

$ ng g service youtube

Criamos uma variável apiKey que guarda o valor da API obtida no primeiro passo.

Logo em seguida, injetamos no construtor a classe HttpClient. Ela fornece métodos para executar solicitações HTTP.

Vamos implementar um método que retorne uma lista de vídeos. Nomeamos como getVideosForChanel(). Passamos dois argumentos, o primeiro é o ID do canal. Já o segundo, limita a quantidade de vídeos.

Concatenamos essas informações na url da API, passando ainda outros parâmetros como a ordem (‘&order=date), part=snippet que contém outras propriedades que identificam o título, a descrição, entre outros, e o tipo de recurso (type=video).

let url = ‘https://www.googleapis.com/youtube/v3/search?key=' + this.apiKey + ‘&channelId=’ + channel + ‘&order=date&part=snippet &type=video,id&maxResults=’ + maxResults

Na classe do componente (app.component.ts), declaramos um array para o resultado dos vídeos:

export class AppComponent {videos: any[];

No método construtor, injetamos o serviço criado para requisição dos vídeos (YoutubeService) e uma classe para exibir um spinner (NgxSpinnerService)

constructor(private spinner: NgxSpinnerService, private youTubeService: YoutubeService) { }

Em seguida, no método ngOnInit(), invocamos o método passando o ID do Canal, nesse exemplo o canal é do meu filho :), e um número máximo de resultados .getVideosForChanel(‘UC_LtA_EtCr7Jp5ofOsYt18g’, 15).

ngOnInit() {this.spinner.show()this.videos = [];this.youTubeService.getVideosForChanel('UC_LtA_EtCr7Jp5ofOsYt18g', 15).pipe(takeUntil(this.unsubscribe$)).subscribe(lista => {for (let element of lista["items"]) {this.videos.push(element)}});}

No resultado,.subscribe(lista => { , recuperarmos a propriedade items e adicionamos cada objeto no array criado.

No ínício da função, incluímos um time out de 3 segundos para encerrar o spinner em:

setTimeout(()=>{this.spinner.hide()},3000)

Vamos finalizar, codificando o template do componente. No seguinte trecho:

<div *ngFor="let video of videos" class="col-xl-3 col-md-6 mb-4"><div class="card border-0 shadow vh-50"><a href="https://www.youtube.com/watch?v={{video.id.videoId}}" target="_blank"><img [src]="video.snippet.thumbnails.medium.url" class="card-img-top" alt="..."></a><div class="card-body text-center"><h5 class="card-title mb-0"><a href="https://www.youtube.com/watch?v={{video.id.videoId}}">{{video.snippet.title}}</a></h5><div class="card-text text-black-50">{{video.snippet.description.slice(0, 100)}}</div><p class="card-text">{{video.snippet.description}}</p></div></div></div>

Fazemos um loop no array usando a diretiva *ngFor. Definimos um link para exibir o vídeo através do videoID em href=”https://www.youtube.com/watch?v={{video.id.videoId}}".

Você pode exibir outras informações do vídeo, consultando a propriedade snippet.

O resultado final: