Component trong Angular là gì?

Question

Accepted Answer

**Component** là khối xây dựng cơ bản của một UI Angular — một **class** TypeScript được trang trí bằng `@Component`, điều khiển một phần của màn hình ("view" của nó). Mọi ứng dụng Angular là một cây các component. ## Giải phẫu một component ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // thẻ HTML tùy chỉnh: templateUrl: "./user-card.html", // view (hoặc inline `template: '...'`) styleUrls: ["./user-card.css"], // style được scope cho component này }) export class UserCardComponent { name = "Ann"; // thuộc tính → có sẵn trong template greet() { return `Hi ${this.name}`; } // phương thức → gọi được từ template } ``` Decorator `@Component` kết nối ba thứ với nhau: một **selector** (cách bạn dùng nó trong HTML), một **template** (phần markup), và **styles** (được scope vào component này). ## Class chứa logic và dữ liệu ```html

``` Các thuộc tính và phương thức public của class có thể truy cập trực tiếp trong template của nó thông qua binding — đây là cốt lõi của cách Angular kết nối dữ liệu và view. ## Sử dụng một component ```html ``` ## Styles được đóng gói (encapsulate) theo mặc định ```css /* user-card.css — các style này CHỈ ảnh hưởng tới component này */ h2 { color: blue; } /* không lọt ra

của các component khác */ ``` Angular tự động scope các style của component (View Encapsulation), nên CSS không lọt giữa các component. ## Tại sao điều này quan trọng Component là cách bạn cấu trúc mọi ứng dụng Angular — các đơn vị độc lập gồm template + logic + style được scope, kết hợp thành một cây. Hiểu decorator `@Component` (selector, template, styles) và cách các thuộc tính/phương thức của class bind tới template là nền tảng tuyệt đối của việc phát triển Angular; mọi thứ khác đều xây dựng trên mô hình component.