Implementación del TaskDetailsComponent
En la página principal de nuestra aplicación, el usuario ve una lista de todas las tareas. Esto facilita obtener rápidamente una visión general de lo que se debe hacer.
Pero, ¿qué sucede si el usuario quiere ver los detalles de una tarea específica — su ID único, título exacto y estado? Para ello, necesitamos crear una página separada de detalles de la tarea.
Este capítulo te mostrará cómo construir el TaskDetailsComponent, que se abre cuando el usuario navega a una URL específica y muestra información sobre una tarea en particular.
Creación de un nuevo componente
Para mostrar los detalles de la tarea, crearemos un componente independiente. Será autónomo y podrá conectarse directamente en la configuración de rutas.
Ejecuta este comando:
Esto creará el archivo task-details.component.ts junto con su plantilla, estilos y pruebas. Puedes eliminar el archivo de pruebas si lo deseas.
Implementación del Componente
En esta etapa, solo necesitamos el id, título y estado de la tarea — esta es toda la información que tenemos sobre una tarea. Por lo tanto, en el componente, simplemente agregaremos una propiedad task.
component.ts
No olvides importar CommonModule en el componente, ya que lo necesitaremos en la plantilla.
Ahora vamos a crear la plantilla y sus estilos CSS:
component.html
component.css
La plantilla utiliza la directiva *ngIf para mostrar la tarjeta de detalles de la tarea si la tarea existe; de lo contrario, muestra un mensaje "Tarea no encontrada" usando ng-template.
Dentro de la tarjeta, se muestran el ID, título y estado de la tarea, además de un botón para volver a la lista principal de tareas (agregaremos la funcionalidad del botón más adelante).
Ahora nuestro TaskDetailsComponent está listo para usarse. Lo conectaremos a nuestro enrutamiento en el próximo capítulo.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
How do I connect the TaskDetailsComponent to the routing?
Can you show me how to display the task details in the template?
What should I do if the task is not found?
Awesome!
Completion rate improved to 3.13Implementación del TaskDetailsComponent
Desliza para mostrar el menú
En la página principal de nuestra aplicación, el usuario ve una lista de todas las tareas. Esto facilita obtener rápidamente una visión general de lo que se debe hacer.
Pero, ¿qué sucede si el usuario quiere ver los detalles de una tarea específica — su ID único, título exacto y estado? Para ello, necesitamos crear una página separada de detalles de la tarea.
Este capítulo te mostrará cómo construir el TaskDetailsComponent, que se abre cuando el usuario navega a una URL específica y muestra información sobre una tarea en particular.
Creación de un nuevo componente
Para mostrar los detalles de la tarea, crearemos un componente independiente. Será autónomo y podrá conectarse directamente en la configuración de rutas.
Ejecuta este comando:
Esto creará el archivo task-details.component.ts junto con su plantilla, estilos y pruebas. Puedes eliminar el archivo de pruebas si lo deseas.
Implementación del Componente
En esta etapa, solo necesitamos el id, título y estado de la tarea — esta es toda la información que tenemos sobre una tarea. Por lo tanto, en el componente, simplemente agregaremos una propiedad task.
component.ts
No olvides importar CommonModule en el componente, ya que lo necesitaremos en la plantilla.
Ahora vamos a crear la plantilla y sus estilos CSS:
component.html
component.css
La plantilla utiliza la directiva *ngIf para mostrar la tarjeta de detalles de la tarea si la tarea existe; de lo contrario, muestra un mensaje "Tarea no encontrada" usando ng-template.
Dentro de la tarjeta, se muestran el ID, título y estado de la tarea, además de un botón para volver a la lista principal de tareas (agregaremos la funcionalidad del botón más adelante).
Ahora nuestro TaskDetailsComponent está listo para usarse. Lo conectaremos a nuestro enrutamiento en el próximo capítulo.
¡Gracias por tus comentarios!
