ngx-mq

NGX-MQ is a lightweight Angular library that provides a modern, declarative API for handling responsive design. It leverages Angular's signals and the native matchMedia API to deliver reactive media queries with automatic lifecycle management, making it ideal for building responsive Angular applications.

Key Features

• Signal-Powered Queries — Returns reactive signals that automatically update when viewport conditions change.
• Built-in Breakpoint Presets — Includes ready-to-use breakpoint maps for Tailwind CSS, Bootstrap, and Angular Material.
• SSR-Safe — Designed to work seamlessly with server-side rendering.
• Auto-Cleanup — Uses Angular's DestroyRef for automatic resource cleanup, eliminating manual subscription management.
• Generic Media Query API — Supports any valid CSS media query beyond breakpoints, such as orientation, color scheme, and reduced motion.
• Common Utilities — Provides helper functions for common responsive patterns like up, down, and between.

Philosophy

NGX-MQ emphasizes a declarative and framework-aligned approach, integrating deeply with Angular's reactivity model and dependency injection system to provide a seamless developer experience.