Decorator @Component nhận những metadata nào?

Decorator @Component cho Angular biết cách tạo và render một class thành component. Các tùy chọn phổ biến nhất là:

• selector: tên thẻ HTML dùng để đặt component, ví dụ app-user-card.
• template hoặc templateUrl: HTML viết trực tiếp hoặc đường dẫn tới file HTML.
• styles, styleUrl hoặc styleUrls: CSS có phạm vi trong component.
• imports: các component, directive và pipe dùng trong template.
• changeDetection: Default hoặc OnPush.
• providers: service được tạo cho component này và các component con.

@Component({
  selector: 'app-user-card',
  imports: [DatePipe],
  template: `<p>{{ joined | date }}</p>`,
  styles: `p { color: gray; }`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserCard {
  joined = new Date()
}

Một số tùy chọn khác bạn có thể gặp là encapsulation, host và animations. Trong Angular hiện tại component mặc định là standalone. Cờ standalone: true trong code cũ giờ đã thừa.

Hãy nhớ các phần bắt buộc: selector và template.