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 de tarefa, 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. É possível utilizar 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.

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

Agora, será adicionada a capacidade de alterar a aparência da tarefa com base em seu estado. A vinculação de propriedade será utilizada 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 "Concluir" / "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, é necessário vinculá-los aos eventos de clique dos botões. Utilizaremos o Event Binding com o evento click para escutar os cliques nos botões e chamar os métodos correspondentes.

Neste exemplo, o event binding permite associar ações do usuário a métodos do componente. O botão "Complete" / "Undo" chama o método toggleTask(), que alterna o estado task.completed. Isso também altera o texto do botão de "Complete" para "Undo" conforme o status da tarefa.

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

Agora, o template do nosso componente de tarefa simples está totalmente implementado. Veja como o componente ficou:

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.