Curso Angular #35: Diretivas: Input e Property Binding
HTML-код
- Опубликовано: 9 фев 2025
- Curso de Angular Gratuito e Completo com Certificado: loiane.training
Aulas sobre Angular 2 e Angular 4
Blog: loiane.com
Site: loiane.training
Facebook: / loianegroner
Github: github.com/loiane
Twitter: / loiane
Repositório dos exemplos: github.com/loi...
Slides: www.slideshare....
Estou usando o Angular 14 e tudo funcionou
Se alguém estiver com problemas, verifique se usou aspas duplas E aspas simples, como em [defaultColor]="'gray'"
Outra coisa: também é possível aplicar sem o uso dos [ ]. Nesse caso você vai usar apenas as aspas duplas, como hightlightColor="red"
Lembrando que a diferença entre usar ou não os colchetes implica se o valor passado será estático (a string ˜red˜ diretamente no template, por exemplo) ou dinâmico (vindo através de uma variável do componente, como color: string = "red").
Obrigado, Loiane. Você é demais.
Firme forte, em 2021, aprendendo Angular, haha
Firme forte, em 2022, aprendendo Angular, haha (update)
Firme e forte, em 2023, aprendendo Angular, haha
Vamos ver onde isso vai parar 🤣
Firme forte, em 2024, aprendendo Angular, haha
commit pushed
Firme forte, em 2025, aprendendo Angular, haha
updated
Aula realmente excelente!
muito obrigado!!! quero mais
parabéns
Loiane bom dia, estou adorando o curso, super bem explicado, suas aulas são excelentes e não deixam dúvida sobre o assunto abordado, parabéns. Loiane me diz uma coisa nesse curso você irá fazer integração com algum backend ?
Acessa o portal dela com as aulas e procura por services.
Excelente! Parabéns!
Olá Loiane, parabéns pelo seu canal, ele está me ajudando muito.
Loiane tenho uma dúvida bem boba, até acho que já achei a resposta mas estou inseguro em colocar na pratica, a minha dúvida é a seguinte. É possivel criar diretivas de eventos (click) para receber um valor que venha de uma variável?
Porque eu devo usar a chamada da diretiva como property-binding? Testando aqui, a sintaxe [highlight]=" 'red' " pode ser subtituída por highlight='red'.
mesma coisa pra defaultColor... [defaultColor] = " 'grey' " é a mesma coisa que defaultColor = 'grey'
@@lucasrosa6340A diferença entre usar ou não os colchetes (property binding) implica se o valor passado será estático (a string ˜red˜ diretamente no template, por exemplo) ou dinâmico (vindo através de uma variável do componente, como color: string = "red").
Depende muito da tua necessidade, mas a via de regra, o segundo caso atende ambas as condições.
Gostei.
Excelente as aulas de Angular, Loiane.
Infelizmente, isso que você fez com as diretivas não funciona no Angular 13. Simplesmente dá pau ou não roda o efeito.
Eu estou utilizando o Angular 14 e funcionou.
@@luiz_vidal Fico feliz que, na tua utilização do Angular 14, houver compatibilidade com essa aula da Loiane. Todas as aulas até agora foram compatíveis com o Ang. 14? Pergunto pois estou começando um projeto e estou um tanto indeciso quanto o Angular 13 ou 14. Penso em ir de 14.
@@lucasbarbosa1020 do angular 13 pro 14 mudaram a forma de utilizar os formulários.
olhe o seletor, o meu erro tava ali, o nome não tava igual
selector: '[highlight]'
Legal!
Olá Loiane, tudo bem?
Porque é que em diretivas eu posso usar o ngOnInit sem precisar implementa-lo?
Não sei ao certo, mas pelo que me parece implementar o "OnInit", não é obrigatório tanto para componente/diretiva, mas é considerado boa pratica.
Ela explica nas aulas anteriores. Basicamente o Angular não exige a implementação das interfaces OnInit, ele basicamente verifica se o component/diretiva/etc possui a função, caso positivo, ele já chama. No entanto, é uma boa pratica implementar para aumentar a legibilidade do código.
TOP!
Não é mais possível fazer um property-binding com o nome do seletor, o compilador já acusa erro, deixei da forma padrão usando o nome da variavel completa hightlightcolor
Não entendi bem a intenção dessa propriedade. Vou ver se acho alguma coisa na documentação.
Porque as cores precisam estar entre aspas simples? Ele pensa que o valor passado é uma referência / nome de variável?
Correto Orlando! Como é um valor fixo (string), precisa das aspas, senão trata como referência de variável.
É possível fazer ele entender como uma simples string?
somente colocando as aspas