Belajar Angular - Component & Template

#Pendahuluan

Di episode 3 kalian sudah memiliki project Angular yang berjalan. Sekarang masuk ke jantung Angular: komponen dan template. Semua yang kalian lihat di layar — tombol, form, daftar, kartu — adalah komponen yang merender template.

Episode 4 membedah cara membuat komponen, memakai interpolation dan berbagai bentuk data binding, template references, serta komunikasi antar komponen dengan @Input dan @Output. Ini adalah keterampilan yang akan kalian pakai di setiap baris kode Angular.

#Membuat Component dan Template

#Generate Component dengan CLI

Cara terbaik membuat komponen adalah lewat CLI karena file-file yang dibutuhkan di-generate otomatis dan didaftarkan dengan benar.

ng generate component produk
ng g c produk --skip-tests

ng g c produk --skip-tests membuat folder produk berisi file .ts, .html, dan .scss tanpa file spec. Setelah di-generate, komponen langsung bisa dipakai di template lain melalui selector-nya.

#Anatomi Sebuah Komponen

Komponen produk sederhana

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-produk',
  standalone: true,
  template: `<h3>Daftar Produk</h3>`,
  styleUrl: './produk.component.scss',
})
export class ProdukComponent {
  namaToko = 'Toko Online';
}

Dekorator @Component mendefinisikan selector, template, dan styleUrl. Property namaToko adalah state komponen yang bisa ditampilkan di template. Komponen standalone tidak memerlukan NgModule untuk dipakai.

#Interpolation dan Data Binding

#Interpolation

Interpolation menampilkan nilai dari komponen ke template dengan kurung ganda:

Interpolation di template

<p>Selamat datang di {{ namaToko }}</p>

{{ namaToko }} akan menampilkan nilai property namaToko. Angular juga mendukung ekspresi sederhana di dalam kurung, seperti {{ 1 + 2 }} atau {{ nama.toUpperCase() }}, tetapi hindari logika kompleks di template.

#Property Binding, Event Binding, dan Two-way Binding

• Property binding [property]="nilai" mengirim nilai dari komponen ke elemen.
• Event binding (event)="handler($event)" menangkap event dari elemen.
• Class/style binding mengubah class dan style berdasarkan kondisi.
• Two-way binding [(ngModel)] menggabungkan keduanya untuk form.

Berbagai bentuk binding

<button [disabled]="sedangMuat">Simpan</button>
<input [value]="nama" (input)="nama = $any($event.target).value" />
<div [class.aktif]="terpilih" [style.color]="warna">Item</div>

Perhatikan pola binding: [disabled] mengikat property DOM, (input) menangkap event, [class.aktif] menambah class saat terpilih bernilai true, dan [style.color] mengikat nilai style secara langsung.

#Template References

#View Child dan Template Reference Variable

Template reference variable (dengan tanda #) memberikan akses ke elemen DOM atau komponen di dalam template yang sama, tanpa perlu query manual.

Template reference variable

<input #cariInput placeholder="Cari produk" />
<button (click)="cari(cariInput.value)">Cari</button>

#cariInput adalah referensi ke elemen input. Saat tombol diklik, nilai cariInput.value dikirim ke method cari. Untuk mengakses elemen dari class komponen, gunakan viewChild:

Akses elemen dari class

import { Component, ElementRef, viewChild } from '@angular/core';
 
@Component({
  selector: 'app-cari',
  standalone: true,
  template: `<input #cari />`,
})
export class CariComponent {
  readonly cari = viewChild<ElementRef<HTMLInputElement>>('cari');
}

viewChild('cari') mengembalikan sinyal yang berisi elemen input setelah view siap. Ini adalah pendekatan modern menggantikan @ViewChild berbasis dekorator.

#Komunikasi Antar Komponen

#@Input dan @Output dengan Signal

Komponen induk mengirim data ke komponen anak lewat input, dan komponen anak memberi tahu induk lewat output. Sejak Angular 17.2, input dan output tersedia sebagai fungsi signal-based.

Komponen anak dengan input dan output

import { Component, input, output } from '@angular/core';
 
@Component({
  selector: 'app-kartu-produk',
  standalone: true,
  template: `
    <div class="kartu" (click)="pilih.emit()">
      <h4>{{ produk().nama }}</h4>
      <p>Rp {{ produk().harga }}</p>
    </div>
  `,
})
export class KartuProdukComponent {
  readonly produk = input.required<Produk>();
  readonly pilih = output();
}

Komponen induk lalu memakai <app-kartu-produk [produk]="p" (pilih)="bukaDetail()" />. Perhatikan input.required untuk input wajib dan output() untuk event yang di-emit saat kartu diklik.

#Dua Arah Komunikasi

Kombinasi input dan output inilah yang membentuk pola komunikasi dua arah antar komponen: induk mengirim data lewat property binding, anak melaporkan aksi lewat event binding. Pola ini disebut component communication dan menjadi dasar arsitektur komponen Angular.

#Penutup

Inti yang harus dibawa pulang:

• Komponen adalah unit tampilan dengan selector, template, dan style.
• Interpolation menampilkan nilai; property dan event binding menghubungkan komponen dengan DOM.
• Class dan style binding memanipulasi tampilan berdasarkan kondisi.
• Template reference variable memudahkan akses elemen di template.
• input dan output signal-based menggantikan @Input dan @Output klasik.
• Komunikasi antar komponen selalu berbentuk data masuk dan event keluar.

Di episode 5 selanjutnya kita akan membahas directives dan pipes — memakai built-in directives seperti *ngIf dan *ngFor plus kontrol flow modern @if dan @for, membuat custom directive, serta memakai dan membuat pipe untuk memformat data tampilan.