Diretivas — Angular CLI
Olá, retornando com a série de artigos sobre Angular, hoje trago algumas informações sobre o conceito de diretivas.
As diretivas são marcadores em um elemento DOM que informam ao Angular para anexar um comportamento a um elemento existente, em termos simples: elas são instruções ao DOM.
No exemplo a seguir, explico como fazer uma diretiva para deixar o fundo de uma tag na cor amarela:
Primeiro de tudo, é necessário criar a diretiva, no terminal inserir o código abaixo:
ng g d shared/fundo-amareloO angular vai criar esses dois arquivos na pasta shared
Agora, no html (de qualquer local do projeto) colocamos uma tag que receberá a diretiva responsável pela mudança de style.
No arquivo criado é necessário importar o ElementRef e o Renderer2.
Get Thamiris Adriano’s stories in your inbox
Join Medium for free to get updates from this writer.
O ElementRef possui uma propriedade chamada nativeElement, poderíamos usa-lo sozinho e dessa propriedade utilizar style dela para fazer a modificação, porém a própria documentação informa sobre os riscos e recomenda o uso somente em caso de real necessidade:
Use esta API como último recurso quando o acesso direto ao DOM for necessário. Use modelos e vinculação de dados fornecidos pelo Angular. Alternativamente, você pode dar uma olhada em Renderer2 qual fornece API que pode ser usada com segurança, mesmo quando o acesso direto a elementos nativos não é suportado.
Sendo assim, usaremos o Render2 para acessar essa variável e alterar o estilo.
Importante: Caso queiramos que apenas um tipo de tag receba a mudança do estilo, a adicionamos antes do valor inserido no selector:
Assim, somente os parágrafos do nosso html (nesse caso) terão a mudança de cor em seu background, mesmo que adicionemos a diretiva em todas as tags:
É isso, até o próximo artigo ;)
