Criando sua segunda aplicação com Angular

Marcando tarefas como concluídas

Para alternar o status da tarefa entre concluída e pendente, vamos utilizar um event binding no botão que simula um checkbox, adicionando (click)="onAlternarStatus()".

<div class="list-group-item d-flex align-items-center pl-3" [class.text-muted]="tarefa.concluida">
  <button class="btn btn-sm" (click)="onAlternarStatus()">
    <i class="far" [ngClass]="tarefa.concluida ? 'fa-check-square' : 'fa-square'"></i>
  </button>

  ...
</div>

Na classe TarefaComponent, vamos criar então o método onAlternarStatus, assim:

export class TarefaComponent {
  @Input() tarefa: Tarefa;

  @ViewChild('nome') nomeRef: ElementRef;

  onAlternarStatus() {
    this.tarefa.concluida = !this.tarefa.concluida;
  }
}

Sucesso! Bem, mais ou menos… não sei você, mas eu preferiria que as tarefas concluídas fossem automaticamente para o final da lista. O problema é que o componente Tarefa não possui acesso à lista – e nem deveria.

Enviando tarefas concluídas para o fim da lista

O jeito então é avisar que algo mudou, e deixar que a lista cuide de se atualizar sozinha. Para isso, vamos criar um EventEmitter, utilizando o decorator @Output e assinando-o no componente Lista de Tarefas.

export class TarefaComponent {
  @Input() tarefa: Tarefa;

  @ViewChild('nome') nomeRef: ElementRef;

  @Output() alternarStatus = new EventEmitter();

  onAlternarStatus() {
    this.tarefa.concluida = !this.tarefa.concluida;
    this.alternarStatus.emit();
  }
}
<div class="card bg-light shadow-sm">
  ...

  <div class="list-group list-group-flush">
    <app-tarefa [tarefa]="tarefa" (alternarStatus)="ordenarLista()" *ngFor="let tarefa of lista.tarefas"></app-tarefa>
  </div>
</div>

Por fim, vamos implementar o método ordenarLista, na classe ListaDeTarefasComponent.

export class ListaDeTarefasComponent {
  ...

  ordenarLista() {
    this.lista.tarefas = [
      ...this.lista.tarefas.filter(t => !t.concluida),
      ...this.lista.tarefas.filter(t => t.concluida),
    ];
  }
}

Aqui utilizamos o operador de propagação (spread operator) ... uma primeira vez para adicionar as tarefas pendentes, e depois novamente para incluir as tarefas concluídas.

Deixar uma resposta