Criando sua segunda aplicação com Angular

Excluindo uma lista

Novamente, uma aplicação mais completa teria a confirmação de exclusão, uma opção de desfazer, ou pelo menos uma lixeira onde o usuário pudesse recuperar a lista de alguma forma. Para simplificar, vamos apenas excluir a lista diretamente.

No botão excluir da lista de tarefas (ícone da lixeira), adicione o event binding (click)="onExcluirLista()".

Implemente o método onExcluirLista na classe do componente Lista de Tarefas, emitindo um evento excluir.

<ng-container *ngIf="editando; else acoesPadrao">
  ...
  <button class="btn btn-sm text-white" (click)="onExcluirLista()"><i class="fa fa-lg fa-trash-alt"></i></button>
</ng-container>
export class ListaDeTarefasComponent implements AfterViewInit {
  ...

  @Output() excluir = new EventEmitter();

  ...

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

De volta ao componente raiz, vamos assinar esse evento com o event binding (excluir)="onExcluirLista()" e implementar o método onExcluirLista na classe AppComponent, aproveitando para interromper o modo de edição caso esteja ativo e não haja mais listas:

<div class="container">
  ...

  <main class="card-columns mt-5">
    <app-lista-de-tarefas
      [lista]="lista"
      [editando]="modoEdicaoAtivo"
      (excluir)="onExcluirLista(lista)"
      *ngFor="let lista of listasDeTarefas"
    ></app-lista-de-tarefas>
  </main>
</div>
export class AppComponent {
  ...

  onExcluirLista(lista: ListaDeTarefas) {
    this.listasDeTarefas = this.listasDeTarefas.filter(l => l !== lista);

    if (this.listasDeTarefas.length === 0 && this.modoEdicaoAtivo) {
      this.alternarModoEdicao();
    }
  }
}

Quando não há listas

Ao excluir todas as listas, bate uma sensação de vazio… vamos apresentar uma mensagem amigável incentivando nosso usuário a criar sua primeira lista!

No template do componente AppComponent, crie um elemento <ng-template #semListas> e inclua a mensagem informando de que não há listas. Adicione a diretiva *ngIf ao elemento <main>, exibindo-o condicionalmente em alternância com o template semListas.

No link convidando o usuário a criar sua primeira lista, utilizamos $event.preventDefault() para impedir que o clique no link redirecione a aplicação.

<div class="container">
  ...

  <ng-template #semListas>
    <p class="lead text-center mt-5">
      Não há listas no momento. Que tal
      <a href="#" (click)="onCriarLista(); $event.preventDefault()">criar sua primeira lista agora</a>?
    </p>
  </ng-template>

  <main class="card-columns mt-5" *ngIf="listasDeTarefas.length; else semListas">
    ...
  </main>
</div>

Deixar uma resposta