Angular'da Çift Yönlü Veri Bağlama

Angular'da, bir input alanına metin girilirken bu metnin otomatik olarak sınıf özelliğine aktarılmasını sağlayabilirsiniz. Buna çift yönlü veri bağlama denir.

Bu bağlamanın çalışması için öncelikle etkinleştirilmesi gerekir. Bunun için bileşen dosyasında FormsModule'ü içe aktarıyoruz:

app/app.component.tsimport { FormsModule } from '@angular/forms';

Ardından @Component dekoratörünün imports özelliğine ekliyoruz:

app/app.component.ts@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, UserComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

Bundan sonra çift yönlü veri bağlama etkinleştirilecek ve onu kullanabileceğiz. Hadi bunu yapalım.

Öncelikle, daha sonra çift yönlü bağlama uygulayacağımız bir sınıf özelliği tanımlayalım:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

Bir div ve inputumuz olduğunu varsayalım. Div içinde bir sınıf özelliğinin gösterildiğini varsayalım:

html<div>
  {{ text }}
</div>
<input>

text özelliğimizi inputun değişimine bağlayalım. Bunun için inputa özel bir [(ngModel)] direktifi yazılmalıdır, değeri olarak sınıfımızın özelliği belirtilmelidir:

html<div>
  {{ text }}
</div>
<input [(ngModel)]="text">

Şimdi, kodu çalıştırıp inputa metin girmeye başlarsanız, bu metin hemen div içinde görüntülenmeye başlayacaktır.