Apakah komponen Angular?

Question

Accepted Answer

**Komponen** adalah blok bangunan fundamental UI Angular — kelas TypeScript yang dihiasi dengan `@Component` yang mengawal sebahagian dari skrin ("pandangan"-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 perkara: **selector** (cara anda menggunakannya dalam HTML), **template** (markup), dan **styles** (terbatas pada komponen ini). ## Kelas memegang logik dan data ```html

``` Sifat awam dan kaedah kelas dapat diakses terus dalam templat melalui pengikatan — ini adalah inti cara Angular menghubungkan data dan pandangan. ## Menggunakan komponen ```html ``` ## Gaya dienkapsulasi secara lalai ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular mengalingkan gaya komponen secara automatik (View Encapsulation), jadi CSS tidak bocor antara komponen. ## Mengapa ia penting Komponen adalah cara anda menstruktur setiap aplikasi Angular — unit yang mandiri bagi template + logik + gaya terbatas, disusun menjadi pohon. Memahami dekorator `@Component` (selector, template, styles) dan bagaimana sifat/kaedah kelas terikat pada template adalah asas mutlak pembangunan Angular; segala yang lain dibina di atas model komponen.