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

Angular 2 avanzado: Trabajo con APIs

Inyectar datos a un componente

¡Prueba gratis durante 10 días

nuestros 1287 cursos !

Prueba gratis Mostrar modalidades de suscripción
En esta lección aprenderemos a incluir un componente dentro de otro, usaremos la propiedad @input para transportar datos desde un componente a otro y usaremos esta propiedad para encapsular los datos de cada resultado individual.
08:06

Transcripción

En esta lección vamos aprender a inyectar información desde un componente a otro. Yo estoy trabajando acá en una aplicación que está desplegando una lista por cada uno de los elementos que se encuentran en una base de datos. La información nos está llegando desde un servicio REST externo. Vamos a ver cómo se está desplegando nuestra aplicación en este momento. Vemos acá que tenemos dos elementos en la lista y estos elementos nos están llegando desde la información que sale de una API REST. Ahora vamos a hacer que cada uno de estos elementos se convierta en un componente, para eso voy a ir a mi aplicación y voy a detener el servidor, esto lo hago con el teclado Control + C, confirmo que deseo detenerme y voy a presionar "clear" para que sea más fácil de leer y ahora voy a crear un nuevo componente, en este caso voy a crearlo con "ng g component" y voy a asignarle el nombre "tarea individual". Esto va a crear un nuevo componente dentro de mi aplicación. Recordemos que estoy ejecutando este proceso dentro de la carpeta en que se encuentra mi aplicación llamada'lista-de-pendientes' y ahora se acaba de generar este nuevo componente. Ahora este nuevo componente yo lo voy a incluir dentro de los elementos de la lista, voy a borrar esta información que esta acá y voy a incluir mi nuevo componente. Voy a utilizar la nomenclatura que ya sé que incluye Angular desde la línea de comando si es "app" como prefijo y el nombre del componente, en este caso "tarea individual". Vamos a cerrar esta etiqueta, guardamos la aplicación y vamos a ejecutar el servidor, volvemos a llamar "ng serve", esto va a activar nuestro servidor y vamos a revisar el resultado. Un momento para que termine de compilar y ahora sí –voy a revisar una vez más– tengo el resultado que es dos veces el texto "tarea individual works". Este es el texto que se incluye por defecto al momento de crear un nuevo componente, así que vamos a entrar a "tarea individual", que es donde está el componente que acabo de crear y voy a modificar la plantilla, vamos a poner acá: "ITEM INDIVIDUAL", damos a guardar, revisamos y vemos acá cómo se están desplegando los contenidos de esa plantilla. Ahora yo quiero incluir la información de manera dinámica, la información que me está llegando de cada uno de los elementos que están apareciendo acá, a través de la petición que estamos haciendo a una API REST. Entonces lo que vamos a hacer es que vamos a inyectar información de este módulo, en este caso "tareas. component" y lo vamos a inyectar dentro de "app tarea individual", ya que estamos trabajando con la directiva "ngforce". Lo que va a suceder es que yo voy a inyectar cada uno de los ítems que aparecen dentro de la lista que recibimos de la API REST y entonces cada una de las tareas que van a aparecer dentro esta lista va a ser controlada por un componente de manera individual. Esto es una característica deseable dentro de la arquitectura de Angular, donde se sugiere que por cada uno de los elementos, conforme se vayan complicando, tratemos de crear un componente por cada una de las funciones o elementos individuales, así mantenemos todos los componentes de manera encapsulada y mantenemos una aplicación más ordenada. Dicho eso, yo voy a inyectar información dentro de mi aplicación "tarea individual", voy a buscar el archivo'. ts' y voy a incluirle algunas líneas extra de programación. Para poder aceptar esta información externa, para poder inyectar datos dentro de este componente, nosotros necesitamos habilitar una variable que sea externa y que podamos recibir ese dato. Esto lo vamos a definir con la propiedad "@ Input" y tenemos que definir la "i" mayúscula, y ahora sí, esto lo vamos a hacer con esta propiedad, la propiedad "Input" básicamente nos va a permitir a nosotros recibir información. Ahora me está apareciendo acá con un error de sintaxis, esto porque yo aún no importo el "Input", esto lo voy a hacer en el lugar en que estoy importando desde el "core" de Angular, voy a poner coma, y acá voy a importar este "Input" y ahora sí me lo va a aceptar, pero además necesito definir cuál va a ser el "Input", así que vamos a poner acá paréntesis y vamos a decir cuál va a ser el elemento que vamos a aceptar. En este caso le vamos a poner "tarea info" y vamos a definir cuál va a ser el tipo de dato de esta variable, vamos a definirlo de tipo "any". En el caso de TypeScript, cuando nosotros definimos una variable de tipo "any" significa que no estamos seguros de qué tipo de variable vamos a recibir, así que le asignamos una especie de comodín, es un tipo de variable especial. Ahora ya nosotros tenemos acceso a recibir información a través de una propiedad "tarea info", lo que significa que podemos habilitarlo dentro de esta lista y vamos a hacer que se inyecte información de cada uno de los ítems que estamos recibiendo. Vamos a ir al componente y dentro del componente simplemente vamos a agregar entre paréntesis cuadrados, que es la sintaxis que utiliza Angular 2, vamos a poner el nombre del "Input" que acabamos de crear. Recordemos que en este caso es un "Input" de tipo "tarea info". Quiero que notes que no he incluido un punto y coma acá, porque nos da un error de sintaxis, en este caso no debemos incluir el punto y coma. Vamos a volver otra vez a la plantilla y decimos que "tarea info", que es nuestro "Input", nuestra entrada de datos, va a tener un valor y el valor que va a tener va a ser el valor que nos está llegando acá de "ítem", así que definimos "ítem" y ahora estamos inyectando cada uno de los valores de registro en un módulo separado. Volvemos otra vez al componente "tarea individual", voy a guardar y voy a copiar otra vez más el nombre de esta variable. Ahora voy a ir a la plantilla. La plantilla es el archivo HTML que se encuentra dentro de la misma carpeta. Vamos a abrirla y por ahora se llama ítem individual, pero como yo tengo acceso a la información que estoy inyectando, voy a llamar a "tarea info", que es la variable que acabo de declarar, y voy a llamar la propiedad "texto". Y ahora ya voy a mostrar la información que me está llegando otra vez desde el servicio REST, lo estoy mostrando acá, y aunque se ve igual yo estoy trabajando cada uno los componentes dentro de un módulo. Esto me permite a mí trabajar cada uno de ellos de manera individual y por ejemplo realizar procesos separados entre cada uno de los ítems que están dentro de mi aplicación. Esta es la forma recomendable de trabajar dentro de una aplicación Angular 2.

Angular 2 avanzado: Trabajo con APIs

Comprende el funcionamiento de una API y cómo llevar a cabo sus procesos, así como controlar su funcionamiento mediante Angular 2, gracias a este ejemplo práctico.

3:02 horas (29 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:4/05/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.