Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Angular 2 práctico: Sitio de consumo de videos

Enlaces dinámicos en listas

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
En esta lección te mostraré cómo hacer correctamente los enlaces dentro de una aplicación Angular, cómo aprovechar sus características principales, las bases fundamentales de su sintaxis y el sistema que utilizan para adjuntar datos y variables dinámicas.
05:40

Transcripción

En esta lección vamos a aprender cómo incluir enlaces dentro de una lista generada en Angular 2. Acá, tengo una aplicación que está desplegando información a partir de un servicio en PHP. Sin embargo, no tengo forma de conectarme o mostrar datos a partir de esta información. Vamos a agregar enlaces dentro de esta lista. Acá, tengo el código que está generando la lista que te acabo de mostrar. Por ejemplo, si quisiera hacer un enlace exactamente utilizo la propiedad "href" y con eso, en teoría, puedo hacer un enlace. Ahora, ¿dónde debería enlazar? Vamos a revisar la aplicación una vez más. Tengo un componente llamado "video player" así que voy a copiar el nombre de este componente para hacer el enlace, y vamos a revisar el resultado. Vemos que en este momento se está haciendo un enlace, ya tengo tengo todas las clases de CSS para que se despliegue esto correctamente y al hacer clic sobre este enlace vamos a ir a "video player" Por ejemplo, yo estoy acá, en componente llamado "lista de videos" vuelvo otra vez a "video player". Ahora, ¿qué vamos a hacer? Necesito que, por ejemplo, que este enlace me muestre algún tipo de contenido dentro de este otro componente. ¿Cómo le puedo yo enviar información a este componente? Sencillo, por ejemplo, puedo utilizar algún tipo de parámetro en URL así. O también utilizar un formato más interesante dentro del URL y enviar datos. Puedo hacer esto, sin embargo, si revisamos, por ejemplo, dentro de estos enlaces, vamos a cambiarlo un poco para que aplique un sistema parecido, por ejemplo, si yo le quiero enviar el nombre de este video, por ejemplo, un identificador, le pongo, en este caso, 123. Vamos a guardar. Y vemos que ocurre un detalle. Si hago clic en el primer video, me va a enviar, en este momento no me está funcionando correctamente, vamos a entrar otra vez, vamos a poner este ejemplo rápidamente, volvemos otra vez a la aplicación Por ejemplo, si yo hago clic dentro de este enlace, me va a enviar, efectivamente, a id 123, pero si vuelvo a esta lista y hago clic en el segundo enlace, me va a llevar exactamente al mismo lugar. Lo que necesitamos es utilizar información dinámica dentro de estos enlaces. ¿Cómo lo vamos a hacer? Lo vamos a hacer utilizando Angular. Para eso, vamos a cambiar el formato que estamos trabajando acá y vamos a utilizar las directivas de Angular. Vamos a trabajar una directiva llamada "routerLink", que me permite a mí generar enlaces dentro de mi aplicación. Esto va a ser la forma correcta de hacer enlaces dentro de Angular. El enlace que estaba haciendo era hacia "video-player". Vamos a poner también acá el "slash" (/) al inicio, vamos a guardar y vamos a ver el resultado. En teoría debería funcionar exactamente igual. Vamos a ir acá, a la lista de videos. Hacemos clic y vemos que nos está enviando a "video player". Ahora, quiero que notes un detalle, en el enlace que estoy poniendo, estoy utilizando un arreglo, esta es la sintaxis que utiliza Angular precisamente porque nos permite incluir valores adicionales. ¿Cómo? Por ejemplo, si quiero poner acá un valor "x", vamos a guardar, quiero que notes la sintaxis que estoy utilizando, esto es un arreglo, y cada uno de los valores están dentro, en este caso, de cadenas de texto separados por comas. Vamos a ver el resultado, volvemos a "lista de videos". Vemos que tenemos diferentes entradas y al hacer clic, me va a llevar a un valor diferente. Ahora, ¿cómo hacemos esto de manera dinámica? Vamos a cambiar donde dice valor "x" y vamos a utilizar un valor que se encuentre dentro de nuestra aplicación. En este caso, tengo un objeto que se llama video, de donde estoy obteniendo toda la información de mi video, y tengo particularmente una propiedad llamada "id". Quiero que notes que no la estoy poniendo entre comillas, no lo estoy haciendo porque esto es un valor dinámico, no es una cadena de texto, si yo lo pusiera entre comillas, nos mostraría el valor "video.id" y lo que quiero es que me muestre el valor que se encuentra dentro de esta propiedad. Guardamos, volvemos a ver la aplicación y vamos a ver que al hacer clic, en este caso, me va a enviar al id que tiene este video, que en este caso es 123. Volvemos de nuevo, vemos el segundo video, voy a hacer clic y nos va a llevar al dato 345. Así que puedo hacer enlaces dinámicos dentro de mi aplicación, utilizando en cada uno de los elementos de una lista los valores que son propios de cada una de ellas.

Angular 2 práctico: Sitio de consumo de videos

Aprende a crear un sitio web de consumo de vídeos con Angular 2, desarrollando el back-end y conectando con el servidor local, terminando por la personalización del reproductor.

2:41 horas (26 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.