Data Binding Dua Arah di Angular

Di Angular, kita dapat membuat teks yang dimasukkan ke dalam input otomatis masuk ke dalam properti kelas. Ini disebut data binding dua arah.

Agar binding ini bekerja, pertama-tama harus diaktifkan. Untuk melakukannya, impor FormsModule di file komponen:

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

Kemudian tambahkan ke properti imports decorator @Component:

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

Setelah itu, data binding dua arah akan diaktifkan dan kita dapat menggunakannya. Mari kita lakukan.

Pertama, deklarasikan properti kelas yang kemudian akan kita ikat secara dua arah:

export class AppComponent {
	public text: string = '';
}

Misalkan kita memiliki div dan input. Misalkan di div ditampilkan beberapa properti kelas:

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

Mari kita ikat properti text kita ke perubahan input. Untuk melakukannya, di input perlu ditulis direktif khusus [(ngModel)], yang nilainya harus ditentukan sebagai properti kelas kita:

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

Sekarang, jika kode dijalankan dan mulai memasukkan teks ke dalam input, teks tersebut akan segera ditampilkan di div.

Diberikan sebuah input dan sebuah paragraf. Di input ditampilkan sebuah angka. Buatlah agar saat angka dimasukkan ke dalam input, di paragraf ditampilkan kuadrat dari angka tersebut.

Diberikan dua input dan sebuah paragraf. Angka-angka dimasukkan ke dalam input. Buatlah agar di paragraf ditampilkan jumlah dari angka-angka yang dimasukkan.