Latihan 1: Input dan Output — Angular

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

Starter-nya sudah punya GreetingComponent dengan selector app-greeting dan properti nama = ''. Ubah dua hal:

Tandai properti itu supaya bisa diisi induknya: @Input() nama = ''. Tambahkan juga Input ke import dari @angular/core: import { Component, Input } from '@angular/core'.
Isi template dengan <h2>Halo, {{ nama }}!</h2>. Namanya dirangkai di dalam <h2> itu lewat interpolasi, bukan diketik.

Tulis dekoratornya persis @Input() langsung diikuti nama. Bentuk lain seperti @Input({ required: true }) nama atau nama = input('') gak lolos pengecekan.

Di editor, komponen ini jalan sendirian tanpa induk, jadi yang tampil Halo, !. Itu wajar.

Yang dicek:

Ada <h2> di halaman.
Kodenya memuat @Input, dan @Input() yang langsung diikuti nama.
Kodenya memuat {{ nama }}.
{{ nama }} ada di dalam <h2>, tanpa elemen lain di antaranya.

Hint

Properti biasa cuma hidup di dalam komponennya sendiri. Supaya induk bisa mengisinya, properti itu ditandai dengan dekorator input dari @angular/core.
Dua bagian: @Input() tepat di depan nama di class, dan <h2> di template yang membaca nama lewat kurung kurawal ganda.
import { Component, Input } from '@angular/core' ... template: `<h2>Halo, {{ nama }}!</h2>` ... @Input() nama = ''

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Input dan Output — Angular

Hint

Memperbarui Aplikasi