Latihan 1: Control Flow Baru — Angular

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

Class di starter sudah punya loggedIn = false; biarkan. Isi template dengan:

Blok @if (loggedIn) { ... } @else { ... }. Cabang @if berisi <p>Selamat datang!</p>, cabang @else berisi <p>Silakan login</p>.
Di bawahnya, satu <button> dengan (click)="loggedIn = !loggedIn", yang membalik nilai loggedIn tiap diklik. Teks tombolnya bebas, misalnya {{ loggedIn ? 'Logout' : 'Login' }}.

Jangan tulis kedua paragraf di luar blok: di tiap keadaan cuma boleh ada satu <p>.

Yang dicek:

Kodenya memuat @if.
Sebelum diklik, <p> berisi persis Silakan login.
Ada <button> di halaman.
Sesudah tombolnya diklik sekali, <p> berisi Selamat datang!.
Dari awal lagi, sesudah diklik dua kali, <p> kembali berisi Silakan login.
Halaman cuma punya satu <p>.

Hint

@if merender cabangnya cuma kalau syaratnya benar, dan @else merender cabang lainnya. Jadi dalam satu keadaan cuma satu paragraf yang ada.
Blok @if (loggedIn) { ... } @else { ... } berisi satu <p> di tiap cabang, lalu di luarnya satu tombol yang membalik loggedIn dengan tanda seru.
@if (loggedIn) { <p>Selamat datang!</p> } @else { <p>Silakan login</p> } <button (click)="loggedIn = !loggedIn">Login</button>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Control Flow Baru — Angular

Hint

Memperbarui Aplikasi