Recipes

Practical patterns built from the ngx-mq helpers.

Reusable viewport helpers

Wrap the breakpoint helpers into named functions you can share across components.

// viewport.ts
import { Signal } from '@angular/core';
import { up, down, between } from 'ngx-mq';

export const isMobile = (): Signal<boolean> => down('md');
export const isTablet = (): Signal<boolean> => between('md', 'lg');
export const isDesktop = (): Signal<boolean> => up('lg');
Copy

export class HeaderComponent {
  readonly mobile = isMobile();
}
Copy

Compose conditions

Combine any boolean signals with and, or and not.

import { and, or, not, up, down, hover, orientation, reducedMotion } from 'ngx-mq';

// Large screen, in landscape, with a hover-capable pointer
readonly isLandscapeDesktop = and(up('lg'), orientation('landscape'), hover());

// Small screens OR a reduced-motion preference
readonly prefersSimpleUi = or(down('md'), reducedMotion());

// Devices without hover (touch-like): there is no direct inverse helper for hover()
readonly isTouchLike = not(hover());
Copy

Dark mode

import { colorScheme } from 'ngx-mq';

export class ThemeService {
  readonly prefersDark = colorScheme('dark');
}
Copy

Detect an installed PWA

import { displayMode } from 'ngx-mq';

readonly isInstalledPwa = displayMode('standalone');
Copy

Touch vs precise pointers

import { pointer, anyPointer } from 'ngx-mq';

readonly isTouch = pointer('coarse');
readonly hasFinePointer = anyPointer('fine');
Copy

Respect reduced motion

import { reducedMotion } from 'ngx-mq';

export class AnimationService {
  readonly reduceMotion = reducedMotion();
}
Copy

Anything else

For features without a dedicated helper, drop down to matchMediaSignal with a raw CSS media query.

import { matchMediaSignal } from 'ngx-mq';

readonly isRetina = matchMediaSignal('(min-resolution: 2dppx)');
Copy