Diretivas no Angular

Quando falamos de Front-end, Angular, React e Vue são nomes que são geralmente citados no tocante ao Desenvolvimento Web com Javascript. Dentre eles, o Angular é o mais antigo, sendo utilizado amplamente até hoje em muitos projetos e empresas, por sua escalabilidade e alta capacidade de componentização.

Neste artigo, subiremos mais um degrau na nossa escalada para aprender todos os conceitos básicos do Angular (já demos o primeiro passo e, se você ainda não viu, clique aqui para ser direcionado para o primeiro artigo), focando em explicar o que são diretivas e o que algumas delas nos proporciona.

Vamos lá?

O que é o Angular?

O Angular é uma plataforma de aplicações web lançada em 2012, com o objetivo de facilitar o desenvolvimento com a linguagem Javascript, sem que fosse exigido um nível de complexidade considerável para para construir páginas dinâmicas em aplicações web.

Focado na arquitetura Model-View-Controller (MVC), o Angular divide uma determinada aplicação em três blocos principais:

• Model - Responsável por receber as solicitações recebidas e realizar o seu gerenciamento (Angular);
• View - Exibição das informações processadas(HTML);
• Controller - Interage com os comandos repassados e se relaciona diretamente com a primeira camada citada (Javascript).

Já deu pra notar que o Angular conta com uma estrutura muito bem organizada e pré estabelecida para cada componente criado, não é? A seguir, programaremos juntos para criar o projeto que iremos praticar os conceitos de diretivas.

Primeiros passos

Caso você ainda não possua o Angular instalado na sua máquina, digite o seguinte código no seu terminal:

npm install -g @angular/cli

Agora que já temos o Angular devidamente habilitado para o trabalho, utilizaremos o comando a seguir para criar um novo projeto:

ng new diretivas-angular

OBS - Utilizamos para a instalação e criação de projetos o npm como ferramenta de gerenciamento de pacotes, mas escolha qual você achar melhor, visto que em nada irá atrapalhar no nosso desenvolvimento, contanto que seja instalado corretamente. Lembre-se também que, a todo momento, é importante andar com a documentação debaixo do braço, para tirar qualquer dúvida que possa aparecer!

Execute o comando “npm start” em um terminal aberto na raiz do projeto criado para que ele seja executado no seu browser. Se tudo deu certo com a criação do projeto, será gerado no seu terminal uma url que, ao clicar nela, você será redirecionado para a seguinte página:

Uma vez criada toda a estrutura do nosso projeto, vamos adiante!

Diretivas

Uma diretiva é uma função que é executada toda vez que o Angular é compilado. Elas são utilizadas dentro dos elementos HTML, aprimorando o dinamismo do nosso código e implementando comportamentos que, caso ela não existisse, viria a requerer um pouco mais de complexidade de código. Hoje, entenderemos duas diretivas estruturais e duas de atributos.

Diretivas estruturais

As diretivas estruturais mudam diretamente a estrutura do DOM. Dentre as principais, existem o “NgIf” e “NgFor” que, como o nome já sugere, desempenham a mesma funcionalidade de uma estrutura “if” de condição e uma estrutura “for” de repetição, respectivamente.

Antes de mais nada, vamos limpar todo nosso projeto de dados desnecessários:

Agora que está tudo pronto, chegou a hora de criar um componente do qual iremos praticar a primeira diretiva: o NgIf. Em um terminal aberto na pasta raiz do projeto, criaremos este componente com o seguinte comando:

ng generate component condition

Ao executar este código, você perceberá que, dentro do diretório app, foi criado um novo diretório chamado “condition”. Tudo o que está em seu interior forma o componente criado. Lembre-se de implementá-lo no componente principal App, pois, caso contrário, ele não será renderizado:

Agora, vamos imaginar que queremos fazer renderizações diferentes na tela, de acordo com um determinado dado que estará armazenado na classe do componente “Condition”. Este dado será um atributo do tipo string chamado “name” e, além dele, também criaremos um atributo do tipo lista chamado “images”, que será uma lista com dois endereços de imagens:

