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

DESAFIO - Criando Artigo Técnicos com ChatGPT e Lexica.art

LINKEDIN

Criar um chatgpt interativo com qualidades tecnicas para fazer uma estrutura de articos de qualidades.

Criando artigos épicos e éticos

Criar de maneira ética e elegante que te ajude a fazer de um jeito certo

CHECKLIST DE PARA GERAR ARTIGOS DE QUALIDADE

• [x] 1 - Definir o assunto e blocos de artigo
• [x] 2 - Título chamativo: headline
• [x] 3 - Imagem de capa chamativa
• [x] 4 - Blocos do artigo
• [x] 5 - Postar o artigo com um call to action

Criando Capas Profissionais

Capa:

• Feita com Lexica.Art e Power Point ou Figma

Prompts ricos para gerar artigos

Blocos

• O que são diretivas no Angular
• O que são diretivas no estruturais
• Cite exemplos com código de diretivas estruturais
• O que são diretivas de atributos
• Cite exemplos com código de diretivas de atributos
• Faça um call to action para as minhas redes sociais
• Coloque 3 hashtags que façam sentido

{ REGRAS }

• No máximo 5 linhas por blocos de explicação
• Me explique de maneira informal, como se eu fosse uma criança de 10 anos
• Os blocos que serão criados estão abaixo:
• O que são diretivas no Angular
• O que são diretivas no estruturais
• Cite exemplos com código de diretivas estruturais
• O que são diretivas de atributos
• Cite exemplos com código de diretivas atributos
• Faça um call to action para as minhas redes sociais
• Coloque 3 hashtags que façam sentido

Blocos do artigos

Com os Prompts ricos gerando codigos modifique a seu favor o artigo para deixar mais humano possivel o texto gerado pelo ChatGPT!

🔹 Diretivas estruturais do Angular

Pense nas diretivas como pequenas instruções que você dá para o HTML. Elas dizem ao Angular: “faça alguma coisa diferente aqui!”. Por exemplo, mostrar um elemento, esconder ou mudar sua aparência. É como dar um “superpoder” para uma tag HTML! 🦸

• If — Mostra ou remove um elemento da página dependendo de uma condição (true ou false).
• For — Repete um elemento várias vezes, geralmente percorrendo uma lista.
• Switch — Escolhe qual conteúdo mostrar de acordo com um determinado valor.
• @if — Sintaxe moderna do Angular para mostrar conteúdo quando uma condição é verdadeira.
• @for — Sintaxe moderna para repetir elementos enquanto percorre uma lista.
• @switch — Sintaxe moderna para escolher diferentes blocos de conteúdo conforme um valor.

🔹 Diretivas estruturais ?

As diretivas estruturais mudam a estrutura da página. Elas podem criar, remover ou repetir elementos HTML.

Antigamente, exemplos muito comuns eram *ngIf e *ngFor. Nas versões atuais do Angular, também existem as novas sintaxes @if e @for.

Exemplos:

Crie um código Angular de exemplo de explicação abaixo: 
<!-- Mostra o elemento somente se logado for verdadeiro -->
<div If="logado">
Bem-vindo!
</div>

<!-- Repete o elemento para cada item da lista -->
<li For="let produto of produtos">
{{ produto.nome }}
</li>

Claro. Vamos transformar esse exemplo em um mini projeto Angular completo, para você entender exatamente de onde vêm logado e produtos.

1. app.component.ts

Aqui criamos os dados que o HTML vai utilizar:

<h1>Minha loja</h1>

<!-- Só aparece se logado for true -->
<div If="logado">
<p>Bem-vindo!</p>
</div>

<h2>Produtos:</h2>

<ul>
<!-- Cria um <li> para cada produto -->
<li For="let produto of produtos">
  {{ produto.nome }}
</li>
</ul>

2. app.component.html

Agora usamos as diretivas estruturais:

<h1>Minha loja</h1>

<!-- Só aparece se logado for true -->
<div If="logado">
<p>Bem-vindo!</p>
</div>

<h2>Produtos:</h2>

<ul>
<!-- Cria um <li> para cada produto -->
<li For="let produto of produtos">
  {{ produto.nome }}
</li>
</ul>

🧠 O que está acontecendo?

