Latihan 1: Services dan DI — Angular

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

Starter-nya sudah punya AppComponent dengan selector: 'app-root', standalone: true, template kosong, dan properti message = ''. Biarkan selector-nya, lalu:

Di atas komponen, buat class DataService bertanda @Injectable({ providedIn: 'root' }), dengan method getMessage() yang mengembalikan 'Data dari service!'. Tambahkan Injectable ke import dari '@angular/core'.
Di AppComponent, simpan service-nya di properti: private data = inject(DataService).
Isi message dari service: message = this.data.getMessage().
Ganti template-nya jadi {{ message }}.

Yang dicek:

 berbunyi persis Data dari service!.
Kodenya memuat @Injectable.
Kodenya memanggil .getMessage(, dan hasilnya disimpan lewat bentuk = this.data.getMessage( (nama propertinya boleh lain). inject(DataService).getMessage() dalam satu baris, atau teks yang diketik langsung di template, gak diterima.

Hint

Pesannya tinggal di service, dan komponen cuma meminta service itu ke Angular lalu memanggil method-nya. Teksnya gak boleh diketik ulang di komponen.
Buat DataService dengan @Injectable({ providedIn: 'root' }) dan getMessage(). Di AppComponent tulis private data = inject(DataService), lalu message = this.data.getMessage(), dan template {{ message }}.
@Injectable({ providedIn: 'root' }) export class DataService { getMessage(): string { return 'Data dari service!' } } ... export class AppComponent { private data = inject(DataService); message = this.data.getMessage() }

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Services dan DI — Angular

Hint

Memperbarui Aplikasi