Latihan 1: Directives Bawaan — Angular

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

Class di starter sudah punya buah = ['Apel', 'Mangga', 'Jeruk']; biarkan. Isi template dengan:

Satu <ul>.
Di dalamnya, satu <li> yang diulang untuk tiap isi buah, berisi nama buahnya saja, tanpa nomor. Pilih salah satu:
- <li *ngFor="let item of buah">{{ item }}</li>, lalu tambahkan import { NgFor } from '@angular/common' di atas file dan imports: [NgFor] di @Component.
- Atau blok @for (item of buah; track item) { <li>{{ item }}</li> }, yang gak butuh import.

Jangan mengetik tiga <li> satu per satu: kodenya harus memakai ngFor atau @for (.

Yang dicek:

Ada <ul>.
Ada paling sedikit 3 <li>.
Kodenya memuat ngFor atau @for (.
<li> pertama di dalam <ul> berisi persis Apel.
<li> terakhir di dalam <ul> berisi persis Jeruk.

Hint

Mengetik tiga baris dengan tangan memberi tampilan yang sama, tapi yang dinilai adalah isinya dibaca dari array buah lewat perulangan template.
Perulangan butuh dua hal: sumber datanya (buah) dan satu nama untuk tiap isinya (item). *ngFor juga butuh NgFor di imports; @for butuh track.
<ul> @for (item of buah; track item) { <li>{{ item }}</li> } </ul>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Directives Bawaan — Angular

Hint

Memperbarui Aplikasi