Implementación del componente TaskDetails
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 debe hacerse.
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 de detalles de tarea separada.
Este capítulo 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 una tarea, crearemos un componente independiente. Será autónomo y podrá conectarse directamente en la configuración de rutas.
Ejecute este comando:
Esto creará el archivo task-details.component.ts junto con su plantilla, estilos y pruebas. Puede eliminar el archivo de pruebas si lo desea.
Implementación del componente
En esta etapa, solo necesitamos el id, el título y el 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 "Task not found" usando ng-template.
Dentro de la tarjeta, se muestran el ID, title y status 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 sistema de rutas en el siguiente 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
Awesome!
Completion rate improved to 3.13Implementación del componente TaskDetails
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 debe hacerse.
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 de detalles de tarea separada.
Este capítulo 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 una tarea, crearemos un componente independiente. Será autónomo y podrá conectarse directamente en la configuración de rutas.
Ejecute este comando:
Esto creará el archivo task-details.component.ts junto con su plantilla, estilos y pruebas. Puede eliminar el archivo de pruebas si lo desea.
Implementación del componente
En esta etapa, solo necesitamos el id, el título y el 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 "Task not found" usando ng-template.
Dentro de la tarjeta, se muestran el ID, title y status 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 sistema de rutas en el siguiente capítulo.
¡Gracias por tus comentarios!
