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

Angular esencial

Anidar componentes

¡Prueba gratis durante 10 días

nuestros 1287 cursos !

Prueba gratis Mostrar modalidades de suscripción
La arquitectura fundamental de Angular se basa en el concepto de una cascada de componentes que se intercomunican a lo largo de una aplicación. En esta lección vamos a explorar el concepto de anidado y de las técnicas más comunes para insertar componentes.
05:40

Transcripción

Vamos a aprender ahora como anidar componentes. Básicamente, la arquitectura de Angular nos permite a nosotros ir creando una aplicación a partir de ir agregando componentes. En este caso, yo estoy trabajando con una aplicación donde estoy trabajando en el componente, por defecto, dentro del archivo'app. component. ts' y estoy desplegando un valor aleatorio de'color'. Lo que vamos a hacer es que vamos a modificar esta plantilla y vamos a hacer que este componente incluya otros componentes adicionales y que podamos desplegarlo de una forma más modular. Así que yo voy a crear un nuevo componente, en este caso utilizando el comando'ng generate component' y en este caso vamos a agregarle el nombre 'colores'. Ahora, esto va a crear un nuevo componente llamado'colores', el cual puedes ver dentro de la barra izquierda donde se muestran acá ya los diferentes elementos de este componente. Lo que vamos a hacer es que vamos a tomar los valores que yo ya he creado dentro de este componente inicial y vamos a dejarlo en su forma original, que por ahora este componente solamente me va a mostrar un título, y vamos a buscar dentro del componente'colores' y acá voy a incluir los dos métodos que ya tenía definidos. Estos dos métodos, básicamente, me generan un color aleatorio utilizando el formato hexadecimal, que es el que trabaja CSS. Ahora, teniendo estos valores, también voy a copiar esta propiedad que tenía dentro de la plantilla original y voy a dejar mi componente tal como se encuentra desde el inicio en la aplicación por defecto. En este caso solo muestra un título. Le damos a Guardar y vamos a mostrar el resultado, vamos a guardar todos los elementos y vamos a ver cuál es el resultado final. Por ahora, solamente tenemos acá un mensaje. Vamos a seguirlo modificando y lo que vamos a hacer es que vamos a anidar un componente. Ahora, tenemos este componente'colores', voy a ir a la plantilla y voy a agregarle acá esta directiva'ngStyle', que va a llamar el método'colorHex' y va a asignar un color aleatorio de fondo a este elemento. Entonces, vamos a poner acá 'colores aleatorios'. Vamos a guardar y ya tenemos básicamente mi componente. Ahora, mi competente todavía no está visible, porque yo necesito que se muestre dentro de mi aplicación y así es como nosotros vamos a anidar componentes. Dentro del componente inicial, en este caso'app' punto'component', yo voy a invocar el componente que acabo de crear. ¿Cuál es el nombre que tiene mi componente? Si revisamos acá dentro de'colores', dentro de, archivo con el nombre del componente, punto'component' punto'ts', vemos que tenemos la propiedad llamada'selector', que dice'app– colores'. Ese es el nombre que se le ha generado dentro del sistema a mi componente, así que yo lo voy a invocar: 'app–colores', y esto va a insertar el componente que acabo de crear. Y si revisamos, básicamente me va a incluir un párrafo con'color aleatorio'. Vamos a guardar. Vamos a ver el resultado y tenemos acá un componente que está dentro de otro componente. Recordemos que donde se está mostrando la información de'app works! ' el componente inicial de Angular y a partir de ahí, nosotros estamos incluyendo este nuevo componente llamado'app colores'. Ahora, lo bueno es que una vez que yo ya tenga en formato de componente, un código, yo lo puedo reutilizar todas las veces que quiera. Así que vamos a incluir varias veces los colores y en cada uno de estos casos vamos a tener que... se genera de manera completamente independiente el código y por eso vamos a tener diferentes colores aleatorios, porque cada componente trabaja de manera encapsulada, de manera independiente, y los estamos anidando dentro del componente principal. Si nosotros quisiéramos crear más componentes, los podemos incluir también dentro de los componentes que ya existen. Por ejemplo, si yo quisiera crear un nuevo componente que se llame'saludo' y supongamos que este componente solo muestra un "hola", yo voy a venir acá y lo voy a modificar y solamente voy a poner'saludo'. Y ahora vamos a ir dentro de Colores. Recordemos que colores está dentro del componente principal. Yo me voy a meter dentro de Colores y le voy a anidar otro componente más, en este caso 'app– saludo'. Cerramos y me va a aparecer 'colores aleatorios' y el valor que se encuentra dentro de mi componente. Ahora tenemos acá un componente principal que tiene anidado otro componente, que a su vez tiene anidado otro. Así nosotros podemos ir desarrollando una aplicación muy compleja con cada uno de los elementos que trabajan en ella completamente encapsulado y así es como podemos desarrollar una aplicación modular y escalable utilizando Angular 4.

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.