Breakpoints

Overview

It provides a set of standardized, mobile-first min-width media query strings for building responsive layouts with Angular CDK's BreakpointObserver. It includes a server-safe observer that gracefully handles server-side rendering (SSR) by substituting a noop implementation on the server.

Breakpoint map

The DaffBreakpoints enum maps common device viewport widths to CSS media query strings. Each value targets a min-width threshold, so styles cascade upward from smaller screens to larger ones.

Server-safe observer

SERVER_SAFE_BREAKPOINT_OBSERVER is an injection token that resolves to Angular CDK's BreakpointObserver in the browser and a NoopBreakpointObserver on the server, preventing SSR errors when observing breakpoints.

Usage

import {
  SERVER_SAFE_BREAKPOINT_OBSERVER,
  DaffBreakpoints
} from '@daffodil/design';

@Component({ ... })
export class MyComponent {
  private breakpointObserver = inject(SERVER_SAFE_BREAKPOINT_OBSERVER);

  isBigTablet$ = this.breakpointObserver
    .observe(DaffBreakpoints.BIG_TABLET)
    .pipe(map((result) => result.matches));
}