07 Diretivas Estruturais 1/2
Nessa etapa dos nossos estudos falaremos sobre um assunto de extrema importância para quem pretende aprender Angular: as diretivas. No artigo anterior falamos sobre as Diretivas de Atributo e criamos nossa própria diretiva. Agora nesse artigo veremos as Diretivas Estruturais *ngfor e *ngIf com um exemplo simples e prático.
O primeiro passo que precisamos dar para termos acesso as diretivas estruturais que o Angular nos fornece é importar no nosso arquivo app.module.ts o módulo CommonModule.
NgIf
A diretiva estrutural *ngIf é uma forma de adicionar uma condicional em uma elemento do nosso documento HTML para que ele seja ou não mostrado em tela baseado em uma condicional. No projeto base que viemos usando ao longo dos nossos estudos, iremos fazer alguns ajustes para podemos ver na prática como essa diretiva funciona.
No arquivo first-component.component.html delete o código existente e substitua pelo código abaixo.
No arquivo first-component.component.ts delete as funções e variáveis que havíamos criado no artigo anterior e substitua pelo código abaixo.
Rode o comando ng serve em seu terminal e de alguns cliques no botão que criamos e veja a magia acontecer! =D
NgFor
A diretiva estrutural *ngFor nos possibilita criar elementos na DOM de forma dinâmica, utilizando para isso um array com as informações que você quer imprimir em tela.
Para exemplificar iremos fazer algumas alterações no nosso first-componente novamente. Substitua o código atual pelo código baixo.
Rode o comando ng serve em seu terminal e veja o poder do Angular agindo em seu favor! =D
Nesses dois simples exemplos podemos conhecer essas duas importantes funcionalidades que são extremamente uteis e indispensáveis em projetos Angular.
Crie novas condicionais, adicione algumas lógicas, teste, debug, pratique e estude o código que criamos nesse artigo para que você consiga fixar os conhecimentos. Caso queira aprofundar os estudos, não esqueça de pesquisar na documentação oficial suas dúvidas. Bons estudos! :)
No próximo artigo falaremos sobre algumas outras diretivas que podem ser muito úteis também como ngClass, ngStyles, e … Chega de espolie! >D
