O que são e para o que servem as diretivas do angular?

#Angular

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.

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 sobre as diretivas

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.