Angular Academy · Aula

Propriedades personalizadas com vinculação bidirecional

Disponibilize suas próprias entradas com vinculação bidirecional.

Propriedades personalizadas com vinculação bidirecional é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 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.

Vinculação bidirecional personalizada

Você pode tornar qualquer propriedade de componente vinculável bidirecionalmente. O Angular oferece duas abordagens: o par clássico @Input mais @Output ou o sinal moderno model().

A convenção de nomenclatura

Para que a vinculação bidirecional funcione, o nome da saída deve ser o nome da entrada seguido do sufixo Change. Por exemplo, a entrada size precisa da saída sizeChange.

Declarando a entrada

Comece com uma entrada comum que o pai possa definir.

import { Input } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
}

Declarando a saída correspondente

Adicione um EventEmitter @Output com um nome que tenha o sufixo Change.

import { Input, Output, EventEmitter } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
}

Emitindo durante a atualização

Quando o componente alterar o valor internamente, atualize a propriedade e emita o novo valor para que o pai permaneça sincronizado.

setValue(v: number) {
  this.value = v;
  this.valueChange.emit(v);
}

Vinculando a partir do pai

Agora o pai pode usar a sintaxe banana na caixa com sua propriedade personalizada.

<app-rating [(value)]="score"></app-rating>

// parent
score = 3;

Exemplo completo de entrada e saída

Aqui está um componente completo, com vinculação bidirecional personalizada, que usa a API clássica.

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value }}</button>"
})
export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
  bump() {
    this.value++;
    this.valueChange.emit(this.value);
  }
}

A abordagem moderna com model

O mesmo comportamento é muito mais curto com model(), que cria o par de entrada e saída para você.

import { model } from "@angular/core";

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value() }}</button>"
})
export class RatingComponent {
  value = model(0);
  bump() { this.value.update(v => v + 1); }
}

Comparando as duas abordagens

O par clássico é explícito e funciona em todos os lugares; model() é conciso e baseado em sinais. Ambos expõem a mesma vinculação [(value)] aos pais.

Várias propriedades bidirecionais

Um componente pode expor várias propriedades vinculáveis bidirecionalmente, cada uma seguindo a convenção entrada/inputChange.

@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();

Escolhendo uma abordagem

Para código novo, prefira model() pela brevidade e pela integração com sinais. Use o par explícito de entrada e saída quando precisar de controle detalhado ou não estiver usando sinais.

Verificação rápida

Teste sua compreensão das propriedades personalizadas vinculáveis bidirecionalmente.

Recapitulação

A vinculação bidirecional personalizada precisa de uma entrada e de uma saída chamada inputChange, que emita a cada atualização. O sinal moderno model() cria esse par automaticamente e é a opção concisa para código novo.

Perguntas Frequentes

A aula “Propriedades personalizadas com vinculação bidirecional” é grátis?

Sim — o texto completo de “Propriedades personalizadas com vinculação bidirecional” é 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 “Propriedades personalizadas com vinculação bidirecional”?

Disponibilize suas próprias entradas com vinculação bidirecional. 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 4 de 4.

Quanto tempo leva a aula “Propriedades personalizadas com vinculação bidirecional”?

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

← Voltar para Angular Academy