Aula 4

Ligação de dados conecta o modelo (dados) à visualização (interface de usuário). Existem quatro tipos principais:

• Interpolação (One-Way Binding): Exibe valores do componente no template usando {{ }}.
• Property Binding (One-Way Binding): Vincula propriedades do DOM a valores do componente usando [property].
• Event Binding: Captura eventos do usuário e os vincula a métodos do componente usando (event).
• Two-Way Binding: Sincroniza dados entre o componente e o template usando [(ngModel)].

Interpolação

A interpolação {{ }} é usada para exibir valores de variáveis diretamente no HTML.

Ela avalia expressões do TypeScript e insere o resultado no DOM.

<h1>{{ title }}</h1>

export class AppComponent {
  title = 'Angular Data Binding';
}

Property Binding

O Property Binding [propriedade]="valor" define dinamicamente valores de propriedades HTML.

Permite passar dados do componente para o template de forma segura.

<input [value]="username" />

export class AppComponent {
  username = 'AngularUser';
}

Event Binding

Property Binding

O Event Binding (evento)="ação()" escuta eventos do DOM, como cliques ou teclas.

Ele chama métodos do componente quando o evento ocorre.

<button (click)="onClick()">Click me</button>
export class AppComponent {
  onClick() {
    alert('Button clicked!');
  }
}

Two-Way Binding

O Two-Way Binding [(ngModel)]="variável" sincroniza dados entre template e componente.

Quando o usuário altera o valor, o componente é automaticamente atualizado — e vice-versa.

<input [(ngModel)]="username" />
<p>Welcome, {{ username }}</p>

<p>Welcome, {{ username }}</p>

export class AppComponent {
  username = '';
}

Pipes transformam dados exibidos no template sem alterar os dados diretamente no componente.

Exemplo

<p>{{ today | date }}</p>
<p>{{ amount | currency:'USD':'symbol' }}</p>
<p>{{ text | uppercase }}</p>

export class AppComponent {
  today = new Date();
  amount = 1234.56;
  text = 'hello angular';
}

Criando um Pipe personalizado

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

<p>{{ 'angular' | reverse }}</p>