Launched November 18, 2025.png?width=160)
ngx-mq
Signal-Powered Breakpoints & Media Queries
Free863 impressions#15 of its week
With CSS media queries, hidden doesn’t mean inactive.
The component still renders, runs lifecycles, and keeps subscriptions alive.
All that background logic quietly eats memory and slows your app down.
NGX-MQ solves the problem.
Signal-based media queries that prevent rendering before it starts — nothing runs unless it truly matters.
Give it a try — your app will thank you! 🚀
Signal-powered breakpoints and media queries for Angular that render components only when needed.
- for
- Angular developers using the signals API who need responsive UI without RxJS.
- pricing
- open source
- license
- MIT
works withBootstrap
Key features
6 features of ngx-mq
- Signal-native API — Returns Signal<boolean> values that can be read directly in templates.
- Zero boilerplate — No subscriptions or manual cleanup; automatic via DestroyRef.
- SSR-safe — Provides configurable static values during server-side rendering.
- Preset breakpoints — Built-in Tailwind, Bootstrap and Material breakpoint maps.
- Composable helpers — Combine conditions with and / or / not and use media-feature helpers like hover, orientation, reducedMotion.
- Tiny footprint — ~1.9 kB gzipped and no RxJS dependency.
Use cases
- Render a sidebar only on desktop screens using up('lg').
- Switch layouts between mobile and tablet with down('md') and between('md','lg').
- Apply dark-mode styles only when the system prefers a dark color scheme.
- Disable hover styles on touch devices using not(hover()).
- Respect users' reduced-motion preference to simplify animations.
ngx-mq FAQ
Do I need RxJS to use ngx-mq?+
No, ngx-mq works without RxJS and provides a tiny standalone bundle.
Is ngx-mq compatible with server-side rendering?+
Yes, you can set a static SSR value with provideSsrValue or per-call options.
How do I register breakpoints?+
Call provideBreakpoints (or a preset like provideTailwindBreakpoints) once at bootstrap.
Can I create custom breakpoint maps?+
Yes, provideBreakpoints accepts a map of named breakpoints you define.
What Angular versions are supported?+
ngx-mq works with Angular 16-22; older major versions use previous package versions.
Summarized by DevHunt from npmjs.com · Oct 4, 2026. Details may change; check the official site.
