Proyek Mini: Daftar Belajar

Target Proyek

Kita akan membuat daftar materi belajar. Setiap materi memiliki judul dan status selesai.

Menyiapkan Data

Tambahkan daftar sesi pada komponen:

sessions = [
  { title: "Pengenalan Angular", completed: true },
  { title: "Komponen", completed: true },
  { title: "Data Binding", completed: false },
];

Menampilkan Daftar

Gunakan control flow Angular untuk menampilkan setiap sesi:

@for (session of sessions; track session.title) {
  <article>
    <h2>{{ session.title }}</h2>
    <p>{{ session.completed ? "Selesai" : "Belum selesai" }}</p>
  </article>
}

Mengubah Status

Tambahkan tombol pada setiap item dan hubungkan dengan method untuk mengubah nilai completed.

Tantangan Lanjutan

1. Tampilkan jumlah sesi yang sudah selesai.
2. Tambahkan gaya berbeda untuk sesi selesai.
3. Tambahkan form untuk membuat sesi baru.

Selamat, kamu sudah menyelesaikan fondasi Angular dan memiliki proyek mini yang dapat dikembangkan lebih lanjut.