#19: 🔘 Adicionando um checkbox
Agora nós somos capazes de interagir com nossa lista removendo itens. Mas, e se quisermos completar itens e ainda poder vê-los em nossa lista, por exemplo, com uma linha no título do item? Aí entra o checkbox!
Nós iremos ver como:
  • Adicionar uma checkbox
  • Adicionar uma funcionalidade que, quando você clica na checkbox, adiciona uma classe CSS - que adiciona um estilo riscado, a ser adicionada aos nossos itens da lista
  • Editar a lista para responder ao checkbox
  • Adicionar uma nova classe CSS
Agora vamos avançar e adicionar um checkbox em nosso arquivo todo-item.component.ts. Coloque o código abaixo antes da tag {{ item.title }}:
<input type="checkbox"/>
Agora, para que o checkbox faça alguma coisa, precisamos adicionar um evento de clique que chamaremos de completeItem. Nós também adicionaremos uma classe css, colocar o elemento envolto e a interpolação juntos para estilo. Vamos fazer isso agora:
<div>
<input type="checkbox"
class="todo-checkbox"
(click)="completeItem()"/>
{{ item.title }}
</div>
Quando clicamos no checkbox, o programa irá rodar a função completeItem. Vamos falar sobre o que essa função precisa realizar. Nós precisamos adicionar estilos com CSS no título do item, então, quando o checkbox estiver clicado, teremos uma linha riscando ele. Nós também queremos salvar o status do item no local storage. Para alcançar isso, nós iremos emitir um evento de updae com o novo status do item e obter isso no componente pai.
export class TodoItemComponent implements OnInit {
@Input() item: TodoItem;
@Output() remove: EventEmitter<TodoItem> = new EventEmitter();
@Output() update: EventEmitter<any> = new EventEmitter();
// put this method below ngOnInit
completeItem() {
this.update.emit({
item: this.item,
changes: {completed: !this.item.completed}
});
}
Mas espere! Como esse código irá afetar a lista quando estamos apenas tocando o checkbox? Bom, o Angular tem essa maravilhosa diretriz chamada NgClass. Essa diretriz aplica ou remove uma classe CSS baseada num valor booleano (verdadeiro ou falso). Existem diversas maneiras de utilizar essa diretiva (veja a documentação da diretiva NgClass), mas nós iremos focar na utilização abaixo:
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
No exemplo acima, a classe 'first' e a 'second' vão ser aplicadas no elemento porque têm valor verdadeiro. Já a 'third' não irá ser aplicada, pois seu valor é falso. É aqui que nosso código anterior começa a fazer sentido. Nossa função completeItem irá mudar entre valores verdadeiros e falsos, ditando quando uma classe será aplicada ou removida.
Vamos adicionar o título do item em um <span>, então usar NgClass para aplicar o estilo. Dependendo do item atual completado, nós iremos mostrar uma linha de decoração ou não:
<p class="todo-title" [ngClass]="{'todo-complete': item.completed}">
{{ item.title }}
</p>
E, finalmente, adicione o CSS em nosso arquivo todo-item.component.css:
.todo-complete {
text-decoration: line-through;
}
Próximo passo é falar para o gerenciador de listas do componente pai o que fazer quando o evento de update for emitido. Para fazer isso, nós temos que ligar a ação de update e o método de update que irá acionar a função apropriada no TodoListService. Então aplicamos aqui:
<app-todo-item [item]="todoItem"
(remove)="removeItem($event)"></app-todo-item>
</div>
Próximas modificações:
<app-todo-item [item]="todoItem"
(remove)="removeItem($event)"
(update)="updateItem($event.item, $event.changes)"></app-todo-item>
</div>
E crie um método adicional para gerenciar o evento de update de item. Muito similar com a função removeItem:
updateItem(item, changes) {
this.todoListService.updateItem(item, changes);
}
Voila! Quando você clica no checkbox, o css deve adicionar uma linha no título da lista, e se clicar novamente, o checkbox irá remover a linha.
Copy link