Criando sua segunda aplicação com Angular

Editando o nome da lista

Comece assinando, no template da Lista de Tarefas, no campo do nome da tarefa, os eventos keyup.enter, keyup.esc e blur.

Em seguida, crie o método onEditarNome na classe do mesmo componente. Ao finalizar a edição, caso a lista não possua tarefas, invoque o método onAdicionarTarefa para já criar a primeira tarefa da lista.

<div class="card bg-light shadow-sm">
  <div class="card-header bg-primary text-white d-flex align-items-center">
    <h5
      #nome
      class="m-0 py-2 flex-grow-1"
      contenteditable="true"
      (keyup.enter)="nome.blur()"
      (keyup.esc)="nome.blur()"
      (blur)="onEditarNome($event.target.innerText)"
    >
      {{ lista.nome }}
    </h5>
    ...
  </div>

  ...
</div>
export class ListaDeTarefasComponent implements AfterViewInit {
  ...

  onEditarNome(nome: string) {
    this.lista.nome = nome;

    if (this.lista.tarefas.length === 0) {
      this.onAdicionarTarefa();
    }
  }

  ...
}

Deixar uma resposta