Criando sua segunda aplicação com Angular

Editando o nome da tarefa

No elemento com o nome da tarefa, marcado com a variável de template #nome, vamos adicionar três event bindings: os eventos keyup.esc e keyup.enter vão simplesmente fazer o elemento perder o foco, e então blur vai chamar o método onEditarNome, passando como parâmetro o novo conteúdo do elemento.

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

  <span
    #nome
    class="flex-grow-1"
    contenteditable="true"
    (keyup.enter)="nome.blur()"
    (keyup.esc)="nome.blur()"
    (blur)="onEditarNome($event.target.innerText)"
  >
    {{ tarefa.nome }}
  </span>

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

  onEditarNome(nome: string) {
    this.tarefa.nome = nome;
  }
}

Deixar uma resposta