Quais Componentes São Necessários?

Você já sabe o que é um componente. Agora é o momento de criar seu próprio componente que pode ser utilizado no aplicativo.

A aplicação será composta por dois componentes. O primeiro é o TaskComponent, responsável por exibir uma única task. Dentro deste componente, serão exibidos o id, title e status da task. Também serão adicionados botões que permitem ao usuário completar ou excluir a task.

O segundo componente é o TaskListComponent, que atua como um container para todas as tasks. Ele mantém um array de tasks e exibe cada uma utilizando o TaskComponent. Este componente também será responsável pela lógica de adicionar, atualizar e excluir tasks.

Resumidamente, o TaskComponent gerencia a aparência e o comportamento de uma única task, enquanto o TaskListComponent administra a lista completa de tasks e a interação entre elas.

Regras para Criar um Componente

No Angular, utiliza-se o Angular CLI para criar componentes. É uma ferramenta prática que gera automaticamente todos os arquivos necessários e integra o componente na parte correta do seu projeto.

Você precisa criar dois componentes: TaskComponent e TaskListComponent. Um será responsável por exibir tarefas individuais e o outro irá gerenciar a lista de tarefas.

Estrutura do Projeto

Para manter a organização, criaremos uma pasta separada para cada componente dentro do diretório src/app. Isso tornará a base de código mais fácil de navegar e manter, especialmente à medida que a aplicação cresce.

Criando o TaskComponent

Para gerar um componente, utilize o Angular CLI. Abra o terminal no VS Code e certifique-se de estar na raiz do seu projeto. Em seguida, execute o seguinte comando:

Ou, uma versão mais curta:

Veja uma análise detalhada do comando:

Após executar o comando, uma nova pasta task será criada dentro de src/app, contendo quatro arquivos:

Esta é a configuração padrão para qualquer componente. A única diferença é o prefixo nos nomes dos arquivos (task neste caso), que vem do nome fornecido no comando de geração.

Criando o TaskListComponent

Agora vamos criar o componente para a lista de tarefas, assim como fizemos anteriormente. Execute o seguinte comando:

Isso irá gerar uma nova pasta task-list contendo os seguintes arquivos:

Esses arquivos têm as mesmas finalidades que no TaskComponent, mas agora são para o segundo componente.

Neste ponto, você possui dois componentes separados com uma estrutura clara: TaskComponent, que gerencia a lógica e o template de uma única tarefa, e TaskListComponent, que gerencia toda a lista de tarefas.