Trong bài viết hôm nay tớ sẽ nói về sự khác nhau giữa Component, Template và Directive và mối liên quan của chúng trong Angular.

1. Component

• Component là một khối xây dựng cơ bản trong Angular. Nó đại diện cho một phần giao diện người dùng (UI) cụ thể trong ứng dụng.

• Mỗi component có thể có logic riêng, dữ liệu đầu vào và đầu ra, và có thể được sử dụng lại trong suốt ứng dụng.

• Một component bao gồm:
  - một file TypeScript (.ts) chứa mã logic
  - một file HTML (.html) chứa markup giao diện người dùng
  - một file CSS (.css) chứa kiểu dáng cho giao diện người dùng.

Theo tài liệu của Angular( https://angular.io/) Component là một loại Directive có template và chỉ có một component được khởi tạo cho mỗi phần tử trong template. Component có thể tái sử dụng, độc lập và linh hoạt. Component có thể chứa và gọi được nhiều component khác. Để khai báo một component, chúng ta sử dụng trang trí @Component với các thuộc tính như selector, template, styleUrls, ...

2. Template

• Template là nơi bạn xác định giao diện người dùng của một component trong Angular. Nó chứa các markup HTML và các directive để hiển thị dữ liệu và tương tác với người dùng.

• Template được viết bằng ngôn ngữ HTML thông thường, nhưng có thêm các cú pháp đặc biệt của Angular để liên kết dữ liệu và điều khiển giao diện người dùng.

• Trong template, bạn có thể sử dụng các directive, biểu thức liên kết dữ liệu (data binding), sự kiện (event binding), vòng lặp (ngFor), điều kiện (ngIf) và các công cụ khác của Angular để tạo giao diện động.

Template là một phần của component , là nơi định nghĩa cấu trúc HTML cho component đó. Template có thể được viết trực tiếp trong file TypeScript bằng thuộc tính template hoặc được tách ra file HTML riêng bằng thuộc tính templateUrl. Template có thể sử dụng các biến, hàm, thuộc tính của component thông qua cú pháp {{ }} hoặc [ ] hoặc ( ). Template cũng có thể sử dụng các directive để thay đổi cấu trúc DOM hoặc giao diện của các phần tử HTML.

3. Directive

• Directive là một đối tượng giúp chúng ta thay đổi hành vi, giao diện hoặc thuộc tính của một phần tử HTML hoặc component khác. Directives có thể hiểu như là các đoạn mã typescript (hoặc javascript) kèm theo cả HTML và khi gọi thì gọi như là HTML luôn.

<!-- Đây là 1 Directive *ngIF để kiểm tra điều kiện if ở ngy html-->
<div *ngIF="day">
    Day: {{day}}
   </div>

• Directive có hai loại chính: structural directive và attribute directive.

  • Structural directive là directive cấu trúc, dùng để vẽ HTML, hiển thị dữ liệu lên giao diện HTML, và thay đổi cấu trúc DOM bằng việc thêm bớt các phần tử trong DOM. Các structural directive thường có dấu * ở trước của directive. Ví dụ *ngFor, *ngIf.
  • Attribute directive là directive thuộc tính, dùng để thay đổi giao diện, tương tác của các phần tử HTML hoặc thêm các thuộc tính động cho element HTML. Ví dụ ngStyle, ngClass.

  Để khai báo một directive, chúng ta sử dụng trang trí @Directive với các thuộc tính như selector, hostListeners, hostBindings, ...

Lời kết:

Tóm lại, Component là một loại directive có template riêng, là một khối xây dựng cơ bản trong Angular. Template là cấu trúc HTML của component, và Directive là cách để thay đổi các phần tử HTML hoặc component khác. Cả ba khái niệm này đều quan trọng trong việc xây dựng ứng dụng Angular.

Tài liệu tham khảo

Angular

Tìm hiểu cơ bản về Directives