Angular Two-Way Data Binding Nedir?

Merhaba arkadaşlar, bu yazımda sizlere Angular Two-Way Data Binding Nedir? konusundan bahsedeceğim. Bir önceki yazımda One-Way Data Binding konusundan bahsetmiştim. Bu yazım da onun devamı niteliğinde olacaktır.

One-Way Data Binding işleminde component üzerinde bir tanımlama yapıyorduk ve html tarafında bunun gösterimini sağlıyorduk. Html üzerinden herhangi bir değişiklik yapılmıyordu. Two-Way Data Binding işlemi ise iki taraflı bir değişiklik sağlamaktadır. Html üzerindeki bir değişiklik kod bloğuna da yansıtılmaktadır. Html tarafındaki değişiklikler typescript class’ında da güncellemeyi sağlar. Güncellemeler anlık olarak ve otomatik bir şekilde gerçekleşir. Bu özellik ile Html ve Typescript kodu her zaman güncel kalabilir.

Two-Way Data Binding işleminin Syntax’ı aşağıdaki örnekteki gibidir.

[(ngModel)] = “title”

Hemen örnek vererek bir gösterim sağlamak istiyorum.

Dashboard.component.ts üzerinde title isimli bir değişken oluşturuyorum.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  title:string = "Deneme";
  
  constructor() { }

  ngOnInit(): void {
  }

}

Dashboard.component.html üzerinde de Başlık ve title değişkeninin değeri, bunların altında da bir input text eklemesi yapıyorum ve ngModel özelliğini ayarlıyorum.

<h1>Angular Two-Way Data Binding Nedir?</h1>

<h2> Title: </h2> 
{{title}}

<hr/>
<br/>
Change Title : <input [(ngModel)]="title" type="text" class="form-control"/>

---

Not: ngModel özelliğini kullanmak için app.module.ts dosyası içerisindeki imports kısmında yüklenen modullerde FormsModule olması gerekmektedir. Aksi takdirde ngModel kullanılamaz ve hata alırsınız.

---

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Görüldüğü üzere imports kısmında FormsModule eklemesi gerçekleştirdim.

ng serve –o ile uygulamamızı çalıştırdığımızda title değerimiz görünür. Altta bulunan text input ile de buradaki değeri değiştirdiğimizde anlık olarak yukarıdaki değer de değişecektir.

Angular Two-Way Data Binding Nedir? konusu ile ilgili anlatacaklarım buraya kadar. Two-Way Data Binding işlemi yukarıdaki gibi sağlanabilir.

Angular – NgModel konusu ile ilgili detaylı bilgi için linke bakabilirsiniz.

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere…