08 Diretivas Estruturais 2/2
No artigo anterior falamos sobre as diretivas estruturais e demos dois exemplos das duas mais utilizadas em projetos Angulas: NgIf e NgForOf. Porem há outras diretivas prontas pra uso tão uteis quantos as duas citadas anteriormente. Vamos ver um pouco sobre mais duas diretivas e ficará desafio para você implementar as demais existentes no seu projeto. Preparado?! =D
NgClass
A diretiva NgClass serve para adicionar classes em uma tag html baseando-se em alguma condicional. Existe algumas sintaxes para sua implementação, no nosso exemplo veremos uma delas.
Vamos aproveitar o projeto que viemos utilizando nessa série de artigos. Abaixo veja o código necessário para ver em funcionamento a diretiva NgClass.
No terminal, execute o comando ng serve e veja o resultado em seu navegador.
Adicionamos a diretiva [ngClass] na tag h2 que imprime o nome do nosso usuário. A classe ‘blue-color’ que passamos dentro do objeto para a diretiva será adicionada sempre que a variável this.blueColor for true. Um exemplo simples que já exemplifica uma forma de adicionar estilos baseado em uma condicional.
NgStyle
A diretiva NgStyle nos permite adicionar uma estilização inline em uma tag específica. Podemos passar um objeto, seguindo um model específico, e adicionar uma estilização diretamente na tag. Essa pratica tem benefícios mas deve ser usada com muita moderação, pois adicionar estilização em uma tag de forma direta, não através de um arquivo .scss, não é uma boa pratica pois pode sobrecarregar seu projato, causando lentidão para carregar-lo, por exemplo. Use o NgStyle com moderação! :)
Da mesma forma que o exemplo anterior, vamos implementar no nosso projeto a lógica necessária para ver em funcionamento essa diretiva!
Rode o comando ng serve no seu terminal e veja o resultado no seu navegador.
Quando clicamos no button ‘Add Styles object’ atribuimos ao objeto this.objStyles a propriedade ‘color: ‘#468120’’. Na tag h2 que imprime a informação de idade do nosso usuario a diretiva [ngStyle] recebe esse objeto e adiciona a estilização inline na tag. Fantástico, não!? =D
Mais uma vez podemos ver o poder das diretivas dentro de projetos Angular. É muito importante praticar, criar novas condicionais e fazer testes no código que fizemos nesse artigo para que os conceitos fiquem claros para você. O conhecimento vem com a prática, lembre-se disso. Bons estudos! =D
