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 tarefa. Dentro deste componente, serão mostrados o id, title e status da tarefa. Também serão adicionados botões que permitem ao usuário concluir ou excluir a tarefa.

O segundo componente é o TaskListComponent, que atua como um container para todas as tarefas. Ele mantém um array de tarefas e exibe cada uma utilizando o TaskComponent. Este componente também gerencia a lógica para adicionar, atualizar e excluir tarefas.

Resumindo, o TaskComponent lida com a aparência e comportamento de uma única tarefa, enquanto o TaskListComponent gerencia a lista completa de tarefas 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.

É necessário 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, será criada 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 administra toda a lista de tarefas.