Criando sua segunda aplicação com Angular

Criando novas listas

Vamos seguir a mesma estratégia de criar a lista e imediatamente focar na edição do nome, utilizando elementos marcados como contenteditable="true".

Comece adicionando o event binding (click)="onCriarLista()" no botão nova lista, depois implemente o método onCriarLista na classe AppComponent.

<div class="container">
  <header class="d-md-flex flex-align-center mt-5">
    <h1 class="display-4">Minhas listas</h1>
    <div class="d-flex align-items-center ml-auto">
      <button class="btn" (click)="onCriarLista()"><i class="fa fa-sm fa-plus mr-1"></i> Nova lista</button>
      ...
    </div>
  </header>

  ...
</div>
export class AppComponent {
  listasDeTarefas = LISTAS_DE_TAREFAS;

  onCriarLista() {
    const novaLista: ListaDeTarefas = { nome: '', tarefas: [] };
    this.listasDeTarefas = [novaLista, ...this.listasDeTarefas];
  }
}

A seguir, no template do componente Lista de Tarefas, marque o elemento de nome da lista com a variável de template #nome.

Por fim, implemente a interface AfterViewInit e seu método ngAfterViewInit na classe ListaDeTarefasComponent, adicionando uma referência à variável de template nome com o decorator @ViewChild.

<div class="card bg-light shadow-sm">
  <div class="card-header bg-primary text-white d-flex align-items-center">
    <h5 class="m-0 py-2 flex-grow-1" contenteditable="true" #nome>
      {{ lista.nome }}
    </h5>
    ...
  </div>

  ...
</div>
export class ListaDeTarefasComponent implements AfterViewInit {
  @Input() lista: ListaDeTarefas;

  @ViewChild('nome') nomeRef: ElementRef;

  ngAfterViewInit() {
    if (!this.lista.nome) {
      this.nomeRef.nativeElement.focus();
    }
  }

  ...
}

Pronto. Agora, da mesma forma que fizemos ao criar uma nova tarefa, vamos tratar os casos das teclas enter e esc. Aqui, vamos acrescentar mais um detalhe: ao terminar de inserir o nome da nova lista, vamos já criar a primeira tarefa da lista, reaproveitando a funcionalidade que já implementamos.

Deixar uma resposta