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.