Latihan 1 dari materi Proyek Angular di Angular — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Starter-nya sudah punya imports: [FormsModule], interface Contact, name = '', email = '', serta addContact() dan removeContact(id) yang masih kosong. Lengkapi:
signal dan computed dari @angular/core. Di class: contacts = signal<Contact[]>([]) dan total = computed(() => this.contacts().length).<h1>Contact List</h1> dan <p>Total: {{ total() }} kontak</p>.<form (ngSubmit)="addContact()"> berisi <input [(ngModel)]="name" name="name" placeholder="Nama" />, <input [(ngModel)]="email" name="email" placeholder="Email" />, dan <button type="submit">Tambah</button>.<ul> dengan @for (contact of contacts(); track contact.id) { <li>{{ contact.name }} - {{ contact.email }} <button (click)="removeContact(contact.id)">Hapus</button></li> } @empty { <li>Belum ada kontak</li> }.addContact(): berhenti kalau nama atau email kosong, lalu this.contacts.update(list => [...list, { id: Date.now(), name: this.name, email: this.email }]), lalu this.name = '' dan this.email = ''.removeContact(id): this.contacts.update(list => list.filter(c => c.id !== id)).Yang dicek:
<h1>, <form>, dan <ul> di halaman.@for dan signal( (atau signal<...>().Budi di semua kolom isian, lalu menekan tombol Tambah: Budi harus muncul di dalam <ul>, dan kolom isian pertama harus kosong lagi.<p> berisi persis Total: 0 kontak. Sesudah Tambah, Total: 1 kontak. Lalu sesudah Hapus, Total: 0 kontak lagi.
