Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Interacción entre Componentes y Plantillas en Angular | Components and Templates
Introducción a Angular

bookInteracció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

template.html

style.css

style.css

copy

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 de task.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

template.html

copy

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

task.ts

copy

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.

question mark

¿Qué tipos de enlace de datos se utilizaron en el TaskComponent?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 5

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 3.13

bookInteracció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

template.html

style.css

style.css

copy

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 de task.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

template.html

copy

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

task.ts

copy

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.

question mark

¿Qué tipos de enlace de datos se utilizaron en el TaskComponent?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 5
some-alt