Apa itu komponen Angular?

Question

Accepted Answer

**Komponen** adalah blok pembangun fundamental dari UI Angular — sebuah **class** TypeScript yang dihias dengan `@Component` yang mengendalikan bagian dari layar ("tampilan"-nya). Setiap aplikasi Angular adalah pohon komponen. ## Anatomi komponen ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // the custom HTML tag: templateUrl: "./user-card.html", // the view (or inline `template: '...'`) styleUrls: ["./user-card.css"], // scoped styles for this component }) export class UserCardComponent { name = "Ann"; // properties → available in the template greet() { return `Hi ${this.name}`; } // methods → callable from the template } ``` Dekorator `@Component` menghubungkan tiga hal: **selector** (cara Anda menggunakannya dalam HTML), **template** (markup), dan **styles** (ruang lingkup komponen ini). ## Class menyimpan logika dan data ```html

``` Properti dan metode publik class dapat diakses langsung dalam template-nya melalui binding — ini adalah inti dari bagaimana Angular menghubungkan data dan tampilan. ## Menggunakan komponen ```html ``` ## Gaya dienkapsulasi secara bawaan ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular secara otomatis membatasi ruang lingkup gaya komponen (View Encapsulation), jadi CSS tidak bocor antar komponen. ## Mengapa ini penting Komponen adalah cara Anda menyusun setiap aplikasi Angular — unit mandiri dari template + logika + gaya berruang lingkup, terdiri dalam pohon. Memahami dekorator `@Component` (selector, template, styles) dan bagaimana properti/metode class mengikat ke template adalah dasar mutlak pengembangan Angular; semuanya dibangun di atas model komponen.