Del curso: Angular avanzado

Conociendo los componentes stateless - Tutorial de Angular

Del curso: Angular avanzado

Comenzar mi mes de prueba gratis Comprar para mi equipo

Conociendo los componentes stateless

“

Hablemos ahora del concepto de un componente stateless. Un componente stateless, a diferencia de un componente stateful, es un componente que solamente despliega datos, y que si realiza algún tipo de proceso, va a ser un proceso interno que no va a afectar esos datos. Te voy a mostrar cómo implementar de manera básica un componente stateless. Yo acá estoy ejecutando un servidor donde tengo un proyecto en Angular y básicamente estoy desplegando la información que se encuentra en un modelo dentro de la interfaz gráfica y en este momento, yo solamente estoy utilizando un componente. Mi componente está recibiendo la información de un modelo y la está desplegando. Para tener un verdadero componente stateless necesitamos que esté supeditado a un componente stateful, así que vamos a crear esa relación de componentes. Primero voy a detener mi servidor, y voy a utilizar la terminal para generar un nuevo componente que se va a llamar ng generate component, y en este caso, el componente se va a llamar sin-estado. Componente stateless. Ya hemos creado nuestro componente stateless. Ahora, vamos a implementarlo de la manera más básica. Lo que voy a hacer es que voy a tomar acá en mi componente, voy a reiniciar mi servidor con ng serve, para que se desplieguen los cambios inmediatamente, y dentro de este componente, yo estoy desplegando estos tres ítems que vienen a partir del modelo. Entonces, voy a cambiar estos tres ítems, voy a tomar la información que está acá, y voy a buscar la plantilla. En este caso, todo se encuentra dentro de un tag, una etiqueta section, y acá está un ngFor, que es un bucle que está generando cada uno de estos componentes. Lo que voy a hacer es que voy a tomar este HTML, lo voy a cortar y me voy a ir al componente sin-estado. Acá voy a reemplazar el HTML, lo voy a poner directamente, y vengo al componente principal que ahora va a ser una relación de padre e hijo, vamos a tomar entonces, ahora, el componente padre, y vamos ahora a incluir el componente app-sin-estado, que es el que acabamos de crear. Revisemos el resultado, y en este punto, no se está desplegando correctamente la información, sin embargo, ya estamos creando una relación entre los diferentes componentes. Ahora tenemos un componente padre que maneja toda la información del modelo y tiene la capacidad de procesarlo, y tenemos un componente hijo o un grupo de componentes hijos que despliegan información, en este caso, estamos desplegándolo por la cantidad de veces que tenemos ítems dentro del modelo.

Contenido