Criando sua segunda aplicação com Angular

Excluindo tarefas

Agora as coisas já estão ficando um pouco repetitivas… event binding, implementar métodos, alterar o estado etc. E a coisa é por aí, mesmo. Para excluir uma tarefa, faremos algo bem parecido com o marcar como concluída.

No componente Tarefa, adicione o event binding (click)="onExcluir() e implemente o método na classe TarefaComponent, emitindo o evento excluir para notificar a lista e excluir a tarefa efetivamente.

<div class="list-group-item d-flex align-items-center pl-3" [class.text-muted]="tarefa.concluida">
  ...

  <button class="btn btn-sm" (click)="onExcluir()"><i class="fa fa-times"></i></button>
</div>
export class TarefaComponent implements AfterViewInit {
  ...

  @Output() excluir = new EventEmitter();

  ...

  onExcluir() {
    this.excluir.emit();
  }
}

Já no componente Lista de Tarefas, utilize event binding para assinar o evento excluir, chamando o método onExcluirTarefa, conforme código abaixo:

<div class="card bg-light shadow-sm">
  ...

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

  onExcluirTarefa(tarefa: Tarefa) {
    this.lista.tarefas = this.lista.tarefas.filter(t => t !== tarefa);
  }
}

Editando o nome da tarefa, revisitado

Agora que implementamos a funcionalidade de excluir tarefas, vamos fazer um ajuste no método de edição do nome da tarefa: ao terminar a edição, caso o nome da tarefa esteja vazio, vamos removê-la da lista. Assim, o usuário pode apagar o nome da tarefa para excluí-la, ou simplesmente pressionar esc ou enter após clicar em nova tarefa para cancelar a ação.

Para isso, simplesmente edite o método onEditarNome na classe TarefaComponent para que fique assim:

export class TarefaComponent implements AfterViewInit {
  ...

  onEditarNome(nome: string) {
    if (!nome) {
      this.onExcluir();
      return;
    }

    this.tarefa.nome = nome;
  }

  ...
}

Com isso, terminamos as ações sobre as tarefas. Vamos agora implementar as ações sobre as listas: criar, excluir e limpar tarefas concluídas. Esta parte será só “mais do mesmo”, então vamos passar bem rapidamente por ela.

Deixar uma resposta