Menu thả xuống (drop-down menu) là một thành phần UX/UI thiết yếu, giúp tổ chức nội dung và cải thiện khả năng điều hướng trong ứng dụng web. Việc triển khai một drop down menu angular material hiệu quả đòi hỏi sự hiểu biết về cả Angular và thư viện Material Design. Bài viết này cung cấp hướng dẫn toàn diện từ cơ bản đến nâng cao, bao gồm cách sử dụng Material Menu, Angular CDK, và tạo cấu trúc menu lồng nhau phức tạp bằng TypeScript. Khán giả mục tiêu của bài viết là các nhà phát triển mong muốn làm chủ kỹ thuật này.
Tổng Quan Về Mat-Menu Trong Angular Material
Angular Material cung cấp component mat-menu để xây dựng menu ngữ cảnh hoặc menu thả xuống một cách dễ dàng và tuân thủ nguyên tắc Material Design. Component này hoạt động dựa trên Angular Component Dev Kit (Angular CDK), đảm bảo khả năng tương thích cao và hoạt động tối ưu. Nó được thiết kế để hoạt động liền mạch với các button hoặc trigger khác.
Mat-menu không chỉ là một danh sách các lựa chọn mà còn là một cơ chế overlay mạnh mẽ. Nó quản lý vị trí, hành vi focus và khả năng tiếp cận (accessibility) một cách tự động. Điều này giúp nhà phát triển tập trung vào logic ứng dụng thay vì phải lo lắng về việc xử lý DOM phức tạp. Việc sử dụng mat-menu là nền tảng cho mọi cấu trúc menu nâng cao.
Cấu Trúc Cơ Bản Của Mat-Menu
Cấu trúc của một mat-menu cơ bản bao gồm hai phần chính: phần tử kích hoạt (trigger) và phần tử chứa menu. Phần tử kích hoạt thường là một mat-button hoặc bất kỳ phần tử nào khác với directive [matMenuTriggerFor]. Directive này liên kết nút bấm với template mat-menu đã được định nghĩa.
Phần tử chứa menu là thẻ <mat-menu> được gán một biến tham chiếu template cục bộ (#menuRef). Bên trong thẻ <mat-menu>, các mục menu được định nghĩa bằng thẻ <button mat-menu-item>. Mỗi mục menu là một button có thể thực hiện một hành động cụ thể khi được người dùng chọn.
Quan trọng là phải import MatMenuModule vào Angular module chứa component sử dụng menu. Nếu thiếu bước này, ứng dụng sẽ báo lỗi vì không nhận diện được các selector của Material Menu. Việc chuẩn bị module là bước đầu tiên và cơ bản nhất.
Các Thuộc Tính Quan Trọng
Mat-menu đi kèm với nhiều thuộc tính quan trọng giúp tùy chỉnh hành vi và giao diện của nó. Một trong những thuộc tính cơ bản là [xPosition] và [yPosition], cho phép kiểm soát vị trí mở của menu (ví dụ: ‘before’, ‘after’ cho xPosition và ‘above’, ‘below’ cho yPosition). Mặc định, menu sẽ cố gắng mở ở vị trí thuận tiện nhất.
Thuộc tính [overlapTrigger] (mặc định là true) quyết định liệu menu có che khuất phần tử kích hoạt hay không. Đặt nó thành false sẽ khiến menu mở ra ngay cạnh phần tử kích hoạt, không đè lên nó. Thuộc tính [hasBackdrop] kiểm soát việc hiển thị một lớp nền tối mờ khi menu được mở, thường được dùng cho các menu lớn hoặc menu toàn màn hình.
Việc nắm rõ các thuộc tính này cho phép nhà phát triển tinh chỉnh trải nghiệm người dùng. Ví dụ, trong các ứng dụng chuyên nghiệp, việc tắt [overlapTrigger] giúp người dùng thấy rõ button mà họ đã nhấp. Sự linh hoạt trong việc định vị là chìa khóa để tạo ra menu thân thiện.
Yêu Cầu Về Module
Để sử dụng mat-menu, nhà phát triển cần đảm bảo đã cài đặt Angular Material và import MatMenuModule vào app.module.ts hoặc shared module tương ứng. Ngoài ra, việc sử dụng các button để kích hoạt menu cũng đòi hỏi import MatButtonModule. Hệ thống module của Angular yêu cầu khai báo rõ ràng các phụ thuộc này.
Nếu ứng dụng sử dụng các biểu tượng, MatIconModule cũng cần được import. Điều này đặc biệt quan trọng khi xây dựng menu với các biểu tượng bên cạnh tên mục menu để cải thiện khả năng nhận biết. Việc tổ chức các import vào một material.module.ts riêng biệt (như được gợi ý từ bài viết gốc StackBlitz) là một thực hành tốt, giúp app.module.ts gọn gàng hơn.
Thực hành tốt nhất là chỉ import các module cần thiết để giảm thiểu kích thước bundle của ứng dụng. Mặc dù MatMenuModule là cần thiết, việc loại bỏ các module không dùng sẽ tối ưu hóa hiệu suất tải trang ban đầu. Đây là một cân nhắc quan trọng trong quá trình phát triển.
Hướng Dẫn Triển Khai Drop Down Menu Cơ Bản
Triển khai một drop down menu cơ bản với Angular Material là một quy trình đơn giản, tuân theo mô hình component-template của Angular. Quá trình bắt đầu từ việc thiết lập các gói phụ thuộc cần thiết. Sau đó, nhà phát triển tạo các template HTML và thêm logic xử lý trong TypeScript.
Cài Đặt Và Chuẩn Bị Môi Trường
Đảm bảo rằng Angular CLI đã được cài đặt và bạn đang làm việc trong một dự án Angular. Lệnh cài đặt Angular Material phổ biến là ng add @angular/material. Lệnh này sẽ tự động cấu hình các phụ thuộc cần thiết, bao gồm cả Angular Animations.
Sau khi cài đặt, bạn cần import các module Material cần thiết. Cụ thể, MatMenuModule và MatButtonModule là bắt buộc. Thêm chúng vào mảng imports của module chính (hoặc module tùy chỉnh của bạn). Bước chuẩn bị này là nền tảng để các thẻ mat-menu và directive liên quan hoạt động.
Thiết Lập Mat-Button Và Mat-Menu
Trong file template HTML của component (ví dụ: app.component.html), bạn sẽ định nghĩa nút kích hoạt và menu.
Ngày Cập Nhật: Tháng 11 10, 2025 by Ngô Hồng Thái
