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>