Diretivas estruturais vs diretivas de atributo: Qual usar no Angular?

Introdução

👋😁Olá, pessoal! Hoje vamos falar sobre um assunto muito interessante: as diretivas no Angular. Mas o que são diretivas? Bem, pense nelas como instruções mágicas que você dá para o seu código, para que ele possa fazer coisas incríveis na tela do seu computador ou celular.

Agora, existem dois tipos principais de diretivas: as diretivas estruturais e as diretivas de atributos. Vamos começar pelas diretivas estruturais. Elas são como um superpoder que permite ao Angular alterar a estrutura do HTML, ou seja, como os elementos são organizados na página.

Um exemplo de diretiva estrutural muito útil é o *ngIf. Com ela, você pode dizer ao Angular para mostrar ou esconder um elemento na tela, dependendo de uma condição. Por exemplo, imagine que você tem um botão e quer que ele apareça apenas se o usuário estiver logado. Com o *ngIf, você pode fazer isso de forma bem simples.

<button *ngIf="isLoggedIn">Botão de Logout</button>

Nesse exemplo, suponha que você tenha uma variável chamada isLoggedIn no seu componente que indica se o usuário está logado ou não. Com a diretiva *ngIf, o botão "Botão de Logout" será mostrado na tela somente quando a condição isLoggedIn for verdadeira, ou seja, quando o usuário estiver logado.

Exemplos de Diretivas estruturais

• *ngIf: Mostra ou esconde elementos com base em uma condição booleana.
• *ngFor: Repete elementos em uma lista com base em uma coleção de dados.
• *ngSwitch: Permite alternar entre diferentes elementos com base em uma expressão.
• *ngContainer: Cria um contêiner lógico para agrupar elementos sem adicionar elementos adicionais no DOM.

Agora, vamos falar sobre as diretivas de atributos. Elas também são superpoderosas! Essas diretivas permitem que você adicione ou modifique atributos nos elementos HTML. Por exemplo, com a diretiva [ngClass], você pode mudar a classe de um elemento com base em uma condição. Isso é ótimo para deixar o seu site ou aplicativo mais dinâmico e interativo.

Outra diretiva de atributo interessante é a [ngStyle]. Com ela, você pode modificar o estilo de um elemento diretamente no código. Por exemplo, se você quer mudar a cor de um botão quando o usuário clica nele, a diretiva [ngStyle] é perfeita para isso.

<button [ngClass]="{'active': isActive, 'disabled': isDisabled}">Botão</button>

Nesse exemplo, suponha que você tenha duas variáveis no seu componente: isActive e isDisabled. Com a diretiva [ngClass], você pode adicionar ou remover classes CSS do botão com base nas condições dessas variáveis.

Exemplos de Diretivas de Atributos

• [ngClass]: Permite adicionar ou remover classes CSS em um elemento com base em uma condição.
• [ngStyle]: Permite definir estilos CSS diretamente em um elemento com base em uma expressão.
• [ngModel]: Vincula um elemento de entrada de dados (input) a uma propriedade do componente.

👌Curtiu esse conteúdo ? Ele foi gerado por inteligência artificial, mas foi revisado por alguém 100% Humano, e se quiser se conectar comigo, me siga no Linkedin

⚒️Ferrramentas de produção:

Imagens geradas por: I.A. lexica.art

Editor de imagem: Power Point

Conteúdo gerado por: ChatGPT 

Revisões Humanas: Felipe Aguiar

#Angular #Diretivas #Frontend