Criando sua segunda aplicação com Angular

Apresentando os dados dinamicamente

Disclaimer

Se você já possui alguma experiência com gerenciamento de estado de aplicações, pode se frustrar ao continuar acompanhando o post. Como este tutorial é voltado para iniciantes, achei que ficaria muito pesado abordar esse assunto aqui, então deixei para outros posts e fiz algo extremamente simplificado.

Componente

Antes de criarmos componentes dedicados, vamos utilizar o componente AppComponent para apresentar dinamicamente as listas de tarefas, por enquanto com dados hard-coded.

Edite o arquivo src/app/app-component.ts. Bem no topo do arquivo, logo após os imports, mas antes do decorator @Component, crie um array de listas de tarefas, tipado como ListaDeTarefas[]. Não se esqueça de importar a interface ListaDeTarefas.

Depois disso, declare uma propriedade listasDeTarefas na classe AppComponent, com o valor da lista que criamos logo acima, e remova a propriedade title, que não será utilizada. O arquivo ficará assim:

import { Component } from '@angular/core';
import { ListaDeTarefas } from './model/lista-de-tarefas';

const LISTAS_DE_TAREFAS: ListaDeTarefas[] = [
  {
    nome: 'Tarefas da casa',
    tarefas: [
      { nome: 'Varrer a casa', concluida: true },
      { nome: 'Lavar a louça', concluida: true },
    ],
  },
  {
    nome: 'Lista de mercado',
    tarefas: [
      { nome: 'Feijão', concluida: false },
      { nome: 'Paçoca', concluida: false },
    ],
  },
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  listasDeTarefas = LISTAS_DE_TAREFAS;
}

Template

Agora é a vez de apresentar os dados criados acima. Abra o arquivo src/app/app.component.html e comece a remover o conteúdo da tag <main>, deixando apenas um card de lista, com uma única tarefa.

Em seguida, utilize a diretiva *ngFor para percorrer as listas e, para cada lista, utilize novamente *ngFor para percorrer suas respectivas tarefas.

Utilize a sintaxe de interpolação {{ ... }} para apresentar os nomes das listas e das tarefas dinamicamente.

Por fim, adicione condicionalmente as classes de CSS text-muted e fa-check-square para indicar as tarefas concluídas. O código do card ficará assim:

<div class="card bg-light shadow-sm" *ngFor="let lista of listasDeTarefas">
  <div class="card-header bg-primary text-white d-flex align-items-center">
    <h5 class="m-0 py-2 flex-grow-1" contenteditable="true">
      {{ lista.nome }}
    </h5>
    <button class="btn btn-sm text-white">
      <i class="fa fa-lg fa-plus"></i>
    </button>
  </div>
  <div class="list-group list-group-flush">
    <div
      class="list-group-item d-flex align-items-center pl-3"
      [class.text-muted]="tarefa.concluida"
      *ngFor="let tarefa of lista.tarefas"
    >
      <button class="btn btn-sm">
        <i class="far" [ngClass]="tarefa.concluida ? 'fa-check-square' : 'fa-square'"></i>
      </button>

      <span class="flex-grow-1" contenteditable="true"> {{ tarefa.nome }} </span>

      <button class="btn btn-sm"><i class="fa fa-times"></i></button>
    </div>
  </div>
</div>

Deixar uma resposta