Criando sua segunda aplicação com Angular

O componente Tarefa

Observe como nossos componentes vão ficando mais enxutos e com cada vez menos responsabilidades: o AppComponent agora apenas carrega os dados (por enquanto hard-coded) e apresenta os cards das listas; o ListaDeTarefasComponent recebe e apresenta os dados de uma lista; e agora, o TarefaComponent vai receber e apresentar os dados de uma tarefa em particular.

Então, no terminal, digite o seguinte comando:

$ ng g c components/lista-de-tarefas/tarefa

Perceba que criamos o novo componente em um subdiretório da lista de tarefas. Isto porque esses componentes possuem uma forte relação de todo/parte, ou seja, não faz sentido (para esta aplicação em particular) que uma tarefa não esteja em uma lista. Se pretendêssemos reutilizar o componente Tarefa fora do contexto da lista, o teríamos criado um nível acima.

Vamos então preparar nosso componente Tarefa para receber uma tarefa como @Input. Edite o código do arquivo tarefa.componente.ts para que fique da seguinte forma:

import { Component, Input } from '@angular/core';
import { Tarefa } from 'src/app/model/tarefa';

@Component({
  selector: 'app-tarefa',
  templateUrl: './tarefa.component.html',
  styleUrls: ['./tarefa.component.css'],
})
export class TarefaComponent {
  @Input() tarefa: Tarefa;
}

De forma análoga ao que fizemos anteriormente, volte ao template do componente Lista de Tarefas, recorte todo o código da tarefa e substitua-o pelo componente <app-tarefa>, conforme abaixo:

<div class="card bg-light shadow-sm">
  <div class="card-header bg-primary text-white d-flex align-items-center">
    ...
  </div>
  
  <div class="list-group list-group-flush">
    <app-tarefa [tarefa]="tarefa" *ngFor="let tarefa of lista.tarefas"></app-tarefa>
  </div>
</div>

Cole o código recortado no arquivo tarefa.component.html, removendo a diretiva *ngFor:

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