Diretivas: Estruturais vs Atributo no Angular: Qual a Diferença?

Introdução

Oi, pessoal! Hoje vamos falar sobre um assunto super legal no mundo do desenvolvimento web: as diretivas no Angular. Se você gosta de criar páginas da web e quer aprender como torná-las mais dinâmicas e interativas, você está no lugar certo! Vamos descobrir juntos o que são diretivas, como elas funcionam e como usá-las para fazer mágica no seu código. Pronto para essa aventura? Então, vamos lá!

Diretivas

O que são diretivas no Angular

Diretivas no Angular são como pequenos ajudantes que dizem ao HTML como se comportar. Imagine que você está jogando LEGO e essas diretivas são instruções para montar suas peças de uma forma especial. Elas fazem o HTML fazer coisas legais, como mostrar ou esconder elementos, mudar cores, e muito mais.

O que são diretivas estruturais

Diretivas estruturais são como mágicas que mudam a estrutura da página. Elas podem adicionar ou remover partes do seu HTML com base em certas condições. Por exemplo, se você quiser mostrar uma mensagem apenas se um usuário estiver logado, uma diretiva estrutural pode fazer isso por você.

Exemplos com código de diretivas estruturais:

<!-- ngIf mostra o botão só se o usuário estiver logado -->
<button *ngIf="isLoggedIn">Logout</button>

O que esse código faz? Vamos imaginar que você tem um botão de "Logout" na sua página. Você só quer que esse botão apareça se o usuário estiver logado, certo? Então, usamos a diretiva ngIf para isso.

*ngIf="isLoggedIn": Este pedacinho de código diz para o Angular "Só mostre esse botão se a variável isLoggedIn for verdadeira".
<button>Logout</button>: Este é o botão que será mostrado ou escondido com base na condição acima.

Em resumo, se isLoggedIn for verdadeiro (o usuário está logado), o botão "Logout" aparece. Se for falso, o botão desaparece.

<!-- ngFor repete este bloco para cada item na lista -->
<div *ngFor="let item of items">
{{ item }}
</div>

Agora, imagine que você tem uma lista de itens e quer mostrar cada um deles na sua página. Usamos a diretiva ngFor para repetir um bloco de HTML para cada item na lista.

*ngFor="let item of items": Este pedacinho de código diz para o Angular "Pegue cada item da lista items e coloque-o na variável item, então repita o bloco de HTML para cada item".
<div>{{ item }}</div>: Este é o bloco de HTML que será repetido para cada item na lista. O {{ item }} é onde o valor do item será exibido.

Em resumo, se você tem uma lista com, digamos, três itens ["maçã", "banana", "laranja"], o ngFor vai criar três <div>, uma para cada fruta, mostrando "maçã", "banana" e "laranja".

Outros exemplos de diretivas estruturais

ngIf: Mostra ou esconde elementos com base em uma condição.
ngFor: Repete um bloco de HTML para cada item de uma lista.
ngSwitch: Exibe um elemento entre vários com base em uma expressão.
ngSwitchCase: Define um caso dentro do ngSwitch para ser exibido quando a expressão corresponder.
ngContainer: Agrupa elementos sem adicionar novos elementos DOM.

O que são diretivas de atributos

Diretivas de atributos são como maquiagens para o HTML. Elas mudam a aparência ou comportamento dos elementos, mas sem adicionar ou remover nada da estrutura. Imagine colocar uma roupa nova em uma boneca – a boneca continua a mesma, mas agora ela tem um novo visual.

Exemplos com código de diretivas de atributos

<!-- ngClass adiciona a classe 'active' se isActive for verdadeiro -->
<div [ngClass]="{'active': isActive}">Conteúdo</div>

O que esse código faz? Ele usa a diretiva ngClass para adicionar ou remover classes CSS de um elemento com base em uma condição.

ngClass="{'active': isActive}": Este pedaço de código diz para o Angular "Adicione a classe 'active' a este <div> se a variável isActive for verdadeira".
<div>Conteúdo</div>: Este é o conteúdo dentro do <div> que receberá a classe 'active' se isActive for verdadeiro.

Em resumo, se isActive for verdadeiro, o <div> terá a classe 'active', o que pode mudar sua aparência conforme definido no CSS. Se isActive for falso, a classe 'active' não será adicionada.

<!-- ngStyle muda o estilo do texto se isHighlighted for verdadeiro -->
<p [ngStyle]="{'color': isHighlighted ? 'red' : 'black'}">Texto importante</p>

O que esse código faz? Ele usa a diretiva ngStyle para adicionar ou modificar estilos CSS diretamente em um elemento com base em uma condição.

ngStyle="{'color': isHighlighted ? 'red' : 'black'}": Este pedaço de código diz para o Angular "Mude a cor do texto para 'red' se isHighlighted for verdadeiro, ou para 'black' se for falso".
<p>Texto importante</p>: Este é o parágrafo cujo estilo será alterado.

Em resumo, se isHighlighted for verdadeiro, a cor do texto do parágrafo será vermelha. Se isHighlighted for falso, a cor do texto será preta.

Outros exemplos de diretivas estruturais

ngClass: Adiciona ou remove classes CSS com base em expressões.
ngStyle: Adiciona ou modifica estilos CSS diretamente em um elemento.
ngModel: Liga dados bidirecionalmente entre um elemento de formulário e a propriedade de um modelo.
ngValue: Define o valor de um elemento de entrada com base em uma expressão.

Curtiu esse conteúdo? Ele foi gerado por inteligência artificial, mais foi revisado por alguém 100% humano.

Fontes de Produção:

Imagens geradas por: Midjourney e Lexica.art

Conteúdo gerado por: ChatGPT e revisões humanas

Hashtags

#Angular #Diretivas #FrontEnd