Two-way Binding dengan ngModel — CompileDaily Study

Penjelasan

[(ngModel)] (dijuluki "banana in a box" karena gabungan kurung siku dan kurung biasa) menyinkronkan nilai input form dengan properti class DUA ARAH sekaligus — setara v-model di Vue. Butuh FormsModule diimpor terlebih dahulu di array imports component-nya karena ngModel bukan bagian dari Angular core.

Contoh Konsep

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

@Component({
    selector: 'app-sapa',
    standalone: true,
    imports: [FormsModule], // WAJIB diimpor untuk memakai ngModel
    template: `
        <input [(ngModel)]="nama" type="text">
        <p>Halo, {{ nama }}!</p>
    `,
})
export class SapaComponent {
    nama = '';
}

Praktikum

Buat component dengan properti email (string kosong) dan umur (number, awalnya 0). Bikin input untuk keduanya lewat [(ngModel)] (jangan lupa import FormsModule), lalu tampilkan ringkasan "Email: {{ email }}, Umur: {{ umur }}" di bawah kedua input.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Lupa mengimpor FormsModule ke array imports component adalah kesalahan PALING UMUM saat pertama kali memakai ngModel di Angular standalone component — tanpa itu, Angular akan error "Can't bind to ngModel" saat aplikasi dijalankan.