Jornada Frontend

O que são Diretivas Angular?

Colocando em simples palavras, são instruções no DOM.

Um exemplo é quando colocamos o seletor de nosso componente, nós estamos instruindo o Angular a adicionar o conteúdo do componente no local.

Como já vimos antes, as diretivas do Angular também usam um decorator para eles “@Directive” e temos três tipos de diretivas no Angular.

  • Component Directives, são os usados na classe principal do componente. Eles contém as informações de como o componente será processado, instanciado e usado.
  • Attribute Directives, são usados para mudar o estilo e comportamento dos elementos do DOM. Temos algumas pré-construídas como “ngClass” e “ngStyle”.
  • Structural Directives, aqui é onde mudamos e manipulamos as estruturas dos elementos do DOM. São usados o operador “*” e também temos algumas pré-construídas como o “*ngIf” e “*ngFor”.

Não podemos esquecer que podemos criar nossas próprias diretivas como vimos no post anterior.

O ngIf

O “ngIf” é uma condicional para adicionar ou remover algo do DOM. É muito parecido com o “If” padrão.

Usamos o elemento que queremos adicionar como atributo para o “ngIf” e não devemos esquecer do “*”.

Podemos usar expressão que possa retornar “true” ou “false”.

Vamos usar um exemplo onde um item do menu só é mostrado caso o usuário esteja logado.

Com o “ngIf” podemos avaliar se devemos ou não adicionar a o item do menu baseado se é “true” ou “false”.

Podemos olhar no browser que o item do menu não está aparecendo, pois o valor dele é “false”, mas caso seja alterado na mão ou de alguma outra forma para “true” vamos ver o item na tela.

O ngIf com else

O Angular nos dá a possibilidade de colocar um “else” em nosso “ngIf”.

Como vamos ver no código, devemos separar as condições com um “;”.

O “localReference” é como um item que podemos adicionar a diretiva “ng-template”.

E não devemos esquecer de colocar o operador “#”.

Vamos continuar usando o mesmo exemplo do anterior, porém agora ao não estar logado, vamos ver um outro item na tela.

Você pode fazer os testes e mudar para “true” e ver as mudanças no browser.

Diretiva ngFor

Aqui temos um loop de elementos com um “for of”, usamos o “ngFor”.

Como exemplo, vamos fazer uma lista de filmes e mostrar na tela.

1 – Vamos criar nossa lista como os valores que serão os filmes em si, mas para fins de estudo e facilitar, vamos criar na mão ela, mas podendo ser consumida de outros locais sem problemas.

Criamos um array de string com os valores para deixar mais simples as coisas.

2 – Agora vamos criar o “ngFor” para mostrar em tela o que queremos.

  • Vamos criar uma variável temporária para segurar o valor. No nosso exemplo essa variável será chamada de “filme”.
  • Agora no “of” vamos falar qual array ou lista será iterada. Em nosso caso será o “filmesFavoritos” que definimos em nossa classe.
  • Agora vamos usar a variável “filme” dentro do nosso elemento como data binding e assim mostrar em tela.

Se rodarmos esse exemplo no browser, vamos ver a lista completa com todos os filmes da nossa lista.

Podemos também ver o número de elementos de nossa lista com outra variável com o nome de index.

Diretiva ngStyle

Essa é uma diretiva que muda o CSS dos elementos dinamicamente, não adicionar elementos no DOM como outras diretivas e sim mudar as já existentes.

Um exemplo:

Vamos mudar a cor de fundo, da fonte e adicionar um padding em nosso parágrafo.

Diretiva ngClass

Aqui trabalhamos adicionando e removendo classes css e assim mudando dinamicamente a view.

Assim como o ngStyle a sintaxe é muito parecida:

Vamos fazer um exemplo onde mudamos para verde o nome do usuário que está online.

Agora vamos criar uma variável e para continuar tudo de forma simples, já vamos passar como true o valor.

A condição será verificar se o valor é “true” ou “false”.

Como podemos ver é bem simples e dá para fazer “n” coisas adicionando e removendo classes dinamicamente.

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Fruto de mais de 7 anos estudando e trabalhando com Front-end, a "Jornada Front-end - O Guia Definitivo" é um manual completo para todos que querem subir em suas carreiras do zero ou subir do seu nível atual.

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Share This