Como usar el Componente YouTube de Angular 9

Angular Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo Github

La versión de Angular 9 trajo consigo muchas novedades para los Desarrolladores, puedes leer el articulo Las Novedades más destacadas que trae Angular 9 (Ya disponible el Motor Ivy) para actualizarte, una de las novedades fue el componente YouTube el cual viene nativamente con Angular 9, sin necesidad de instalar un paquete adicional y en este Post te enseñare como usarlo.

Antes de continuar con este Post te invito a leer todos los artículos referentes a Angular en el siguiente enlace, así aumentarás tus conocimientos en Angular y también te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”:

Spotify:

Sound Cloud:

Bien ahora continuemos con el Post: Como usar el Componente YouTube de Angular 9.

Lo primero que haré es crear un nuevo proyecto en Angular 9, ejecutando el siguiente comando:

Luego instalo el paquete oficial de Angular Youtube llamado youtube-player, para esto ejecutamos el siguiente comando:

Al inicio, cuando realice la creación de un nuevo proyecto, Angular me creo la siguiente estructura de archivos y directorios en donde podemos ver el archivo llamado app.module.ts, es decir este archivo se encuentra en appYoutube > src > app > app.module.ts

En el archivo app.module.ts agrego lo siguiente (En este archivo llamo a YouTube de Angular 9) 

Paso seguido abre el archivo llamado app.component.ts, este archivo se encuentra en appYoutube > src > app > app.component.ts

Dentro de el archivo app.component.ts agrega lo siguiente:

Ahora abrimos el archivo HTML llamado app.component.html, este archivo se encuentra en appYoutube > src > app > app.component.html

En el archivo app.component.html agregamos lo siguiente, colocamos el ID del video de YouTube dentro del atributo videoId=“Qtq8wlNQOFo”

Ejecuto el comando ng serve en la consola de comandos

Estoy trabajando con el servidor local de Angular 9 http://localhost:4200/ (Puerto 4200) y puedo ver que se renderiza el video que hemos indicado en el reproductor de YouTube (Estoy usando la plantilla HTML por defecto que me brinda Angular al crear un proyecto). 

Bien eso es todo, si deseas saber más sobre el componente YouTube de Angular 9, puedes visitar su repositorio oficial en GitHub.

Conclusión

Existen otros paquetes que te permiten usar el reproductor de YouTube en Angular, pero todos son paquetes de terceros, en cambios Angular 9 trae un paquete nativo y oficial que es lo recomendable usar, ya que este paquete ha sido testeado por los Desarrolladores de Angular para que funcione sin generar problemas con Angular 9.

Nota

  • Los pasos mencionadas y el código utilizado en este Post pueden ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a Angular.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.  

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments