Struktur Proyek dan Komponen

Struktur Dasar Proyek

Kode aplikasi utama berada di dalam folder src/app. Di sana kamu akan menemukan file komponen utama dan konfigurasi aplikasi.

Komponen Angular umumnya memiliki:

• class TypeScript untuk logika;
• template HTML untuk tampilan;
• stylesheet untuk desain;
• metadata komponen yang menghubungkan semuanya.

Membuat Komponen

Buat komponen baru bernama profile-card:

ng generate component profile-card

Angular CLI akan membuat file yang dibutuhkan secara otomatis. Gunakan selector komponen tersebut pada template aplikasi utama:

<app-profile-card></app-profile-card>

Mengisi Komponen

Tambahkan data sederhana pada class komponen:

export class ProfileCardComponent {
  name = "Januar Samjid";
  role = "Software Engineer";
}

Tampilkan data pada template:

<article>
  <h2>{{ name }}</h2>
  <p>{{ role }}</p>
</article>

Latihan Sesi 2

Buat komponen course-card yang menampilkan judul kursus, deskripsi singkat, dan durasi belajar.