ngx-responsive-signals

Signal-based responsive breakpoints for Angular. Inject the service, call a method, get a Signal<boolean> — no RxJS, no subscriptions, no boilerplate.

---

Requirements

• Angular 17+

---

Installation

npm install @irv-labs/ngx-responsive-signals

---

Quick Start

import { ResponsiveService, Screen } from '@irv-labs/ngx-responsive-signals';

@Component({ ... })
export class MyComponent {
  private responsive = inject(ResponsiveService);

  isMobile    = this.responsive.is(Screen.Mobile);
  showSidebar = this.responsive.isAtLeast(Screen.Tablet);
  isCompact   = this.responsive.isAtMost(Screen.Tablet);
}

@if (isMobile()) {
<app-mobile-nav />
} @else {
<app-desktop-nav />
}

---

Breakpoints

Screen	Width
Mobile	<= 480px
Tablet	481 – 768px
LargeTablet	769 – 1024px
Desktop	1025 – 1280px
LargeDesktop	> 1280px

---

API

responsive.is(screen)

Returns Signal<boolean> — true only when the current screen matches exactly.

isMobile = this.responsive.is(Screen.Mobile);
isTablet = this.responsive.is(Screen.Tablet);
isDesktop = this.responsive.is(Screen.Desktop);

---

responsive.isAtLeast(screen)

Returns Signal<boolean> — true when the current screen is that size or larger.

showSidebar = this.responsive.isAtLeast(Screen.Tablet); // Tablet, LargeTablet, Desktop, LargeDesktop
fullLayout = this.responsive.isAtLeast(Screen.Desktop); // Desktop, LargeDesktop

---

responsive.isAtMost(screen)

Returns Signal<boolean> — true when the current screen is that size or smaller.

isCompact = this.responsive.isAtMost(Screen.Tablet); // Mobile, Tablet
stackedNav = this.responsive.isAtMost(Screen.LargeTablet); // Mobile, Tablet, LargeTablet

---

responsive.isLarger(screen)

Returns Signal<boolean> — true when the current screen is strictly larger than the given one.

aboveTablet = this.responsive.isLarger(Screen.Tablet); // LargeTablet, Desktop, LargeDesktop

---

responsive.isSmaller(screen)

Returns Signal<boolean> — true when the current screen is strictly smaller than the given one.

belowDesktop = this.responsive.isSmaller(Screen.Desktop); // Mobile, Tablet, LargeTablet

---

responsive.screen

Signal<Screen> — the current screen value. Useful for the pipe or for derived logic.

screen = this.responsive.screen;

---

Pipe

Import ResponsivePipe in your component and pass responsive.screen as input. The argument follows the format 'screen' or 'screen:modifier'.

imports: [ResponsivePipe];

screen = inject(ResponsiveService).screen;

<!-- Exact -->
@if (screen() | responsive:'mobile') { }

<!-- isAtLeast -->
@if (screen() | responsive:'tablet:least') { }

<!-- isAtMost -->
@if (screen() | responsive:'desktop:most') { }

<!-- isLarger -->
@if (screen() | responsive:'tablet:larger') { }

<!-- isSmaller -->
@if (screen() | responsive:'tablet:smaller') { }

Modifier	Equivalent service method
(none)	is()
:least	isAtLeast()
:most	isAtMost()
:larger	isLarger()
:smaller	isSmaller()

---

Custom Breakpoints

Call provideResponsive() in app.config.ts to override the default values. Only pass what you need — the rest keeps its default.

// app.config.ts
import { provideResponsive } from '@irv-labs/ngx-responsive-signals';

export const appConfig: ApplicationConfig = {
  providers: [
    provideResponsive({
      mobile: 640,
      desktop: 1440,
      // tablet and largeTablet stay at their defaults
    }),
  ],
};

Calling provideResponsive() is optional — the service works with the default breakpoints out of the box.

---

SSR

The service is SSR-safe. On the server, window is never accessed — the screen defaults to Mobile (width 0), which is the most conservative fallback for layout decisions.

---

Path Alias (optional)

If you prefer a shorter import, add a path alias in your tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@responsive": ["./node_modules/@irv-labs/ngx-responsive-signals"]
    }
  }
}

// Before
import { ResponsiveService, Screen } from '@irv-labs/ngx-responsive-signals';

// After
import { ResponsiveService, Screen } from '@responsive';

This is a local convenience — it does not affect the published package or teammates unless they add the same alias.

---

Public API

Export	Description
ResponsiveService	Core service — is, isAtLeast, isAtMost, isLarger, isSmaller
ResponsivePipe	Pipe that resolves a screen + modifier to boolean
provideResponsive	Registers custom breakpoints in app.config
Screen	Enum — Mobile, Tablet, LargeTablet, Desktop, LargeDesktop
SCREEN_ORDER	Ordinal map used internally for comparisons
RESPONSIVE_BREAKPOINTS	InjectionToken for the breakpoints config
DEFAULT_BREAKPOINTS	Default breakpoint values
ResponsiveBreakpoints	Config interface for provideResponsive
ResponsiveModifier	'least' | 'most' | 'larger' | 'smaller'
ResponsivePipeArg	Union type for all valid pipe arguments

---

Philosophy

Angular Signals make reactive state simple — a boolean that updates when the window resizes should be nothing more than a computed. This library takes that idea to its logical conclusion: one service, a handful of methods, all returning signals. No Observables to subscribe to, no async pipes, no manual cleanup.

The comparison model is built on a single ordinal map — each screen maps to a number, and isAtLeast, isAtMost, isLarger, isSmaller become single-line comparisons. The result is predictable, testable, and easy to reason about.

• Signal-native — every method returns Signal<boolean>, composable with any computed or effect
• Zero setup — works without provideResponsive(), custom breakpoints are opt-in
• SSR-safe — no window access on the server
• No memory leaks — the resize listener is cleaned up via DestroyRef
• Dev-time safety — breakpoint order is validated at startup, not silently ignored

---

License

MIT