Input Sinyal model()
Buat binding dua arah dengan sinyal model.
Input Sinyal model() adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Signal Bertemu Pengikatan Dua Arah
Angular modern menyediakan model(), cara berbasis signal untuk membuat input yang dapat diikat dua arah tanpa pasangan input/output manual.
Mendeklarasikan Input model
Panggil model() untuk membuat signal yang dapat ditulis dan dapat diikat dua arah oleh induk.
import { Component, model } from "@angular/core";
@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
checked = model(false);
}Mengikat dari Induk
Induk menggunakan sintaks pisang-dalam-kotak pada nama model, sama seperti ngModel.
<app-toggle [(checked)]="isOn"></app-toggle>
// parent
isOn = signal(true);Membaca Nilai model
Model adalah signal, jadi bacalah dengan memanggilnya seperti fungsi.
export class ToggleComponent {
checked = model(false);
describe() {
return this.checked() ? "on" : "off";
}
}Menulis ke model
Perbarui model dengan set atau update. Perubahan tersebut otomatis diteruskan kembali ke induk.
toggle() {
this.checked.update(c => !c);
}
// or
turnOn() {
this.checked.set(true);
}Input model Wajib
Gunakan model.required() ketika induk wajib menyediakan nilai.
import { model } from "@angular/core";
export class FieldComponent {
value = model.required<string>();
}Menggunakan model di Templat
Ikat signal model secara langsung di templat milik komponen; memanggilnya akan memberikan nilai saat ini.
@Component({
selector: "app-toggle",
template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
checked = model(false);
flip() { this.checked.update(v => !v); }
}Tidak Perlu Output Manual
Dengan model(), Anda tidak perlu mendeklarasikan @Output terpisah. Angular menyiapkan peristiwa perubahan untuk Anda menggunakan nama konvensi yang ditambah Change.
model vs input
input() biasa bersifat hanya-baca di dalam komponen, sedangkan model() dapat ditulis dan mendukung pengikatan dua arah kembali ke induk.
// read-only:
label = input("");
// two-way writable:
value = model("");Penghitung dengan model
Berikut penghitung mandiri yang nilainya tetap selaras dengan induk.
@Component({
selector: "app-counter",
template: "<button (click)='inc()'>{{ count() }}</button>"
})
export class CounterComponent {
count = model(0);
inc() { this.count.update(c => c + 1); }
}Kapan Menggunakan model
Gunakan model() ketika komponen anak memiliki nilai yang juga ingin dibaca dan diperbarui oleh induk, seperti kontrol formulir khusus, pengalih, dan penggeser.
Pemeriksaan Singkat
Uji pemahaman Anda tentang input signal model.
Ringkasan
Fungsi model() membuat signal yang dapat ditulis dan mendukung pengikatan dua arah tanpa pasangan input/output manual. Baca dengan memanggilnya, tulis dengan set atau update, dan ikat dari induk dengan [(name)].
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Input Sinyal model()” gratis?
Ya — teks lengkap “Input Sinyal model()” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Input Sinyal model()”?
Buat binding dua arah dengan sinyal model. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Input Sinyal model()” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Rangkuman Binding Properti dan Peristiwa
- Binding Dua Arah dengan ngModel
- Input Sinyal model()
- Properti Kustom yang Dapat Diikat Dua Arah