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:

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

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

@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:

export 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:

<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:

<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.

Bir input ve bir paragraf verilmiştir. Inputa bir sayı girilmektedir. Inputa sayı girildikçe, paragrafta bu sayının karesinin görüntülenmesini sağlayın.

İki input ve bir paragraf verilmiştir. Inputlara sayılar girilir. Paragrafta girilen sayıların toplamının görüntülenmesini sağlayın.