O que é um componente?
Os componentes são os blocos de construção mais básicos de um aplicativo Angular. Podemos pensar em componentes como peças LEGO. Criamos um componente uma vez, mas podemos usá-lo várias vezes, conforme necessário em diferentes partes do projeto.
Um componente angular é composto por 3 partes principais:
- Modelo HTML – exibição
- Arquivo TypeScript – Modelo
- Arquivo CSS – Estilo
Por que precisamos de componentes?
O uso de componentes é benéfico de várias maneiras. Os componentes dividem a interface do usuário em visualizações menores e renderizam dados. Um componente não deve envolver tarefas como fazer solicitações HTTP, operações de serviço, roteamento e assim por diante. Essa abordagem mantém o código limpo e separa a visualização de outras partes. (Vejo separação de preocupações)
Outro motivo importante é que os componentes dividem o código em partes menores e reutilizáveis. Caso contrário, tivemos que incluir infinitas linhas de código em um único arquivo HTML, o que dificulta a manutenção do código.
Criando nosso primeiro componente angular
Agora vamos criar nosso primeiro componente. A maneira mais curta de criar um componente é usando a Angular CLI:
ng g c component-nameEste comando cria um componente totalmente novo com seus próprios arquivos (HTML, CSS e TypeScript) e o registra no Módulo de aplicativo automaticamente:
Nota: No Angular, precisamos registrar todos os serviços, componentes e módulos necessários em um arquivo de módulo.
Agora, vamos dar uma olhada no modelo de componente (arquivo de componente TypeScript):
Esta é realmente uma classe TypeScript, mas para defini-la como um componente:
- Primeiro de tudo, precisamos importar Componente de @ angular / núcleo biblioteca, para que possamos usar o decorador de componentes
- o @Componente decorador marca a classe como um componente e nos permite adicionar os seguintes metadados
- o seletor é para chamar o componente posteriormente como uma tag HTML:
- TemplateUrl é o caminho onde está a Visualização HTML do componente.
- SURLs tyle (pode ser maior que 1) é onde estão os arquivos de estilo do componente.
- Finalmente, nós exportação a classe (componente) para que possamos chamá-lo dentro do app.module ou outros lugares no projeto posteriormente.
O que é interpolação de string?
Uma das perguntas mais feitas no Angular é o que é essa sintaxe de chaves. Os componentes renderizam dados, mas os dados podem mudar com o tempo, portanto, ele precisa ser dinâmico.
Usamos chaves dentro de outras chaves para renderizar dados dinâmicos: {{ data }} e essa representação é chamada de interpolação de cadeias. Você pode ver o exemplo na versão em vídeo acima.
Embrulhar
Uma das maiores etapas do aprendizado do Angular é saber como criar componentes e usá-los com eficiência. Eu espero que você ache este post útil. Na próxima parte, veremos as diretivas angulares como ng-if, ng-for, ng-class e muito mais. Fique ligado 🙂
Se você quiser saber mais sobre Desenvolvimento Web, sinta-se livre para siga-me no Youtube!
Obrigado pela leitura!