You already got familiar with the basic types of data binding. Now, let's take a look at how they are applied in practice when working with the TaskComponent.

Task Structure

Our task component will display the task title, as well as two buttons: one for changing the task status (from "Complete" to "Undo"), and the other for deleting the task. Here's the HTML structure that will be used:

The styles have already been defined. You can review them by switching to the file style.css.

Component Implementation

Our component will work with a task object, which will store information about the task, such as its id, title, and completed status. We will define this object within the component class:

export class TaskComponent {
  task = { id: 1, title: 'Buy groceries', completed: false };
}

We can display this data in the component's HTML template.

Using Component Data in the Template

To display data from the task object, we simply reference its properties directly in the template. For example, to display the task title:

<div class="task-title">{{ task.title }}</div>

If the task is completed, the button text should change. We can use a ternary operator to adjust the button text based on the value of task.completed.

<button class="complete">
  {{ task.completed ? 'Undo' : 'Complete' }}
</button>

If task.completed is true, the button text will show "Undo", otherwise, it will show "Complete". This way, the button text dynamically adapts to the current state of the task.

Adding Dynamic Classes with Property Binding

Now, let's add the ability to change the appearance of the task based on its state. We'll use property binding to conditionally apply a CSS class:

<div class="task" [class.completed]="task.completed">

This means: if task.completed is true, the completed class will be added to the element. Otherwise, the class won't be applied.

As a result, when the task is completed, the visual appearance will change: the text will be crossed out, the color will turn gray, and the background will be light gray. All of these styles are defined in the .completed CSS class, which I've outlined above.

Binding Events to Buttons

Now let's bind events to the buttons so that the appropriate actions are executed when the buttons are clicked. We have two buttons:

• The "Complete" / "Undo" button — when clicked, it will toggle the task's completion status;

• The "Delete" button — when clicked, it will delete the task.

To do this, we'll create two methods in the 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;
}

• The deleteTask() method will remain empty for now since we don't yet have a task list to remove items from;

• The toggleTask() method simply toggles the value of task.completed. If the task is marked as complete (true), it will be marked incomplete (false), and vice versa.

Now, to make these methods work when the buttons are clicked, we need to bind them to button click events. We'll use Event Binding with the click event to listen for clicks on the buttons and call the corresponding methods.

In this example, event binding allows us to link user actions to component methods. The "Complete" / "Undo" button calls the toggleTask() method, which toggles the task.completed state. This also changes the button text from "Complete" to "Undo" based on the task's status.

The "Delete" button calls the deleteTask() method, which is currently not implemented, as task deletion will be added later.

Now, we have fully implemented the template for our simple task component. Here's what the component looks like:

The component provides the data, and the template provides the visual representation. Together, they create an interactive and user-friendly task interface, where data is displayed, the appearance changes, and the buttons adapt to the task's state.