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>