Revisão da vinculação de propriedades e eventos
Vincule dados a componentes e eventos vindos deles.
Revisão da vinculação de propriedades e eventos é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Duas direções do fluxo de dados
Os modelos do Angular movem dados em duas direções: a vinculação de propriedade envia dados para o DOM, e a vinculação de evento envia as ações do usuário de volta ao componente.
Interpolação
A interpolação com chaves duplas exibe um valor do componente como texto. Ela é unidirecional, do componente para a visualização.
<p>{{ title }}</p>
// component
title = "Dashboard";Sintaxe da vinculação de propriedade
Os colchetes vinculam um valor do componente à propriedade de um elemento ou componente. A expressão à direita é avaliada e atribuída.
<img [src]="imageUrl" [alt]="caption">
// component
imageUrl = "/logo.png";
caption = "Logo";Vinculando às entradas do componente
A vinculação de propriedade também fornece valores às propriedades @Input de componentes filhos.
<app-user [name]="userName"></app-user>
// parent component
userName = "Ada";Atributo versus propriedade
A vinculação de propriedade tem como alvo as propriedades do DOM, não os atributos HTML. Para atributos puros, use o prefixo attr..
<button [attr.aria-label]="label">Save</button>Sintaxe da vinculação de evento
Os parênteses vinculam um evento do DOM a um método do componente. O método é executado quando o evento é acionado.
<button (click)="save()">Save</button>
// component
save() { console.log("saved"); }O objeto $event
A variável especial $event transporta os dados do evento para seu manipulador.
<input (input)="onInput($event)">
// component
onInput(e: Event) {
this.text = (e.target as HTMLInputElement).value;
}Vinculando às saídas do componente
A vinculação de evento também escuta eventos @Output de componentes filhos emitidos por meio de um EventEmitter.
<app-counter (changed)="onChange($event)"></app-counter>
// parent
onChange(value: number) { this.count = value; }Combinando as duas vinculações
Usar a vinculação de propriedade e a vinculação de evento juntas na mesma propriedade é a base da vinculação bidirecional, que você verá a seguir.
<input [value]="name" (input)="name = $event.target.value">Vinculações de classe e estilo
Vinculações de propriedade especiais alternam classes e estilos com base no estado do componente.
<div [class.active]="isActive"
[style.color]="textColor">
Item
</div>Mantendo os modelos declarativos
As vinculações mantêm declarativa a relação entre os dados e a visualização. O Angular atualiza o DOM automaticamente quando os valores vinculados mudam.
Verificação rápida
Teste sua compreensão da vinculação de propriedade e de evento.
Recapitulação
A vinculação de propriedade [prop] envia dados para a visualização, a vinculação de evento (event) envia ações de volta, e a interpolação exibe texto. Combinar uma vinculação de propriedade e uma de evento no mesmo valor configura a vinculação bidirecional.
Perguntas Frequentes
A aula “Revisão da vinculação de propriedades e eventos” é grátis?
Sim — o texto completo de “Revisão da vinculação de propriedades e eventos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Revisão da vinculação de propriedades e eventos”?
Vincule dados a componentes e eventos vindos deles. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Revisão da vinculação de propriedades e eventos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Revisão da vinculação de propriedades e eventos
- Vinculação bidirecional com ngModel
- Entradas de sinais model()
- Propriedades personalizadas com vinculação bidirecional