Data Binding

Permite mostrar dados do componente na view e vice-versa.

One-Way Data Binding

Interpolação {{ }}

O valor de uma propriedade na classe é renderizado no texto do HTML.

• Fluxo: Componente → View

Property Binding [ ]

Vincula uma propriedade de um elemento DOM a uma propriedade do componente.

• Fluxo: Componente → View
• Exemplo: Alterar o estado disabled de um botão dinamicamente

Event Binding ( )

A view envia sinais para o componente quando uma ação do usuário ocorre (clique, tecla pressionada, etc.), parecido com o EventListener.

• Fluxo: View → Componente

Exemplo

// app.component.ts
export class AppComponent {
  titulo = "Status do Sistema";  // Variável
  isAtivo = true;  // Estado
 
  salvar() {
    console.log("Salvo");  // Ação
  }
}

<!-- app.component.html -->
<h1>{{ titulo }}</h1>
 
<button [disabled]="isAtivo">Enviar</button>
 
<button (click)="salvar()">Salvar Log</button>

Two-Way Data Binding

Permite que a propriedade no componente e o valor no elemento HTML (geralmente formulários) estejam sempre sincronizados. Se o usuário digitar no input a variável na classe é atualizada. Se o código alterar a variável, o input na view também atualiza.

• Sintaxe: [( )] (Conhecida como “Banana in a Box”)

// app.component.ts
export class AppComponent {
  email = "";  // Começa vazio
}

<!-- app.component.html -->
<label>Email:</label>
<input [(ngModel)]="email"> <!-- Usa a diretiva ngModel -->
<p>Você digitou: {{ email }}</p>