Komponen Angular — Angular

Komponen adalah building block utama Angular. Setiap komponen terdiri dari class, template, dan metadata. Standalone Component import { Component } from…

Komponen adalah satu potong tampilan yang punya HTML, data, dan perilakunya sendiri, dibungkus jadi satu tag baru. Halaman Angular disusun dari komponen-komponen seperti ini. Bayangin cetakan martabak mini di gerobak Bang Jali. Cetakannya cuma satu, tapi sekali tuang bisa jadi banyak martabak, dan tiap martabak bisa dikasih topping sendiri tanpa mengubah yang lain. Di Angular, class komponen adalah cetakannya, dan tiap tag <app-menu-item> di template adalah satu martabak yang dicetak darinya. Satu hasil cetakan itu disebut instance.

🧪 Tebakan cepat: Template App menulis <app-menu-item /> tiga kali, tapi lupa menambahkan imports: [MenuItem]. Berapa kartu menu yang tampil: tiga, satu, atau nol? Jawabannya ada di bagian "Memakai komponen di komponen lain".

Tiga bagian sebuah komponen

// src/app/menu-item/menu-item.ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-menu-item',
  standalone: true,
  template: `
    <div class="kartu">
      <h3>{{ nama }}</h3>
      <p>Rp{{ harga }}</p>
    </div>
  `,
  styles: `.kartu { border: 1px solid #ddd; border-radius: 8px; padding: 8px; }`,
})
export class MenuItem {
  nama = 'Martabak Telur Spesial'
  harga = 50000
}

Memakai komponen di komponen lain

// src/app/app.ts
import { Component } from '@angular/core'
import { MenuItem } from './menu-item/menu-item'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MenuItem],
  template: `
    <h1>Martabak Bang Jali</h1>
    <app-menu-item />
    <app-menu-item />
    <app-menu-item />
  `,
})
export class App {}
Di template App Yang dibuat Angular Tampil
<h1> elemen biasa Martabak Bang Jali
<app-menu-item /> ke-1 instance MenuItem #1 kartu Martabak Telur Spesial, Rp50000
<app-menu-item /> ke-2 instance MenuItem #2 kartu yang sama
<app-menu-item /> ke-3 instance MenuItem #3 kartu yang sama

Tanpa imports: [MenuItem], Angular gak tahu <app-menu-item> itu apa. Tag-nya tetap ada di DOM tapi kosong, jadi yang tampil nol kartu. Itu jawaban tebakannya. Di browser, termasuk di editor latihan, console menulis ini sekali untuk tiap tag:

NG0304: 'app-menu-item' is not a known element (used in the 'App' component template):
1. If 'app-menu-item' is an Angular component, then verify that it is included in the '@Component.imports' of this component.

Waktu ng serve atau ng build, kalimat yang mirip muncul sebagai error kompilasi NG8001, dan build-nya berhenti.

Standalone dan NgModule

Dulu komponen gak bisa berdiri sendiri. Tiap komponen harus didaftarkan di sebuah NgModule:

// Gaya lama: wajib di Angular 2 sampai 13, masih ada di banyak proyek lama
@NgModule({
  declarations: [App, MenuItem],
  imports: [BrowserModule],
  bootstrap: [App],
})
export class AppModule {}

Membuat komponen dengan CLI

ng generate component navbar   # versi pendek: ng g c navbar

Di Angular 20 ke atas, perintah ini membuat folder src/app/navbar/ berisi navbar.ts (class Navbar, selector app-navbar), navbar.html, navbar.css, dan navbar.spec.ts untuk test. Versi sebelumnya menamai filenya navbar.component.ts dan class-nya NavbarComponent. Isinya sama.

⚠️ Jebakan yang sering ketemu

TL;DR: Komponen = class (data dan perilaku) + template (HTML) + metadata di @Component (selector, template atau templateUrl, styles, imports). Selector adalah nama tag-nya, misalnya <app-menu-item />, dan tiap tag membuat satu instance sendiri. Komponen yang dipakai di template komponen lain harus masuk imports: [...] komponen itu; kalau lupa, tag-nya kosong dan muncul NG0304 atau NG8001. ng generate component navbar (pendeknya ng g c navbar) membuat komponen baru. Standalone menggantikan NgModule; sejak Angular 19 itu default, juga di editor latihan (Angular 22), jadi standalone: true gak perlu ditulis lagi.

Yang akan kamu pelajari