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 “*”.

<elemento *ngIf="expressao">Elemento que queremos adicionar.</elemento>

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.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  public estaLogado:boolean = false;
}

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

<ul>
  <li>Item para todos se estiver logado ou não</li>
  <li> Item para todos se estiver logado ou não </li>
  <li *ngIf="estaLogado">Somente se estiver logado</li>
</ul>

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 “;”.

<elemento *ngIf="expressao; else localReference">Elemento que queremos adicionar</elemento>

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

<ng-template #localReference>
  Código html
<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.

<ul>
  <li>Item para todos se estiver logado ou não</li>
  <li> Item para todos se estiver logado ou não </li>
  <li *ngIf="estaLogado; else naoEstaLogado">Somente se estiver logado</li>
</ul>
 
<ng-template #naoEstaLogado >
  <p>Você não está logado</p>
</ng-template>

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”.

<elemento *ngFor="let tempItem of List">
{{ tempItem }}
</elemento>

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.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  public filmesFavoritos= [
    'Superbad',
    'Duna',
    'Batman',
    'Exterminador do Futuro'
  ];
}

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.

<h3>Top filmes:</h3>
<ul>
  <li *ngFor="let filme of filmesFavoritos ">{{ filme }}</li>
</ul>

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.

<elemento *ngFor="let tempItem of List; let tempIndex = index">
  // use {{ tempIndex }} and/or {{ tempItem }}
</elemento>

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.

<elemento [ngStyle]="{ 'propriedade-css': 'valor' }"> </elemento>

Um exemplo:

<p [ngStyle]="{
  'background-color': '#f4f4f4,
  'color': '#red,
  'padding': '.5rem'
}">Lorem ipsum</p>

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:

<elemento [ngClass]="{ 'classe-css': condicao}"> </elemento>

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

.online {
  color: green
}

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

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  public estaOnline= true;
}

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

<p [ngClass]="{ 'online': estaOnline}">Username</p>

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