Angular esencial

Enviar datos a un componente con @Input

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Por definición, cada componente de Angular se encuentra totalmente encapsulado y todo los datos que lo habitan no entran ni salen para mantener la aplicación libre de conflictos, pero en muchísimas ocasiones vamos a necesitar que un componente reciba información. En esta lección aprenderemos uno de los métodos más comunes de inyección de datos en componentes.
08:26

Transcripción

Vamos a aprender en esta lección cómo comunicar los componentes entre sí. Acá yo estoy trabajando en una aplicación que tiene diferentes componentes. Como puedes ver, se están mostrando diferentes bloques de color. Cada bloque de color representa un componente. Este componente está generando un color aleatorio. Dentro de este componente –y llamémosle un componente principal– vamos a tener un componente secundario, en este caso'saludo', que se encuentra anidado dentro de él. Por ahora, ambos componentes están completamente encapsulados y trabajan de manera individual. Vamos a hacer que del componente principal podamos enviar información a un componente anidado. Vamos a revisar el código para examinar cómo está funcionando esto actualmente y vemos que dentro del componente principal, el cuál se está mostrando dentro de la página web, vemos que tenemos una directiva llamada'ngStyle'que está desplegando una propiedad de CSS, en la cual mostramos un color hexadecimal de manera aleatoria a través del método'colorHex'. También tenemos un texto estático y tenemos acá, anidado, un componente. En este caso un componente llamado'app–saludo'. Vamos a modificar el código para que nos muestre la información del color hexadecimal que se estaba desplegando acá, dentro de este componente anidado. Primero, voy a eliminar el texto que aparece acá, este texto estático, y también voy a modificar la plantilla del componente'saludo'. Esto lo voy a hacer dentro de'saludo. component. html', que, por ahora, me dice solamente'saludo'. Por ahora voy a poner tres equis para que veamos el resultado. Si examinamos nuestra aplicación, vemos que tenemos un componente principal donde ya no se está desplegando ningún texto y tenemos ese componente anidado que está desplegándonos tres puntos. Ahora, vamos a hacer que la información de color se despliegue en este segundo componente. Vamos a necesitar modificar antes un poco el código del componente'colores'. Así que voy a ir a'colores. component. ts' y lo que voy a hacer es que voy a evitar... en este caso, por la forma en que está trabajando la lógica de esta aplicación, se va a regenerar el código de forma aleatoria cada vez que yo lo invoque. Voy a guardar esta información dentro de una variable, así que voy a convertirlo a una variable local y voy a crear acá esa variable llamada 'color Local' que es de tipo 'string' y va a ser una variable disponible dentro de mi aplicación y ahora voy a modificar y voy a hacer que tengamos acá la variable'this'punto 'colorLocal', que sea igual a este color generado y que este método me devuelva 'this'punto 'colorLocal', así mantenemos la misma estructura en la plantilla, pero estamos almacenando el valor de'colorLocal'. Teniendo esta información, vamos a irnos a la plantilla. Por ahora, 'app saludo' no está desplegándome ninguna información y no recibe ningún dato. Nosotros vamos a enviarle un dato a través de la sintaxis de paréntesis cuadrados. En este caso, por ejemplo, yo le puedo poner 'color Nombre' es igual a, y le voy a asignar un color. Por ahora voy a enviarle un texto estático. Eso lo voy a hacer a través de la sintaxis de comillas. Quiero que notes que estoy poniendo comillas simples. Y vamos a poner acá tres equis, voy a guardar. Ahora, este valor lo estamos enviando al componente secundario llamado'saludo', sin embargo, aún no lo estamos leyendo. Vamos a modificar entonces'saludo'para que pueda leer este valor llamado'colorNombre'. Venimos al componente y buscamos el archivo con el nombre del componente'. component. ts' y lo vamos a modificar para que lo reciba a través de la propiedad'input'. Esto, vamos a primero modificar, en el'import'principal vamos a incluir otro elemento más que vamos a llamar desde el núcleo de Angular, en este caso el módulo'Input'. Quiero que notes que estoy poniendo'Input' con mayúscula en la I, porque es el nombre correcto de este módulo. Así que para invocarlo y para definir una propiedad de entrada o'input', voy a poner'@ Input' y pongo el nombre del valor que estoy recibiendo. También le voy a dar un tipo de dato, en este caso'string', y acá estamos definiendo el valor de'input'. Acá me falta poner también paréntesis. Y ahora sí tenemos'@Input', paréntesis, espacio y ponemos el nombre de la propiedad que estamos recibiendo el valor. Como puedes ver, acá estoy utilizando'colorNombre', que es el mismo valor que estoy utilizando para inyectarlo dentro del componente. Por ahora, solamente voy a utilizar este valor de tres equis. Ahora, para desplegar este valor dentro de'componentes', recordemos que en este momento nuestro componente solo está mostrando estos tres puntos. Para desplegarlo, lo hacemos de la misma forma que si esto fuera una variable local, porque ahora lo es. Así que vamos a tomar este'colorNombre' con el mismo nombre que aparece acá y lo vamos a desplegar dentro de la plantilla del componente anidado. Ahora estamos recibiendo un valor, en este caso es un valor estático que dice X X X y, como pues ver, ya se está mostrando en el navegador. Vamos a modificarlo para que nos llegue la información dinámica del componente principal. Ahora volvemos a'colores. component' y en vez de mandar este texto estático, vamos a mandar el valor que se está almacenando como'colorLocal'. Así que lo voy a copiar y quiero que notes que aunque yo estoy utilizando dentro del código de mi componente esta variable'this. colorLocal', esto es únicamente la sintaxis que vamos a utilizar para trabajar de manera interna, es el código para llamar esta variable. Ya que yo la tengo declarada al inicio de mi clase, yo la puedo llamar directamente con su nombre, en este caso'colorLocal'. No debo utilizar el prefijo'this. Así que, en este caso, simplemente llamo 'colorLocal' y ahora sí tengo un componente principal que está generando un color aleatorio. Tengo una propiedad definida a través de'input', en este caso'colorNombre', que está recibiendo un valor local del componente principal. Así estoy pasando del componente padre al componente hijo información. Vamos a guardar y vamos a ver el resultado final. Vemos que dentro de nuestra aplicación se está mostrando, en el componente secundario, el texto con el valor hexadecimal que se ha generado dentro del componente padre. Vamos a hacerle un último ajuste a nuestro componente y vemos acá que estamos desplegando la información que recibimos del componente padre y ponemos 'color del componente padre'. Listo. Ya tenemos terminada nuestra aplicación y vemos que aunque se genere aleatoriamente el color, cada vez que se ejecuta nuestro componente estamos inyectando valores a través de la propiedad'input' y este segundo componente anidado está desplegando un valor dinámico. Nosotros podemos escalar esto al nivel que queramos, podemos enviar las propiedades a cualquier componente anidado que nosotros tengamos y de esta forma se pueden comunicar los componentes de Angular entre sí.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

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.