Angular Academy · Pelajaran

ngOnChanges dan Perubahan Input

Tanggapi perubahan pada properti input.

ngOnChanges dan Perubahan Input adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Merespons Perubahan Masukan

Kait OnChanges memungkinkan komponen merespons setiap kali properti @Input-nya berubah. Angular memanggil ngOnChanges sebelum ngOnInit dan setiap kali masukan diperbarui.

Menerapkan OnChanges

Terapkan antarmuka OnChanges dan tambahkan metode ngOnChanges yang menerima objek SimpleChanges.

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
  @Input() count = 0;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
}

Objek SimpleChanges

SimpleChanges adalah peta dengan kunci berupa nama masukan. Setiap entri berupa SimpleChange yang memiliki currentValue, previousValue, dan firstChange.

ngOnChanges(changes: SimpleChanges) {
  const c = changes["count"];
  if (c) {
    console.log(c.previousValue, "->", c.currentValue);
  }
}

Mendeteksi Perubahan Pertama

Penanda firstChange bernilai true saat masukan ditetapkan untuk pertama kalinya. Gunakan penanda ini untuk membedakan inisialisasi dari pembaruan berikutnya.

ngOnChanges(changes: SimpleChanges) {
  if (changes["count"]?.firstChange) {
    console.log("initial value");
  } else {
    console.log("updated value");
  }
}

Merespons Masukan Tertentu

Selalu periksa apakah kunci tersebut ada sebelum membacanya, karena tidak setiap masukan berubah pada setiap siklus.

ngOnChanges(changes: SimpleChanges) {
  if ("userId" in changes) {
    this.reload(this.userId);
  }
}

Deteksi Berbasis Referensi

ngOnChanges dijalankan saat terjadi perubahan referensi pada objek dan array. Mengubah objek yang diteruskan sebagai masukan TIDAK akan memicunya.

// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";

// will trigger it:
this.config = { ...this.config, theme: "dark" };

Urutan dengan ngOnInit

Saat dibuat, ngOnChanges dijalankan terlebih dahulu dengan masukan awal, lalu ngOnInit. Setelah itu, ngOnChanges dijalankan lagi setiap kali masukan berubah.

Membandingkan Nilai Lama dan Baru

Penggunaan yang umum adalah hanya merespons ketika nilai benar-benar berbeda, misalnya memuat ulang data ketika masukan id berubah.

ngOnChanges(changes: SimpleChanges) {
  const id = changes["userId"];
  if (id && id.currentValue !== id.previousValue) {
    this.fetchUser(id.currentValue);
  }
}

Pengetikan untuk Keamanan

Anda dapat membaca nilai dari changes atau langsung dari properti komponen; setelah ngOnChanges, properti tersebut sudah menyimpan nilai saat ini.

ngOnChanges() {
  // this.count already updated here
  this.total = this.count * 2;
}

Kapan Tidak Menggunakan OnChanges

Untuk status turunan dari satu masukan, getter atau nilai terhitung mungkin lebih rapi. Gunakan ngOnChanges untuk efek samping yang memang harus dijalankan saat masukan diperbarui.

Beberapa Masukan Sekaligus

Jika beberapa masukan berubah dalam siklus yang sama, ngOnChanges dipanggil sekali dengan semuanya tercantum dalam peta SimpleChanges.

ngOnChanges(changes: SimpleChanges) {
  // both keys may be present
  if (changes["min"] || changes["max"]) {
    this.validateRange();
  }
}

Pemeriksaan Singkat

Uji pemahaman Anda tentang OnChanges.

Ringkasan

Kait OnChanges merespons perubahan masukan melalui peta SimpleChanges yang berisi currentValue, previousValue, dan firstChange. Kait ini dipicu oleh perubahan referensi, jadi gunakan pembaruan yang tidak dapat diubah.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “ngOnChanges dan Perubahan Input” gratis?

Ya — teks lengkap “ngOnChanges dan Perubahan Input” 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 “ngOnChanges dan Perubahan Input”?

Tanggapi perubahan pada properti input. 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 2 dari 4.

Berapa lama pelajaran “ngOnChanges dan Perubahan Input” 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

← Kembali ke Angular Academy