Precisamos fazer uma lógica com o uso da diretiva NgIf onde, caso “name” esteja vazio, será renderizada a imagem referente à segunda posição do array. Caso contrário, renderizamos a imagem referenciada no primeiro item da lista, juntamente com o valor de “name”. Para tal, criaremos dois elementos HTML: o primeiro será uma div, que terá o nome e imagem de um humano. A segunda será um elemento ng-template, que terá a imagem de um animal.

No primeiro componente div, implementamos a propriedade “*ngIf”. O valor desta propriedade é uma string com duas condições separadas por ponto e vírgula: a primeira, caso verdadeira, renderiza a div em questão; a segunda renderiza o nosso “ng-template”, caso a condição seja falsa:

OBS - Caso o NgIf seja utilizado apenas para renderizar ou não um determinado elemento, você não precisa utilizar o “else”. Basta inserir a condição esperada como valor da propriedade “*ngIf”:

De forma tão prática quanto o “NgIf”, o “NgFor” permite que seja renderizado um elemento para cada item de uma determinada lista. Para isto, criaremos um componente chamado “repetition” e, em sua classe, uma lista de objetos:

É agora que a mágica acontece: No arquivo HTML, assim como fizemos com a diretiva NgIf, implementamos o NgFor. Seu valor será uma string com a estrutura “let item of list”, onde “item” será o nome que daremos a cada elemento dentro da lista que será percorrido e “list” é o nome do atributo que possui esta lista de objetos. A partir daí, seguimos da mesma forma que ao utilizar um laço For:

Diretivas de atributos

Enquanto as Diretivas estruturais mexem diretamente com a estrutura do DOM, as diretivas de atributos manipulam a aparência dos elementos do DOM. Desta forma, é possível alterar o estilo dos elementos. Como exemplo de Diretivas de atributos, utilizaremos o NgStyle e o NgClass.

A diretiva NgStyle permite que possamos alterar diretamente um determinado atributo CSS de um elemento. Diferente das diretivas estruturais que utilizamos no tópico anterior, implementamos esta diretiva entre colchetes ao invés de utilizar o prefixo “*” antes dela. Veja o exemplo abaixo:

Note que, para que seja um valor aceito pela propriedade “ngStyle”, utilizamos uma string com colchetes e conjunto chave-valor, tal qual estivéssemos fazendo se fossemos criar um objeto. Inclusive, você deve estar se perguntando o porquê de utilizar esta diretiva, se simplesmente seria mais prático aplicar uma classe a esta div com todos estes atributos. A resposta para seu questionamento é que podemos atribuir valores dinâmicos a estes atributos css que estão sendo detalhados dentro do “NgStyle”:

De forma análoga a como se implementa a diretiva NgStyle, também seguimos para implementar o NgClass. A diferença é que o valor desta diretiva será o nome de uma classe pré estabelecida no documento Css do componente em questão:

OBS - É muito importante entender a importância de fazer com que determinados valores que são exibidos ou utilizados para definições sejam armazenados na classe de um componente, ao invés de ser um valor fixo pré definido dentro do arquivo HTML. Com o advento da criação de eventos (que será um conhecimento adquirido nos artigos posteriores), aprenderemos a manipular esses atributos, de forma que, de fato, tudo se torne dinâmico e facilmente alterável.

Considerações finais

No artigo de hoje aprendemos o que são diretivas e conhecemos algumas dentre as que são concedidas pelo Angular, divididas entre diretivas estruturais e de atributo. Continuaremos nos artigos posteriores trabalhando o Angular, de forma que sejam abordados mais conceitos viscerais para a programação com o mesmo. Lembre-se que existem várias diretivas e que você pode aprender mais sobre elas consultando a documentação do Angular.

Se você achou esse artigo interessante, gostaria de tirar quaisquer dúvidas ou somente está afim de trocar uma ideia sobre esses e mais assuntos, você também pode entrar em contato comigo, seja por meio do e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do Linkedin!

Te espero ansiosamente!