Latihan 1: Two-Way Binding — Angular

Latihan 1 dari materi Two-Way Binding di Angular — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah mengimpor FormsModule (di atas file dan di imports: [FormsModule]) dan punya properti nama = ''; biarkan semuanya. Isi template dengan:

<input [(ngModel)]="nama" placeholder="Ketik nama..." />.
Di bawahnya, <p>Halo, {{ nama }}!</p>, satu-satunya paragraf di halaman.

Yang dicek:

Ada <input> dan <p> di halaman.
Kodenya memuat ngModel.
Sesudah Sinta diketik di kotaknya, <p> berisi persis Halo, Sinta!.

Hint

Ikatan dua arah membaca dan menulis properti yang sama: kotak isian menampilkan nama, dan ketikan langsung mengubah nama.
Pasang [(ngModel)]="nama" di <input>, lalu tampilkan nama yang sama di <p> lewat kurung kurawal ganda.
<input [(ngModel)]="nama" placeholder="Ketik nama..." /> <p>Halo, {{ nama }}!</p>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Two-Way Binding — Angular

Hint

Memperbarui Aplikasi