Você já se familiarizou com os tipos básicos de data binding. Agora, veja como eles são aplicados na prática ao trabalhar com o TaskComponent.

Estrutura da Tarefa

Nosso componente de tarefa exibirá o título da tarefa, além de dois botões: um para alterar o status da tarefa (de "Concluir" para "Desfazer"), e outro para excluir a tarefa. Veja a estrutura HTML que será utilizada:

Os estilos já foram definidos. Você pode revisá-los acessando o arquivo style.css.

Implementação do Componente

Nosso componente irá trabalhar com um objeto task, que armazenará informações sobre a tarefa, como seu id, title e o status completed. Definiremos esse objeto dentro da classe do componente:

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

Podemos exibir esses dados no template HTML do componente.

Utilizando Dados do Componente no Template

Para exibir dados do objeto task, basta referenciar suas propriedades diretamente no template. Por exemplo, para exibir o título da tarefa:

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

Se a tarefa estiver concluída, o texto do botão deve mudar. Podemos usar um operador ternário para ajustar o texto do botão com base no valor de task.completed.

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

Se task.completed for true, o texto do botão exibirá "Undo"; caso contrário, exibirá "Complete". Dessa forma, o texto do botão se adapta dinamicamente ao estado atual da task.

Adicionando Classes Dinâmicas com Vinculação de Propriedade

Agora, vamos adicionar a capacidade de alterar a aparência da tarefa com base em seu estado. Utilizaremos a vinculação de propriedade para aplicar condicionalmente uma classe CSS:

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

Isso significa: se task.completed for true, a classe completed será adicionada ao elemento. Caso contrário, a classe não será aplicada.

Como resultado, quando a tarefa estiver concluída, a aparência visual será alterada: o texto ficará riscado, a cor ficará cinza e o fundo ficará cinza claro. Todos esses estilos estão definidos na classe CSS .completed, conforme descrito acima.

Vinculação de Eventos a Botões

Agora vamos vincular eventos aos botões para que as ações apropriadas sejam executadas quando os botões forem clicados. Temos dois botões:

• O botão "Completar" / "Desfazer" — ao ser clicado, alterna o status de conclusão da tarefa;

• O botão "Excluir" — ao ser clicado, exclui a tarefa.

Para isso, criaremos dois métodos no 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;
}

• O método deleteTask() permanecerá vazio por enquanto, pois ainda não temos uma lista de tarefas para remover itens;

• O método toggleTask() simplesmente alterna o valor de task.completed. Se a tarefa estiver marcada como concluída (true), será marcada como incompleta (false), e vice-versa.

Agora, para que esses métodos funcionem quando os botões forem clicados, precisamos vinculá-los aos eventos de clique dos botões. Usaremos o Event Binding com o evento click para escutar os cliques nos botões e chamar os métodos correspondentes.

Neste exemplo, a vinculação de eventos permite associar as ações do usuário aos métodos do componente. O botão "Concluir" / "Desfazer" chama o método toggleTask(), que alterna o estado de task.completed. Isso também altera o texto do botão de "Concluir" para "Desfazer" com base no status da tarefa.

O botão "Excluir" chama o método deleteTask(), que ainda não está implementado, pois a exclusão de tarefas será adicionada posteriormente.

Agora, implementamos totalmente o template para nosso componente de tarefa simples. Veja como o componente fica:

O componente fornece os dados e o template fornece a representação visual. Juntos, eles criam uma interface de tarefas interativa e amigável ao usuário, onde os dados são exibidos, a aparência é alterada e os botões se adaptam ao estado da tarefa.