0Pricing
Angular Academy · Aula

Entradas de sinais model()

Crie vinculações bidirecionais com sinais model.

Entradas de sinais model() é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 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.

Signals encontram a vinculação bidirecional

O Angular moderno oferece model(), uma forma baseada em sinais de criar entradas vinculáveis bidirecionalmente sem pares manuais de entrada e saída.

Declarando uma entrada model

Chame model() para criar um sinal gravável ao qual um componente pai pode se vincular bidirecionalmente.

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

@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
  checked = model(false);
}

Vinculando a partir de um pai

O pai usa a sintaxe banana na caixa com o nome do modelo, exatamente como em ngModel.

<app-toggle [(checked)]="isOn"></app-toggle>

// parent
isOn = signal(true);

Lendo um valor de model

Um modelo é um sinal, portanto leia-o chamando-o como uma função.

export class ToggleComponent {
  checked = model(false);
  describe() {
    return this.checked() ? "on" : "off";
  }
}

Gravando em um model

Atualize um modelo com set ou update. A alteração é propagada automaticamente de volta ao pai.

toggle() {
  this.checked.update(c => !c);
}

// or
turnOn() {
  this.checked.set(true);
}

Entradas model obrigatórias

Use model.required() quando o pai precisar fornecer um valor.

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

export class FieldComponent {
  value = model.required<string>();
}

Usando model no modelo

Vincule o sinal model diretamente ao próprio modelo do componente; chamá-lo fornece o valor atual.

@Component({
  selector: "app-toggle",
  template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
  checked = model(false);
  flip() { this.checked.update(v => !v); }
}

Nenhuma saída manual é necessária

Com model(), você não declara um @Output separado. O Angular configura o evento de alteração para você usando o nome convencional seguido de Change.

model versus input

Um input() comum é somente leitura dentro do componente, enquanto um model() pode ser gravado e permite a vinculação bidirecional de volta ao pai.

// read-only:
label = input("");

// two-way writable:
value = model("");

Um contador com model

Aqui está um contador independente cujo valor permanece sincronizado com o pai.

@Component({
  selector: "app-counter",
  template: "<button (click)='inc()'>{{ count() }}</button>"
})
export class CounterComponent {
  count = model(0);
  inc() { this.count.update(c => c + 1); }
}

Quando recorrer a model

Use model() quando um componente filho for responsável por um valor que o pai também queira ler e atualizar, como controles de formulário personalizados, alternâncias e controles deslizantes.

Verificação rápida

Teste sua compreensão das entradas de sinal model.

Recapitulação

A função model() cria um sinal gravável que permite a vinculação bidirecional sem um par manual de entrada e saída. Leia-o chamando-o, grave com set ou update e faça a vinculação a partir do pai com [(name)].

Perguntas Frequentes

A aula “Entradas de sinais model()” é grátis?

Sim — o texto completo de “Entradas de sinais model()” é 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 “Entradas de sinais model()”?

Crie vinculações bidirecionais com sinais model. 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 3 de 4.

Quanto tempo leva a aula “Entradas de sinais model()”?

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

  1. Revisão da vinculação de propriedades e eventos
  2. Vinculação bidirecional com ngModel
  3. Entradas de sinais model()
  4. Propriedades personalizadas com vinculação bidirecional
← Voltar para Angular Academy