¿Qué componentes se necesitan?

Ya sabes qué es un componente. Ahora es momento de crear tu propio componente que pueda ser utilizado en la aplicación.

La aplicación constará de dos componentes. El primero es el TaskComponent, que se encarga de mostrar una sola tarea. Dentro de este componente, se mostrarán el id, title y status de la tarea. También se agregarán botones que permiten al usuario completar o eliminar la tarea.

El segundo componente es el TaskListComponent, que actúa como un contenedor para todas las tareas. Contiene un array de tareas y muestra cada una utilizando el TaskComponent. Este componente también gestionará la lógica para agregar, actualizar y eliminar tareas.

En resumen, el TaskComponent gestiona la apariencia y el comportamiento de una sola tarea, mientras que el TaskListComponent administra la lista completa de tareas y la interacción entre ellas.

Reglas para crear un componente

En Angular, se utiliza Angular CLI para crear componentes. Es una herramienta útil que genera automáticamente todos los archivos necesarios e integra el componente en la parte correcta de tu proyecto.

Debes crear dos componentes: TaskComponent y TaskListComponent. Uno será responsable de mostrar tareas individuales y el otro gestionará la lista de tareas.

Estructura del proyecto

Para mantener todo organizado, crearemos una carpeta separada para cada componente dentro del directorio src/app. Esto facilitará la navegación y el mantenimiento del código, especialmente a medida que la aplicación crezca.

Creación del TaskComponent

Para generar un componente, se utiliza Angular CLI. Abre la terminal en VS Code y asegúrate de estar en la raíz de tu proyecto. Luego ejecuta el siguiente comando:

O, una versión más corta:

A continuación, un desglose del comando:

Después de ejecutar el comando, se creará una nueva carpeta task dentro de src/app, que contendrá cuatro archivos:

Es la configuración estándar para cualquier componente. La única diferencia es el prefijo en los nombres de archivo (task en este caso), que proviene del nombre que proporcionaste en el comando de generación.

Creación del TaskListComponent

Ahora vamos a crear el componente para la lista de tareas, igual que antes. Ejecuta el siguiente comando:

Esto generará una nueva carpeta task-list que contiene los siguientes archivos:

Estos archivos cumplen las mismas funciones que en el TaskComponent, pero ahora son para el segundo componente.

En este punto, tienes dos componentes separados con una estructura clara: TaskComponent, que gestiona la lógica y la plantilla para una sola tarea, y TaskListComponent, que administra toda la lista de tareas.