Angular’da veri bağlama (data binding), bileşenlerinizin sınıflarıyla şablonları arasındaki veriyi otomatik olarak senkronize etmenizi sağlar. Angular’da genellikle iki tür veri bağlama vardır: Tek yönlü (One-way) ve çift yönlü (Two-way).
1. Tek Yönlü Veri Bağlama (One-Way Data Binding)
Tek yönlü veri bağlama, verinin bir yönde, ya bileşen sınıfından HTML şablonuna ya da şablondan sınıfa aktarılmasıdır. Farklı yöntemlerle bu işlemi yapabiliriz.
a. İfade Bağlama (Interpolation):
Bileşen sınıfından şablona doğrudan veri aktarımı için kullanılır. Çift süslü parantez içindeki ifadelerle gerçekleştirilir.
Örnek:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ selector: 'app-demo', template: `<h1>{{ title }}</h1>` }) export class DemoComponent { title = 'Merhaba Angular!'; } |
b. Özellik Bağlama (Property Binding):
HTML özelliklerine bileşen sınıfından veri aktarmak için kullanılır.
Örnek:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ selector: 'app-demo', template: `<img [src]="imageUrl">` }) export class DemoComponent { imageUrl = 'https://example.com/image.jpg'; } |
c. Olay Bağlama (Event Binding):
HTML şablondaki olayları (örneğin bir düğmeye tıklama) bileşen sınıfındaki bir metoda bağlamak için kullanılır.
Örnek:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@Component({ selector: 'app-demo', template: `<button (click)="showMessage()">Tıkla</button>` }) export class DemoComponent { showMessage() { alert('Merhaba Dünya!'); } } |
2. Çift Yönlü Veri Bağlama (Two-Way Data Binding)
Çift yönlü veri bağlama, bileşen sınıfıyla HTML şablonu arasında verinin her iki yönde de otomatik olarak güncellenmesini sağlar. Bu genellikle formlarla çalışırken faydalıdır.
[(ngModel)] direktifi ile gerçekleştirilir. Bu direktifi kullanabilmek için FormsModule’ın AppModule içinde import edilmiş olması gerekir.
|
1 2 3 4 5 6 7 8 9 |
import { FormsModule } from '@angular/forms'; @NgModule({ imports: [FormsModule], //... }) export class AppModule {} |
Örnek:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@Component({ selector: 'app-demo', template: ` <input [(ngModel)]="name"> <p>Mesaj: Merhaba, {{ name }}!</p> ` }) export class DemoComponent { name = ''; } |
Bu örnekte, input alanına yazdığınız değer otomatik olarak name özelliğine bağlanır ve paragraf içerisinde anında gösterilir.
Data binding, Angular’ın en güçlü özelliklerinden biridir ve kullanıcı etkileşimli uygulamalar oluştururken büyük bir kolaylık sağlar. Tek yönlü bağlama, kontrolü elinizde tutmanızı sağlarken, çift yönlü bağlama hızlı prototipleme ve etkileşimli uygulamalar için idealdir. Hangi yöntemin kullanılacağı, uygulamanızın ihtiyaçlarına ve tercihlerinize bağlıdır.
Umarım “Angular Data Binding: Tek Yönlü ve Çift Yönlü Veri Bağlama” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Yeni bir yazımda görüşmek üzere.
Happy coding!
