Interacción entre Componentes y Plantillas en Angular
Ya te has familiarizado con los tipos básicos de enlace de datos. Ahora, veamos cómo se aplican en la práctica al trabajar con el TaskComponent
.
Estructura de la Tarea
Nuestro componente de tarea mostrará el título de la tarea, así como dos botones: uno para cambiar el estado de la tarea (de "Completar" a "Deshacer"), y otro para eliminar la tarea. Esta es la estructura HTML que se utilizará:
template.html
style.css
Los estilos ya han sido definidos. Puedes revisarlos cambiando al archivo style.css
.
Implementación del componente
Nuestro componente trabajará con un objeto de tarea, que almacenará información sobre la tarea, como su id
, title
y el estado de completed
. Definiremos este objeto dentro de la clase del componente:
export class TaskComponent {
task = { id: 1, title: 'Buy groceries', completed: false };
}
Podemos mostrar estos datos en la plantilla HTML del componente.
Uso de datos del componente en la plantilla
Para mostrar datos del objeto task
, simplemente se hace referencia a sus propiedades directamente en la plantilla. Por ejemplo, para mostrar el título de la tarea:
<div class="task-title">{{ task.title }}</div>
Si la tarea está completada, el texto del botón debe cambiar. Podemos utilizar un operador ternario para ajustar el texto del botón según el valor de task.completed
.
<button class="complete">
{{ task.completed ? 'Undo' : 'Complete' }}
</button>
Si task.completed
es true
, el texto del botón mostrará "Undo"; de lo contrario, mostrará "Complete". De este modo, el texto del botón se adapta dinámicamente al estado actual de la task
.
Añadir clases dinámicas con enlace de propiedades
Ahora, se añadirá la capacidad de cambiar la apariencia de la tarea según su estado. Se utilizará el enlace de propiedades para aplicar condicionalmente una clase CSS:
<div class="task" [class.completed]="task.completed">
Esto significa: si task.completed
es true
, se añadirá la clase completed
al elemento. De lo contrario, la clase no se aplicará.
Como resultado, cuando la tarea esté completada, la apariencia visual cambiará: el texto aparecerá tachado, el color será gris y el fondo será gris claro. Todos estos estilos están definidos en la clase CSS .completed
, que se describió anteriormente.
Vinculación de eventos a botones
Ahora vamos a vincular eventos a los botones para que se ejecuten las acciones correspondientes cuando se haga clic en ellos. Tenemos dos botones:
-
El botón "Completar" / "Deshacer" — al hacer clic, alternará el estado de finalización de la tarea;
-
El botón "Eliminar" — al hacer clic, eliminará la tarea.
Para esto, crearemos dos métodos en el TaskComponent
:
deleteTask() {
// Method to delete the task. We'll implement it later.
}
toggleTask() {
// Toggles the value of task.completed.
this.task.completed = !this.task.completed;
}
-
El método
deleteTask()
permanecerá vacío por ahora, ya que aún no tenemos una lista de tareas de la cual eliminar elementos; -
El método
toggleTask()
simplemente alterna el valor detask.completed
. Si la tarea está marcada como completada (true
), se marcará como incompleta (false
), y viceversa.
Ahora, para que estos métodos funcionen cuando se haga clic en los botones, es necesario enlazarlos a los eventos de clic de los botones. Utilizaremos el Enlace de Eventos con el evento click
para escuchar los clics en los botones y llamar a los métodos correspondientes.
template.html
En este ejemplo, el enlace de eventos permite vincular las acciones del usuario con los métodos del componente. El botón "Complete" / "Undo" llama al método toggleTask()
, que alterna el estado de task.completed
. Esto también cambia el texto del botón de "Complete" a "Undo" según el estado de la tarea.
El botón "Delete" llama al método deleteTask()
, que actualmente no está implementado, ya que la eliminación de tareas se añadirá más adelante.
Ahora, hemos implementado completamente la plantilla para nuestro componente de tarea simple. Así es como se ve el componente:
task.ts
El componente proporciona los datos y la plantilla ofrece la representación visual. Juntos, crean una interfaz de tareas interactiva y fácil de usar, donde se muestran los datos, la apariencia cambia y los botones se adaptan al estado de la tarea.
¡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.13
Interacción entre Componentes y Plantillas en Angular
Desliza para mostrar el menú
Ya te has familiarizado con los tipos básicos de enlace de datos. Ahora, veamos cómo se aplican en la práctica al trabajar con el TaskComponent
.
Estructura de la Tarea
Nuestro componente de tarea mostrará el título de la tarea, así como dos botones: uno para cambiar el estado de la tarea (de "Completar" a "Deshacer"), y otro para eliminar la tarea. Esta es la estructura HTML que se utilizará:
template.html
style.css
Los estilos ya han sido definidos. Puedes revisarlos cambiando al archivo style.css
.
Implementación del componente
Nuestro componente trabajará con un objeto de tarea, que almacenará información sobre la tarea, como su id
, title
y el estado de completed
. Definiremos este objeto dentro de la clase del componente:
export class TaskComponent {
task = { id: 1, title: 'Buy groceries', completed: false };
}
Podemos mostrar estos datos en la plantilla HTML del componente.
Uso de datos del componente en la plantilla
Para mostrar datos del objeto task
, simplemente se hace referencia a sus propiedades directamente en la plantilla. Por ejemplo, para mostrar el título de la tarea:
<div class="task-title">{{ task.title }}</div>
Si la tarea está completada, el texto del botón debe cambiar. Podemos utilizar un operador ternario para ajustar el texto del botón según el valor de task.completed
.
<button class="complete">
{{ task.completed ? 'Undo' : 'Complete' }}
</button>
Si task.completed
es true
, el texto del botón mostrará "Undo"; de lo contrario, mostrará "Complete". De este modo, el texto del botón se adapta dinámicamente al estado actual de la task
.
Añadir clases dinámicas con enlace de propiedades
Ahora, se añadirá la capacidad de cambiar la apariencia de la tarea según su estado. Se utilizará el enlace de propiedades para aplicar condicionalmente una clase CSS:
<div class="task" [class.completed]="task.completed">
Esto significa: si task.completed
es true
, se añadirá la clase completed
al elemento. De lo contrario, la clase no se aplicará.
Como resultado, cuando la tarea esté completada, la apariencia visual cambiará: el texto aparecerá tachado, el color será gris y el fondo será gris claro. Todos estos estilos están definidos en la clase CSS .completed
, que se describió anteriormente.
Vinculación de eventos a botones
Ahora vamos a vincular eventos a los botones para que se ejecuten las acciones correspondientes cuando se haga clic en ellos. Tenemos dos botones:
-
El botón "Completar" / "Deshacer" — al hacer clic, alternará el estado de finalización de la tarea;
-
El botón "Eliminar" — al hacer clic, eliminará la tarea.
Para esto, crearemos dos métodos en el TaskComponent
:
deleteTask() {
// Method to delete the task. We'll implement it later.
}
toggleTask() {
// Toggles the value of task.completed.
this.task.completed = !this.task.completed;
}
-
El método
deleteTask()
permanecerá vacío por ahora, ya que aún no tenemos una lista de tareas de la cual eliminar elementos; -
El método
toggleTask()
simplemente alterna el valor detask.completed
. Si la tarea está marcada como completada (true
), se marcará como incompleta (false
), y viceversa.
Ahora, para que estos métodos funcionen cuando se haga clic en los botones, es necesario enlazarlos a los eventos de clic de los botones. Utilizaremos el Enlace de Eventos con el evento click
para escuchar los clics en los botones y llamar a los métodos correspondientes.
template.html
En este ejemplo, el enlace de eventos permite vincular las acciones del usuario con los métodos del componente. El botón "Complete" / "Undo" llama al método toggleTask()
, que alterna el estado de task.completed
. Esto también cambia el texto del botón de "Complete" a "Undo" según el estado de la tarea.
El botón "Delete" llama al método deleteTask()
, que actualmente no está implementado, ya que la eliminación de tareas se añadirá más adelante.
Ahora, hemos implementado completamente la plantilla para nuestro componente de tarea simple. Así es como se ve el componente:
task.ts
El componente proporciona los datos y la plantilla ofrece la representación visual. Juntos, crean una interfaz de tareas interactiva y fácil de usar, donde se muestran los datos, la apariencia cambia y los botones se adaptan al estado de la tarea.
¡Gracias por tus comentarios!