Study
← Semua Kategori

Angular

Pengenalan Angular

Apa itu Angular, cara instalasi lewat Angular CLI, dan cara menjalankan project pertamamu.

Component Dasar

Membuat standalone component lewat decorator @Component, terdiri dari class, template, dan style.

Template Syntax & Property Binding

Menampilkan data lewat interpolasi {{ }}, dan mengikat properti elemen lewat property binding [ ].

Event Binding

Menangani interaksi pengguna lewat event binding (event)="...".

Two-way Binding dengan ngModel

Sinkronisasi dua arah antara input form dan properti class lewat [(ngModel)].

Conditional Rendering: @if

Menampilkan elemen secara kondisional lewat control flow syntax modern @if/@else.

List Rendering: @for

Menampilkan array data sebagai daftar elemen lewat control flow syntax modern @for, dan wajib track.

Component Communication: @Input & @Output

Mengirim data ke component anak lewat @Input, dan mengirim event kembali ke induk lewat @Output.

Services & Dependency Injection

Class Service yang menyimpan logika/data bersama, di-inject lewat constructor.

Signals: Reaktivitas Modern Angular

State reaktif modern Angular lewat signal(), menggantikan pola lama berbasis Zone.js.

Computed Signals

Nilai turunan dari signal lain lewat computed(), otomatis update dan di-cache.

Lifecycle Hooks: ngOnInit & ngOnDestroy

Menjalankan kode di titik tertentu siklus hidup component lewat interface lifecycle.

Routing Dasar di Angular

Mendaftarkan halaman lewat array routes, dan navigasi lewat routerLink.

Route Parameters

Mengambil parameter dinamis dari URL lewat ActivatedRoute.

Reactive Forms Dasar

Membangun form lewat FormGroup dan FormControl, alternatif lebih terstruktur dari ngModel.

Reactive Forms: Validators

Menambahkan aturan validasi ke FormControl lewat Validators bawaan Angular.

HttpClient & Fetching Data

Mengambil data dari API lewat HttpClient, dikombinasikan dengan Signals untuk menampung hasilnya.

Pipes

Transformasi tampilan data langsung di template lewat operator |, dan membuat pipe custom.

Tugas Akhir

Latihan akhir menggabungkan Signal, @for, @Input/@Output, dan Reactive Forms dalam satu aplikasi Todo List.