Aplicando o CSS Grid Layout no Angular
Neste artigo, irei fazer um exemplo simples de como aplicar o layout css-grid em uma aplicação Angular. Bem, antes de mais nada, eu por exemplo, sempre prefiro gerar a minha folha de estilo antes de colocar na aplicação final, ou seja, um template estático.
Bom, até aí tudo bem, sempre que faço meu layout css-grid procuro trabalhar com a base do HTML5 e utilizar as “tag” default do HTML, principalmente para desenhar a base da aplicação, ou seja, aonde os conteúdos irão ser apresentados e tudo mais. Porém, me deparei com um pequeno detalhe quando implantei a folha de estilos no Angular 7+.
No link abaixo, é possível baixar um exemplo bem simples de layout utilizando o css-grid:
As áreas definidas no css, serão:
Se você copiar o css para dentro de uma aplicação Angular e componentizar ela, separando o header, corpo e rodapé o layout irá quebrar O.o What??. Sim! Isso acontece por que, mesmo definindo o “grid-area” o layout-grid trabalha sempre com a base “first-child”, ou seja, a primeira tag que tiver após a definição da área principal.
HTML Puro:
HTML Gerado pelo Angular:
Como a ideia da componentização é “quebrar” a aplicação em várias camadas e reutilizar os componentes ou até mesmo para separar e deixar a aplicação com um código mais limpo, diferente do ReactJS o Angular gera uma tag do próprio componente(como as imagens acima), ou seja, o código que está dentro componente é encapsulado dentro de uma tag principal, gerado pelo Angular e por isso ele acaba quebrando o seu layout. Já no ReacJS isso não acontece, ele simplesmente, não cria essa tag “intermediária” entre o componente principal e seus filhos.
Pois bem, a solução para resolver este detalhe e manter o seu template o mais fiel possível com o aplicado no Angular, é aplicar o nome do componente com o id/tag do css, ou seja, a tag original terá que ser substituída pelo componente ou também aplicar a classe direto na chamada do component caso trabalhar com class. Exemplo no angular:
HTML Original(A tag main, é o próprio componente):
Como normalmente o css-grid é apenas aplicado para a fazer a estrutura da página não vejo problema em nomear o componente desta forma. No arquivo “angular.json”, apagar a configuração do “prefix”, por padrão está vem com o valor “app”. Esta opção, faz com que quando você criar um componente a partir do Angular CLI “ng g c meu_componente”, ele não gere o componente com o ID, “app.meu_componente”.
Configurando a geração dos componentes:
No final, a estrutura ficou próxima ao arquivo html original:
HTML Original:
Os exemplos completos podem ser encontrados no meu repositório do GitHub:
Referências:
