Latihan 1: Lifecycle Hooks Angular — Angular

Latihan 1 dari materi Lifecycle Hooks Angular di Angular — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah punya AppComponent dengan message = 'Loading...' dan template kosong. Biarkan message = 'Loading...' apa adanya, lalu:

Tambahkan OnInit ke import dari '@angular/core', dan tulis export class AppComponent implements OnInit.
Tambahkan method ngOnInit() yang mengisi this.message = 'Komponen sudah diinisialisasi!'.
Isi template dengan {{ message }}.

Halamannya jadi Komponen sudah diinisialisasi!, karena ngOnInit jalan sesudah komponennya dibuat.

Yang dicek:

Ada  di halaman.
Kodenya memuat OnInit dan ngOnInit.
Di dalam tubuh ngOnInit() ada penugasan ke properti, this.message = ....
-nya merangkai isinya dari {{ }}, bukan kalimat yang diketik di template.

Hint

ngOnInit dipanggil Angular sekali sesudah komponennya dibuat. Nilai yang diubah di sana harus properti class, lalu template menampilkannya lewat interpolasi.
Import OnInit, tulis implements OnInit di deklarasi class, tambahkan ngOnInit() { this.message = ... }, dan template {{ message }}.
export class AppComponent implements OnInit { message = 'Loading...'; ngOnInit() { this.message = 'Komponen sudah diinisialisasi!' } } dengan template {{ message }}

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Lifecycle Hooks Angular — Angular

Hint

Memperbarui Aplikasi