Latihan 1: Route Parameters — Angular

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

Starter-nya sudah punya UserComponent (selector app-user) dengan userId = '', ngOnInit() yang masih kosong, dan template kosong. Biarkan selector dan userId-nya, lalu:

Import ActivatedRoute dari '@angular/router'.
Di class, minta service-nya: private route = inject(ActivatedRoute) (inject sudah di-import).
Di ngOnInit(), isi this.userId dengan parameter id dari rute aktif: this.route.snapshot.paramMap.get('id') ?? '', atau lewat this.route.paramMap.subscribe(...).
Isi template dengan User ID: {{ userId }}.

Editor latihan gak punya daftar rute, jadi editor memberi rute aktif palsu dengan id 9f42c1. Paragrafnya harus berbunyi User ID: 9f42c1.

Yang dicek:

Ada  di halaman.
Kodenya memuat ActivatedRoute dan paramMap.
-nya memuat 9f42c1, yang datang dari rute, bukan diketik di template.

Hint

Komponen membaca parameter alamatnya lewat service ActivatedRoute, yang diminta dengan inject(), lalu nilainya disimpan di userId dan ditampilkan di template.
Import ActivatedRoute dari '@angular/router', tulis private route = inject(ActivatedRoute) di class, lalu di ngOnInit ambil id dari this.route.snapshot.paramMap.
ngOnInit() { this.userId = this.route.snapshot.paramMap.get('id') ?? '' } dan template: User ID: {{ userId }}

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Route Parameters — Angular

Hint

Memperbarui Aplikasi