Tugas Akhir
Penjelasan
Sekarang saatnya menggabungkan semua yang sudah dipelajari — dari component dasar sampai pipes — jadi satu aplikasi utuh. Kamu akan membuat aplikasi Todo List sederhana yang menggabungkan Signal, @for dengan track, event binding, dan conditional rendering.
Tugas
Buat component TodoAppComponent dengan signal daftarTodo (array objek {id, teks, selesai}) dan signal inputBaru (string, diikat ke input lewat [(ngModel)]). Buat method tambahTodo() untuk menambah todo baru ke daftarTodo (id bisa pakai Date.now() atau counter manual). Tampilkan daftarTodo lewat @for dengan track item.id, tiap item punya checkbox (event binding untuk toggle selesai) dan tombol hapus. Buat computed() jumlahSelesai yang menghitung berapa todo yang sudah selesai, tampilkan ringkasan "{{ jumlahSelesai() }} dari {{ daftarTodo().length }} todo selesai" di bagian atas.
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
Kalau bingung mulai dari mana, kerjakan tambahTodo() dan render list-nya dulu (tanpa checkbox/hapus), cek hasilnya di browser, baru tambahkan toggleSelesai() dan hapusTodo() satu per satu. Program besar selalu lebih mudah kalau dipecah jadi langkah-langkah kecil.