• If="logado" pergunta: “O usuário está logado?”
• Se logado for true, o Angular mostra o <div>.
• Já For percorre a lista produtos e cria um <li> para cada produto.
• É como dizer: “Angular, faça uma linha para cada produto!” 😄

⚠️ Observação importante

Em Angular moderno, você também pode escrever isso usando a nova sintaxe de controle:

@if (logado) {
<p>Bem-vindo!</p>
}

<ul>
@for (produto of produtos; track produto.nome) {
  <li>{{ produto.nome }}</li>
}
</ul>

Ou seja, *ngIf e *ngFor são exemplos clássicos de diretivas estruturais, enquanto @if e @for são a sintaxe moderna de controle de fluxo do Angular.

🔹 O que são diretivas estruturais do Angular ?

• ngIf — Mostra ou remove um elemento da página dependendo de uma condição (true ou false).
• ngFor — Repete um elemento várias vezes, geralmente percorrendo uma lista.
• ngSwitch — Escolhe qual conteúdo mostrar de acordo com um determinado valor.
• @if — Sintaxe moderna do Angular para mostrar conteúdo quando uma condição é verdadeira.
• @for — Sintaxe moderna para repetir elementos enquanto percorre uma lista.
• @switch — Sintaxe moderna para escolher diferentes blocos de conteúdo conforme um valor.

Diretivas de atributos ?

As diretivas de atributos não criam nem removem elementos. Elas mudam o jeito que um elemento existente se comporta ou aparece. É como trocar a roupa de um personagem sem tirar o personagem do jogo. 😄

Exemplos:

<!-- Altera uma classe CSS --> 
<div [ngClass]="{ 'ativo': estaAtivo }"> 
Usuário 
</div> 

<!-- Altera estilos diretamente --> 
<div [ngStyle]="{ 'font-size': tamanho + 'px' }"> 
Texto 
</div>

1. Diretiva ngClass

Imagine que temos um usuário que pode estar ativo ou inativo.

No app.component.ts:

export class AppComponent { estaAtivo = true; }

No HTML:

<div [ngClass]="{ 'ativo': estaAtivo }"> Usuário </div>

👉 Se estaAtivo for true, o Angular coloca a classe CSS ativo.

.ativo { 
color: green; 
font-weight: bold; 
}

É como dizer: “Angular, se estiver ativo, coloque essa roupa no usuário!”👕

2. Diretiva ngStyle

Agora vamos controlar diretamente o tamanho do texto.

No app.component.ts:

export class AppComponent { 
tamanho = 30; 
}

No HTML:

<div [ngStyle]="{ 'font-size': tamanho + 'px' }"> 
Texto 
</div>

👉 O Angular pega tamanho, junta com px e aplica no font-size.

Se tamanho = 30, o resultado será:

font-size: 30px;

É como dizer: “Angular, deixe esse texto com 30 pixels!”📏

Questões Reformulada

Questões “Reformuladas oque são diretivas estruturais ?"

Crie um código Angular de exemplo de explicação abaixo: 
<!-- Mostra o elemento somente se logado for verdadeiro --> 
<div *ngIf="logado">
 Bem-vindo!
</div>

<!-- Repete o elemento para cada item da lista -->
<li *ngFor="let produto of produtos">
 {{ produto.nome }}
</li>

Claro. Vamos transformar esse exemplo em um mini projeto Angular completo, para você entender exatamente de onde vêm logado e produtos.

EXEMPLO

app.component.ts

Aqui criamos os dados que o HTML vai utilizar:

import { Component } from '@angular/core'; 

@Component({ 
selector: 'app-root', 
templateUrl: './app.component.html' 
}) 
export class AppComponent { 
// Define se o usuário está logado 
logado = true; 

// Lista de produtos produtos = [ 
  { nome: 'Notebook' }, 
  { nome: 'Mouse' }, 
  { nome: 'Teclado' }, 
  { nome: 'Monitor' } 
]; 
 }

📢 Conclusão, quer aprender mais ?

Se essa explicação te ajudou, acompanhe minhas redes sociais! Lá você pode encontrar mais conteúdos sobre Angular, Front-End e programação. Curta, compartilhe e siga para não perder os próximos conteúdos! 🚀

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!

#Angular #Frontend #Programação

LINKEDIN