[CONTEÚDO] O que são e para o que servem as diretivas do angular? · danielxlves

O que é?
O conceito de diretivas no Angular engloba as funcionalidades que são acionadas automaticamente, quando o compilador do Angular detecta no código funções pré-programadas pelo framework (as diretivas). Estas diretrizes expandem as possibilidades de dinamicidade dos elementos HTML de forma facilitada, assim permitindo a associação de comportamentos personalizados ao DOM.

Para o que serve?
Com as diretivas, você pode adicionar lógica dinâmica, manipular eventos, controlar a visibilidade de elementos, modificar o estilo e até mesmo criar componentes totalmente personalizados. Elas são funções essenciais, ricas em recursos e de fácil uso do desenvolvedor.

Diretivas comuns e suas funcionalidades:
1- ngIf -> Esta diretiva permite mostrar ou ocultar elementos HTML com base em uma expressão condicional.

component.ts //nome do arquivo
(...)
export class component {
mostrarMensagem:boolean = true
}

component.html //nome do arquivo
<p *ngIf="mostrarMensagem">
Esta mensagem será exibida se mostrarMensagem for verdadeiro.
</p>

2- ngFor: Use esta diretiva para iterar sobre uma lista e criar elementos repetidos.

component.ts //nome do arquivo
(...)
export class component {
listaItens:string[] = ["biscoito", "bolacha", "morango"]
}

component.html //nome do arquivo

<ul>
  <li *ngFor="let item of listaItens">{{ item }}</li>
</ul>

3- ngSwitch: Ela permite alternar entre diferentes blocos de conteúdo com base em uma condição.

component.ts //nome do arquivo
(...)
export class component {
condicao:string = "caso1"
}

component.html //nome do arquivo
<div [ngSwitch]="condicao">
   <p *ngSwitchCase="'caso1'">Conteúdo para o Caso 1</p> 
   <p *ngSwitchCase="'caso2'">Conteúdo para o Caso 2</p>
   <p *ngSwitchDefault>Conteúdo padrão</p>
</div>  
OBS: ngSwitchDefault é o caso padrão quando nenhuma das condições são verdadeiras.

4- ngClass: Use esta diretiva para aplicar classes CSS com base em condições.

component.css //nome do arquivo
.ativo{
    color: blue;
}

component.ts //nome do arquivo
(...)
export class component {
classe:string = "ativo" //nome da classe vinculada ao css do componente
}

component.html //nome do arquivo
<div [ngClass]="{'classe': ativo}">
   Este elemento terá a classe 'classe-ativa' se ativo for verdadeiro.
</div>

5- ngStyle: Ela permite aplicar estilos CSS com base em valores de propriedades dinâmicas.

component.ts //nome do arquivo
(...)
export class component {
tamanhoFonte:number = 15
corText:string = "blue"
}

component.html //nome do arquivo
<p [ngStyle]="{'font-size': tamanhoFonte + 'px', 'color': corTexto}">
 Este parágrafo terá seu tamanho de fonte e cor do texto definidos dinamicamente.
</p>

6- ngModel: Essa diretiva é usada para vincular elementos de formulário a variáveis do modelo.

component.ts //nome do arquivo
(...)
export class component {
nome:string = ''
}

component.html //nome do arquivo
<input [(ngModel)]="nome" placeholder="Seu Nome"> 
<p>{{nome}}</p> //aqui você visualiza o que está sendo atribuido na variavel "nome".

Conclusão

Em resumo, as diretivas são uma característica poderosa do Angular que desempenham um papel crucial na criação de aplicativos da web interativos e dinâmicos, tornando o desenvolvimento mais eficiente e flexível. Elas permitem que você manipule o DOM de maneira programática e personalizada, adaptando a experiência do usuário de acordo com a lógica de seu aplicativo.