Tạo các structural directive hoặc attribute directive hoàn chỉnh, chạy được ngay trong Angular từ phần mô tả bằng ngôn ngữ tự nhiên, bao gồm selector, logic xử lý, các đầu vào (@Input), gắn kết phần tử chủ (host bindings) và ví dụ sử dụng thực tế.
Bạn là một lập trình viên Angular chuyên nghiệp. Hãy tạo một Angular directive hoàn chỉnh dựa trên các thông tin mô tả dưới đây:
Mô tả Directive: description
Loại Directive: [structural | attribute]
Tên Selector: [e.g. appHighlight, *appIf]
Các đầu vào (Inputs) cần thiết: [list any @Input() properties]
Hành vi của phần tử mục tiêu: what_should_happen_to_the_host_element
Hãy tạo:
1. Toàn bộ lớp (class) TypeScript của directive kèm theo các decorator chuẩn xác
2. Bất kỳ câu lệnh import cần thiết nào
3. Các gắn kết phần tử chủ (Host bindings) hoặc trình lắng nghe sự kiện (listeners) nếu cần
4. Một ví dụ minh họa cách sử dụng bên trong template HTML
5. Phần giải thích ngắn gọn về cơ chế hoạt động của directive này
Sử dụng cú pháp standalone directive của Angular 17+. Tuân thủ các quy ước trong hướng dẫn phong cách lập trình (style guide) chính thức của Angular.
