Conteúdo
O que é e como criar um componente com Angular?
Vamos pensar da seguinte forma, um componente é composto de HTML, CSS e TypeScript que juntando tudo pode formar uma parte da aplicação e com uma reutilização incrível.
Um exemplo de componente é um menu, que pode nos levar a outras partes do site, ou mesmo uma barra de pesquisa que pega dados de outros locais.
Você consegue imaginar que podemos usar esses dois exemplos em outros locais da aplicação de forma independente, tirando a necessidade de codar a mesma coisa em diferentes partes da aplicação.
Agora vamos ver a estrutura padrão de um componente:
- HTML: É onde definimos a estrutura de um componente em relação ao browser;
- CSS: Onde colocamos o estilo do componente em si, como cor, fonte, tamanho, alinhamento e etc;
- TypeScript: Aqui é onde colocamos a lógica do componente e seu comportamento;
- Jasmin: É onde podemos testar o componente em si e ver se existem erros ou comportamentos inesperados.
Componente app-root
Até o momento sabemos que podemos criar componentes e configurar ele conforme necessário.
O “app-root” é o componente padrão do Angular e o mais básico de nossa aplicação e aqui é onde basicamente juntamos os componentes customizados.
Vamos dar uma olhada no HTML do “app-root”:
Agora, imagine que queiramos adicionar o nosso menu e nosso search bar:
Basicamente é assim que lidamos com adição dos componentes, porém não é bem a forma correta as vezes de se fazer assim, mas não vamos nos preocupar muito com isso agora, bora criar um componente.
Criando um componente
Vamos usar nossos recursos do CLI para criar um componente. Vamos usar o comando:
Como podemos reparar, podemos encurtar o comando usando ng g (de generate) e c (de componente), adicionando uma leve rapidez para criar um componente.
Agora vamos criar um componente com o nome “logo”. Vamos abrir nosso terminal e digitar o comando acima:
Foi criado uma nova pasta e novos arquivos com o nome de “logo” dentro da pasta “app” e por padrão todos os componentes serão registrados desta forma.
Se abrirmos o “app.module.ts” podemos ver que o nosso novo componente já foi registrado dentro dele.
Ao abrir o HTML e CSS podemos ver as seguintes linhas:
Agora vamos ver isso em tela, vamos adicionar ele em nosso “app.componente.html”:
Só criei um “h1” e coloquei uma “hr” para pular uma linha e ver a divisão dos componentes.
Ao olhar no browser vamos ver nosso “p” com o dizer: logo works! Em azul.
Como usar HTML e CSS inline no script do componente
Existe a possibilidade de usarmos desta forma o HTML e CSS do componente e fazemos isso dentro do arquivo “.component.ts”.
Atualmente temos linkados HTML e CSS de outros arquivos no templateUrl e no styleUrls:
Para usar inline as coisas, temos que mudar alguns campos neste código.
- Vamos mudar de templateUrl para template;
- Vamos mudar styleUrls para style.
Com as condições acima alcançadas, podemos fazer desta forma:
Podemos ver que usamos o conceito de template string para lidar com isso, também vemos que o styles usa o conceito de arrays e não podendo ser uma string simples como o template.
Agora vamos ao que interessa, devemos usar desta forma?
Em minha opinião NÃO, o Angular tem sua arquitetura e ideia prontas, ao colocar tudo em um arquivo só, deixamos tudo muito bagunçado, devemos deixar cada parte da aplicação lidar com sua responsabilidade separada.
No exemplo acima não é muito complicado de entender, porém imagina isso muito maior ou com mais estilos, fica complicado desnecessariamente.
Como deletar um componente
Até o momento não tem uma forma automática com o CLI para fazer este trabalho para nós, então só nos resta fazer manualmente.
Para fazer a deleção de um componente, devemos tirar todas as referências dele da nossa aplicação.
Até o momento temos o componente “logo” que está dentro do “src/app”, sua referência dentro do “app.module.ts” e sua tag sendo usada no app.componet.html.
1 – Vamos começar deletando a pasta logo dentro do “src/app”;
2 – Agora vamos abrir o app.module.ts;
Vamos fazer a deleção de tudo que contém o LogoComponent, no import e no declaration, nosso arquivo deve ficar parecendo com isso:
3 – E agora devemos deletar a tag que está sendo usada;
Com tudo isso feito corretamente a deleção do componente foi feita com sucesso.
Vou deixar uma dica aqui, uma aplicação grande pode ter referência do componente em muitos outros locais, porém podemos usar o “find” da IDE para procurar essas referências com mais facilidade, então use e abuse dos recursos disponíveis na própria IDE.
