Criando sua segunda aplicação com Angular

O componente Lista de Tarefas

Como estamos evoluindo a aplicação passo a passo, podemos ver a complexidade aumentando aos poucos, e a necessidade de criar componentes vai surgindo naturalmente.

Antes que a coisa fique fora de controle, vamos extrair o código do card da lista de tarefas para um novo componente que criaremos utilizando o Angular CLI.

Assim como criamos uma pasta para o modelo, vamos gerar nossos componentes a partir do diretório src/app/components, que será criado automaticamente. No terminal, digite:

$ ng g c components/lista-de-tarefas

Edite o arquivo lista-de-tarefas.component.ts e adicione a propriedade lista, do tipo ListaDeTarefas, marcando-a com o decorator @Input, assim:

import { Component, Input } from '@angular/core';
import { ListaDeTarefas } from 'src/app/model/lista-de-tarefas';

@Component({
  selector: 'app-lista-de-tarefas',
  templateUrl: './lista-de-tarefas.component.html',
  styleUrls: ['./lista-de-tarefas.component.css'],
})
export class ListaDeTarefasComponent {
  @Input() lista: ListaDeTarefas;
}

Volte ao arquivo app.component.html e recorte todo o código do card da lista de tarefas. No lugar, utilize o novo componente <app-lista-de-tarefas>, passando o atributo lista, conforme código abaixo.

<div class="container">
  <header class="d-md-flex flex-align-center mt-5">
    ...
  </header>

  <main class="card-columns mt-5">
    <app-lista-de-tarefas [lista]="lista" *ngFor="let lista of listasDeTarefas"></app-lista-de-tarefas>
  </main>
</div>

Cole o código recortado no arquivo lista-de-tarefas.component.html, substituindo seu conteúdo e removendo a diretiva *ngFor externa, assim:

<div class="card bg-light shadow-sm">
  ...
</div>