Angular Academy · Pelajaran

Properti Kustom yang Dapat Diikat Dua Arah

Sediakan input Anda sendiri yang dapat diikat dua arah.

Properti Kustom yang Dapat Diikat Dua Arah adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Pengikatan Dua Arah Khusus

Anda dapat membuat properti komponen apa pun dapat diikat dua arah. Angular mendukung dua pendekatan: pasangan klasik @Input dan @Output, atau signal modern model().

Konvensi Penamaan

Agar pengikatan dua arah berfungsi, nama output harus berupa nama input yang ditambah akhiran Change. Misalnya, input size memerlukan output sizeChange.

Mendeklarasikan Input

Mulailah dengan input biasa yang dapat ditetapkan oleh induk.

import { Input } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
}

Mendeklarasikan Output yang Sesuai

Tambahkan EventEmitter @Output dengan nama yang diakhiri Change.

import { Input, Output, EventEmitter } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
}

Memancarkan saat Pembaruan

Ketika komponen mengubah nilai secara internal, perbarui properti tersebut dan pancarkan nilai baru agar induk tetap selaras.

setValue(v: number) {
  this.value = v;
  this.valueChange.emit(v);
}

Mengikat dari Induk

Sekarang induk dapat menggunakan sintaks pisang-dalam-kotak pada properti khusus Anda.

<app-rating [(value)]="score"></app-rating>

// parent
score = 3;

Contoh Input/Output Lengkap

Berikut komponen lengkap yang dapat diikat dua arah secara khusus menggunakan API klasik.

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value }}</button>"
})
export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
  bump() {
    this.value++;
    this.valueChange.emit(this.value);
  }
}

Pendekatan model Modern

Perilaku yang sama jauh lebih singkat dengan model(), yang membuat pasangan input dan output untuk Anda.

import { model } from "@angular/core";

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value() }}</button>"
})
export class RatingComponent {
  value = model(0);
  bump() { this.value.update(v => v + 1); }
}

Membandingkan Kedua Pendekatan

Pasangan klasik bersifat eksplisit dan berfungsi di mana saja; model() lebih ringkas dan berbasis signal. Keduanya menyediakan pengikatan [(value)] yang sama untuk induk.

Beberapa Properti Dua Arah

Sebuah komponen dapat menyediakan beberapa properti yang dapat diikat dua arah, masing-masing mengikuti konvensi input/inputChange.

@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();

Memilih Pendekatan

Untuk kode baru, utamakan model() karena ringkas dan terintegrasi dengan signal. Gunakan pasangan input/output eksplisit ketika Anda memerlukan kendali terperinci atau tidak menggunakan signal.

Pemeriksaan Singkat

Uji pemahaman Anda tentang properti khusus yang dapat diikat dua arah.

Ringkasan

Pengikatan dua arah khusus memerlukan input dan output bernama inputChange, yang dipancarkan pada setiap pembaruan. Signal modern model() membuat pasangan tersebut secara otomatis dan merupakan pilihan ringkas untuk kode baru.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Properti Kustom yang Dapat Diikat Dua Arah” gratis?

Ya — teks lengkap “Properti Kustom yang Dapat Diikat Dua Arah” 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 “Properti Kustom yang Dapat Diikat Dua Arah”?

Sediakan input Anda sendiri yang dapat diikat dua arah. 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 4 dari 4.

Berapa lama pelajaran “Properti Kustom yang Dapat Diikat Dua Arah” 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

← Kembali ke Angular Academy