Olá pessoal, na décima aula do treinamento de Angular 20, iremos compreender o uso de diretivas.
Diretivas são comandos para deixar nossas páginas HTML mais dinâmicas. Boa parte das diretivas precisam ter o CommonModule importado no arquivo .ts!
Mudanças a partir da versão 20 do Angular!
Algumas diretivas estão depreciadas a partir da versão 20 do framework, sendo elas:
Utilize os Controles de Fluxo para suprir o uso das diretivas acima.
De acordo com o site oficial do Angular, provavelmente na versão 22 do framework não será possível utilizar as três diretivas citadas.
Conheça as diretivas que temos no Angular:
| Diretiva | Tipo | Descrição | Exemplo |
|---|---|---|---|
| *ngIf | Estrutural | Renderiza ou remove um elemento com base em uma expressão booleana. | <div *ngIf="isLoggedIn">Bem-vindo!</div> |
| *ngFor | Estrutural | Repete um elemento para cada item de uma lista. | <li *ngFor="let item of items">{{item}}</li> |
| *ngSwitch | Estrutural | Alterna a renderização de elementos com base em um valor. |
<div [ngSwitch]="role">
|
| [ngClass] | Atributo | Adiciona ou remove classes CSS dinamicamente. | <div [ngClass]="{'ativo': isActive}"></div> |
| [ngStyle] | Atributo | Aplica estilos inline dinamicamente. | <div [ngStyle]="{'color': color}"></div> |
| [(ngModel)] | Atributo (Forms) | Diretiva de two-way data binding usada em formulários. | <input [(ngModel)]="username"> |
| ng-container | Estrutural | Container lógico sem renderizar elemento no DOM; útil com diretivas. | <ng-container *ngIf="cond">Texto</ng-container> |
| ng-template | Estrutural | Define um bloco de template que pode ser instanciado sob demanda. | <ng-template #tpl>Olá!</ng-template> |
| ng-content | Estrutural (projeção) | Marca onde o conteúdo externo será injetado dentro de um componente. | <ng-content></ng-content> |
Abaixo compartilho o vídeo dessa aula no YouTube: