Diretivas

São instruções que modificam o comportamento ou a aparência de elementos DOM.

Diretivas Estruturais

Alteram a estrutura do DOM adicionando ou removendo elementos.

*ngIf

Altera fisicamente o elemento do DOM quando a condição é falsa.

<div *ngIf="usuarioLogado">
  Painel do Usuário
</div>
 
<div *ngIf="usuarioLogado; else loginBlock">
  Bem-vindo
</div>
 
<ng-template #loginBlock>
  <button>Fazer Login</button>
</ng-template>

*ngFor

Itera sobre uma lista e instancia o template uma vez para cada item.

<ul>
  <li *ngFor="let item of itens; let i = index; let isPar = even">
    {{ i }} - {{ item.nome }} (É par? {{ isPar }})
  </li>
</ul>

Combinando Diretivas Estruturais

Para combinar duas diretivas estruturais no mesmo elemento (ex: *ngIf e *ngFor no mesmo div). É necessário usar <ng-container>:

<ng-container *ngIf="carregado">
  <div *ngFor="let item of lista">
    {{ item }}
  </div>
</ng-container>

Diretivas de Atributo

Modifica a aparência ou comportamento de um elemento existente.

[ngClass]

Adiciona ou remove classes CSS dinamicamente com base em expressões booleanas.

Sintaxe de Objeto: A chave é o nome da classe CSS e o valor é o booleano.

<div [ngClass]="{'text-danger': isErro, 'font-bold': isImportante}">
  Mensagem do Sistema
</div>

[ngStyle]

Aplica estilos CSS inline dinamicamente. Útil para estilos que dependem de valores calculados em tempo de execução.

Sintaxe de Objeto: A chave é a propriedade CSS e o valor é o valor dinâmico.

<div [ngStyle]="{'color': corTexto, 'font-size': tamanhoFonte + 'px'}">
  Texto estilizado
</div>
 
<!-- Exemplo com condicionais -->
<p [ngStyle]="{'background-color': temperatura > 30 ? 'red' : 'blue'}">
  Temperatura: {{ temperatura }}°C
</p>