Angular'da Data Binding: Interpolation, Property, Event ve Two-Way

IDE tarafinda: VS Code tarafinda {{property}} interpolation'i yazarken TypeScript tarafinda degisiklik yapinca HMR anlik olarak sayfayi guncelliyor. [property], (event), [(ngModel)] syntax'larinin hepsi IntelliSense'te mevcut.

Merhaba arkadaşlar, bu makalemizde Angular uygulamalarının olmazsa olmazı olan Data Binding'i tüm çeşitleriyle inceliyor olacağız. Angular bize dört farklı binding yöntemi sunuyor ve her birinin kendine göre bir kullanım alanı var. Bu yazıyı bitirdiğimizde hangi durumda hangisini kullanacağınızı net bir şekilde kavramış olacaksınız.

1. Interpolation — {{ }}
Interpolation, component sınıfındaki bir değişkeni HTML içerisine basmanın en basit yoludur. Çift süslü parantez {{ }} kullanarak yapılır ve yalnızca veriyi göstermek için tek yönlüdür (component → template).

// component class
export class AnasayfaComponent {
  baslik = 'Sem Göksu Blog';
  toplamYazi = 356;
  bugun = new Date();
}

<!-- template -->
<h1>{{ baslik }}</h1>
<p>Toplam {{ toplamYazi }} yazı var.</p>
<p>Bugün: {{ bugun | date:'dd MMMM yyyy' }}</p>

Dikkat ederseniz tarihe | date yazdım. Buna pipe deniyor ve veriyi ekrana yazdırmadan önce biçimlendiriyor. Hem pratik hem de güzel bir ayrıntı.

2. Property Binding — [ ]
Interpolation string'e uygun ama bazen HTML elementinin bir özelliğini (property) dinamik olarak ayarlamamız gerekir. Örneğin bir resmin kaynağını, bir butonun disabled durumunu, bir div'in class'ını. Bu durumda property binding kullanıyoruz:

<img [src]="profilResmi" [alt]="kullaniciAdi">
<button [disabled]="yukleniyor">Kaydet</button>
<a [href]="detaySayfasi">Detay</a>
<div [class.aktif]="seciliMi">...</div>

Köşeli parantezler arasında yazan ifade bir TypeScript expression olarak değerlendirilir. Yani [disabled]="yukleniyor" yazdığımızda component'teki yukleniyor boolean değişkeninin durumuna göre button disabled olur ya da olmaz.

Peki, neden [src] yerine src="{{ profilResmi }}" kullanmıyoruz?
Aslında bazı durumlarda kullanabiliriz, ikisi de çalışır. Ama [property] binding tip güvenliği sağlar ve Angular'ın template compilation sürecinde daha hızlıdır. Benim önerim, mümkün olan her yerde property binding tercih etmeniz.

3. Event Binding — ( )
Event binding ile kullanıcının yaptığı işlemleri (click, input, submit vb.) yakalayıp TypeScript sınıfımızda bir metot çalıştırabiliyoruz. Sözdizimi parantez ile yapılır:

<button (click)="kaydet()">Kaydet</button>
<input (input)="araClick($event)">
<form (submit)="formGonder($event)">...</form>

$event ifadesi özel bir parametre olup, tetiklenen event'in tüm bilgisini içerir. Örneğin input olayında $event.target.value ile kullanıcının yazdığı değere ulaşabiliriz:

export class AramaComponent {
  aramaMetni = '';

  aramaChange(event: Event) {
    const hedef = event.target as HTMLInputElement;
    this.aramaMetni = hedef.value;
    console.log('Aranıyor:', this.aramaMetni);
  }
}

4. Two-Way Binding — [( )]
Dört binding tipinin son ve en zevkli olanı two-way binding. İsminden de anlaşılacağı gibi hem component → template hem template → component yönünde veri akışı sağlar. Özellikle form kontrolü için kullanılır ve banana-in-a-box (kutudaki muz) sözdizimiyle yazılır: [(ngModel)].

Two-way binding için önce FormsModule'ü import etmemiz gerekiyor. Standalone component'lerde şöyle:

import { Component } from '@@angular/core';
import { FormsModule } from '@@angular/forms';

@@Component({
  selector: 'app-form',
  standalone: true,
  imports: [FormsModule],
  template: `
    <label>Adınız:</label>
    <input [(ngModel)]="kullaniciAdi">
    <p>Merhaba {{ kullaniciAdi }}!</p>
  `
})
export class FormComponent {
  kullaniciAdi = '';
}

Kullanıcı input'a yazdıkça kullaniciAdi değişkeni güncellenir, aynı anda da aşağıdaki paragraftaki {{ kullaniciAdi }} o değeri gösterir. İki yönlü akış bu yüzden çok pratiktir.

Küçük Bir Örnek: Gelişen Bir Form
Hepsini bir araya getirelim:

<div>
  <label>Ad Soyad:</label>
  <input [(ngModel)]="ad" [disabled]="gonderildi">

  <label>Email:</label>
  <input [(ngModel)]="email" type="email">

  <button (click)="gonder()" [disabled]="!ad || !email">Gönder</button>

  @@if (gonderildi) {
    <p>Teşekkürler {{ ad }}! Mesajınız alındı.</p>
  }
</div>

Bu kod parçasında dört binding tipinin dördünü de aynı anda görebilirsiniz: two-way ile input değerleri, property binding ile disabled durumu, event binding ile click, ve interpolation ile teşekkür mesajı.

Özet
Angular'da dört binding tipi var ve her biri farklı bir amaca hizmet ediyor. {{ }} ile veri gösterme, [ ] ile property'leri ayarlama, ( ) ile olay dinleme ve [( )] ile iki yönlü senkronizasyon. Bir sonraki makalede *ngIf ve *ngFor directive'leriyle koşullu render ve liste render yapmayı inceleyeceğiz. Herkese kolaylıklar, soruları yorum olarak bekliyorum...